View source for Cambiar la apariencia (colores y/o iconos) utilizados en la interfaz de una carpeta de bases de datos

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 
                     (<nowiki><DIV> .. </DIV></nowiki>) 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
        <nowiki>.institutionalInfo {
		float: left;
		width: 60%;
		padding: 15px 0px 14px 15px;
	}</nowiki>
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:
           <nowiki>//archivos de estilo
               if (isset($def["CSS_NAME"])){
                   $css_name=$def["CSS_NAME"];
               }
           //Logo
               if (isset($def["LOGO"])){ 
                   $logo=$def["LOGO"];
               }
           </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
|-
| .sectionInfo || background || Color de fondo donde se muestra el nombre del proceso y base de datos activa
|-
|.helper || background-color || color del área donde se muestra el botón de ayuda y el nombre del script que se está ejecutando
|-
| footer || background<br>color || Color de fondo de la franja y de letras donde se muestra el versión de abcd y la información de Bireme

|}