J. Personalización de la apariencia en EducaMadrid (II)

2.1. Comprensión del código generado

Como decíamos, vamos a partir del código CSS de la tarea inicial voluntaria (descargar el código).

Como vemos, salvo que uno esté muy acostumbrado a trabajar con CSS, resulta un código difícilmente comprensible.

Vemos que el código tiene algunos comentarios CSS (/*CSSbodyBGColor*/, por ejemplo).

Esos comentarios los utiliza el Diseñador Web para recuperar los valores introducidos.

Importante: si se edita el código generado o se eliminan esos comentarios, el Diseñador Web no será capaz de recuperar los valores anteriores, y nos veremos obligados a rellenar de nuevo todos sus campos.

No vamos a estudiar los nombres de los atributos ni valores del código generado, porque ya hemos visto cómo modificarlos y no son diferentes de los vistos en ejemplos anteriores.

Vamos a ver a qué elemento hace referencia cada uno de los selectores del código:

body.blue

.blue #wrapper y .blue #content-wrapper

Hay dos capas que albergan el contenido principal de la página ("wrapper" y "content-wrapper") La primera contiene todo; la segunda, el contenido central (el espacio en el que se colocan los recursos).

El CSS de ejemplo hace que "content-wrapper" no tenga fondo, y que "wrapper", el contenedor principal, tenga un color de fondo diferente: ese será el color de fondo que se vea.

También especificamos el ancho de la capa "wrapper": el ancho de nuestra página (965 píxeles).

.blue #banner

.blue #banner .logo a

.blue #banner .logo a {
    position:absolute;
    left:-9999px;
    overflow: hidden;
}

.blue #banner .logo a {
    display: none;
}

¿Por qué habrán ocultado ese enlace?Para hacer más fácil la incorporación de una cabecera personalizada. Por supuesto, si queremos que ese enlace esté presente, podemos hacerlo modificando el código CSS, aunque el propio Diseñador Web nos permite hacerlo marcando la opción "Mostrar el nombre de la web como texto en la cabecera" en la pestaña "Cabecera".

.blue a

.blue .titles-list,.blue .cms-content-title,.blue .cms-content .header h1, etc.

.blue #nav,.blue #nav ul

.blue #nav li:hover,.blue #nav li.sfhover,.blue #nav .current-section

.blue #nav a

.blue .portlet-title

El título de los recursos.

Modificamos su color y definimos una sombra para el texto.

Atención, porque esta sombra se define utilizando CSS3, y no todos los navegadores soportan CSS3. Si vemos nuestras páginas, por ejemplo, en una versión de Internet Explorer anterior a la 9, no se mostrará esta sombra.

.blue .portlet-icon-back