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

1. 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

1. Modifique los archivos styles.css y layout.css reflejando los cambios necesarios

2. 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

1. 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

1. 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: