Difference between revisions of "Cambiar la apariencia (colores y/o iconos) utilizados en la interfaz de una carpeta de bases de datos"
(Página creada con «Los archivos de estilo que se utilizan por defecto en ABCD se encuentran localizados en la carpeta '''central/css'''. Para crear un nuevo estilo aplicable una carpeta de ...») |
|||
Line 42: | Line 42: | ||
} | } | ||
</nowiki> | </nowiki> | ||
+ | |||
+ | |||
+ | '''Modificaciones al archivo estilos styles.css para cambio de fondos colores''': | ||
+ | |||
+ | {| class="wikitable" | ||
+ | |- | ||
+ | ! Elemento !! Parámetro !! Resultado | ||
+ | |- | ||
+ | | BODY || background || Color de fondo de la ventana de ABCD | ||
+ | |- | ||
+ | | .heading || background-color || Color del área donde se muestra el logo | ||
+ | |- | ||
+ | | .userInfo, .userInfo A, .language, .language A || color ||Cambiar el color de las letras de las etiquetas con la información del usuario, lista de bases de datos, lista de lenguajes y lista de módulos | ||
+ | |- | ||
+ | |.helper || background || color del área donde se muestra el botón de ayuda y el nombre del script que se está ejecutando | ||
+ | |- | ||
+ | | footer || background | ||
+ | |||
+ | color || Color de fondo de la franja y de letras donde se muestra el versión de abcd y la información de Bireme | ||
+ | |- | ||
+ | | Texto de celda || Texto de celda || | ||
+ | |- | ||
+ | | Texto de celda || Texto de celda || | ||
+ | |- | ||
+ | | Texto de celda || Texto de celda || | ||
+ | |- | ||
+ | | Texto de celda || Texto de celda || | ||
+ | |} |
Revision as of 09:17, 16 November 2014
Los archivos de estilo que se utilizan por defecto en ABCD se encuentran localizados en la carpeta central/css.
Para crear un nuevo estilo aplicable una carpeta de bases de datos en particular haga lo siguiente:
1. Crear bajo central/css una nueva carpeta con el nombre que ud. le quiera dar (sin espacios en blanco ni caracteres especiales). Ejm:correspondencia
2. Copiar a esta carpeta desde central/css los archivos: template.css, layout.css y styles.css.
template.css incluye los estilos styles.css y layout.css utilizados para dar formato a las páginas layout.css Define el tamaño, márgenes, alineación y posición de las diferentes divisiones (<DIV> .. </DIV>) utilizadas para dar formato a las páginas styles.css Contiene los tamaños de letras, colores, enlaces a los íconos y demás elementos presentados en las páginas
3. El archivo styles.css en su versión original utiliza la técnica de "direccionamiento indirecto (../)" para hacer referencia a los iconos e imágenes que se presentan en las páginas. Ejemplo:
A.saveButton IMG { background: url('../images/icon/defaultButton_save.png') no-repeat center; }
- Esta forma de escribir el url indica que se debe subir un nivel dentro de la escala del directorio activo para localizar la carpeta images/icon donde se encuentra almacenado defaultButton_save.png. Como el directorio que hemos creado se encuentra un nivel más abajo de la carpeta css, todos los direccionamientos indirectos de styles.css deben ser cambiados de ../ a ../../. Esto se puede realizar fácilmente con la opción reemplar de cualquier procesador de archivos .txt
4. Modifique los archivos styles.css y layout.css reflejando los cambios necesarios
5. Si quiere sustituir el logo de ABCD por una propio coloque en la carpeta creada (css/correspondencia) la imagen que desea utilizar teniendo ciudado de que sus dimensiones aproximadas sean 60px de alto y máximo 600px de ancho. Esto puede cambiar de acuerdo a las dimensiones de cada monitor y debe estar de acuerdo con las especificaciones de la clase
.institutionalInfo { float: left; width: 60%; padding: 15px 0px 14px 15px; }
definida en layout.css
6. Modifique el archivo abcd.def localizado en la carpeta base agregando los parámetros:
CSS_NAME=Nombre_de_la_carpeta_con_los_archivos_de_estilo_a_utilizar LOGO=../css/Nombre_de_la_carpeta_con_los_archivos_de_estilo_a_utilizar/Nombre_de_la_imagen
7. Agregue al principio del config_extended.php las siguiente lineas para que puedan leerse los parámetros recién creados:
//archivos de estilo if (isset($def["CSS_NAME"])){ $css_name=$def["CSS_NAME"]; } //Logo if (isset($def["LOGO"])){ $logo=$def["LOGO"]; }
Modificaciones al archivo estilos styles.css para cambio de fondos colores:
Elemento | Parámetro | Resultado |
---|---|---|
BODY | background | Color de fondo de la ventana de ABCD |
.heading | background-color | Color del área donde se muestra el logo |
.userInfo, .userInfo A, .language, .language A | color | Cambiar el color de las letras de las etiquetas con la información del usuario, lista de bases de datos, lista de lenguajes y lista de módulos |
.helper | background | color del área donde se muestra el botón de ayuda y el nombre del script que se está ejecutando |
footer | background
color || Color de fondo de la franja y de letras donde se muestra el versión de abcd y la información de Bireme | |
Texto de celda | Texto de celda | |
Texto de celda | Texto de celda | |
Texto de celda | Texto de celda | |
Texto de celda | Texto de celda |