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 
                    (<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
.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 color	Color de fondo de la franja y de letras donde se muestra el versión de abcd y la información de Bireme