Personalización de la plantilla del blog

Recientemente se ha añadido a todos los blogs de Multiblog la posibilidad de que cada docente que administra un blog pueda modificar el aspecto visual de su plantilla. Esto significa en la práctica que a partir de ahora será posible modificar los colores, redefinir la tipografía, transformar el diseño y el aspecto de las diferentes zonas del blog (tales como la cabecera, el pie de página y la sección de contenido de las entradas y páginas), cambiar la posición y anchura de las columnas, etc.

Todos estos cambios exigen un conocimiento (más o menos detallado, según la complejidad de los cambios), de la edición web, y en concreto de la edición de las hojas de estilo en cascada (CSS), que son las que en última instancia controlan todos los aspectos visuales de una página web. Por tanto, para aprovechar la potencia de esta nueva funcionalidad, conviene conocer cómo se estructura una hoja CSS y cuáles son sus propiedades y atributos. Como esta funcionalidad se ha logrado gracias a la instalación del mismo plugin que la hace posible en WordPress.com, aconsejamos a todos los docentes interesados en ella que consulten la siguiente documentación: la página Editing CSS, que incluye un tutorial bastante completo, y la sección titulada CSS Customization, en los foros de dicho servicio, donde figuran las dudas más habituales sobre esta funcionalidad.

En todo caso, conviene saber que,  para realizar las modificaciones en la hoja de estilos de un tema, hay que ir al menú Apariencia > Editar CSS, el cual proporciona acceso a un interfaz desde el que se pueden definir nuevos estilos o añadir otros a los ya existentes. En concreto, existen dos posibilidades:

• Añadir los estilos personalizados  a la hoja de estilos del tema o plantilla que se está utilizando. Si se escoge esta alternativa, los estilos que se definan se añadirán a los que ya forman parte del tema. Esta es la opción más aconsejable en la mayoría de las circunstancias.
• Comenzar desde cero y utilizar los estilos personalizados. Si se escoge la segunda alternativa, la hoja de estilos del tema quedará completamente desactivada, y sólo funcionarán los estilos definidos por el usuario. Esta opción es poco aconsejable, salvo para aquellos docentes que tengan mucha experiencia en la edición de hojas de estilo CSS.

En cualquiera de ambos casos, los estilos personalizados tienen preferencia sobre los del tema, por lo que cualquier propiedad o atributo que haya sido definido por el usuario modificará los existentes. Por ejemplo, si el usuario decide en sus estilos personalizados que el párrafo de primer nivel (es decir, la etiqueta <h1>, ha de ir en color negro y con un tamaño de letra de 32px), tal decisión se impondrá a las propiedades y atributos del mismo tipo que estén definidas en la plantilla.

Los docentes no deben preocuparse por el resultado de los posibles errores que puedan cometer al editar sus estilos; en efecto, la personalización de una plantilla sólo afecta al blog donde se haya llevado a cabo, de modo que las plantillas originales quedan completamente a salvo de  posibles experimentos fallidos. Por tanto, es perfectamente posible que muchos blogs utilicen la misma plantilla y que cada uno la personalice a su voluntad, sin afectar a los demás. Por otra parte, en cualquier  momento se pueden eliminar los cambios realizados y volver al tema original, para lo cual basta con dejar en blanco la pantalla del editor CSS.

A continuación veremos, con una serie de capturas de pantalla, dos ejemplos muy simples de edición de estilos en dos de los temas instalados en la plataforma Multiblog, los denominados  Twenty Ten y dkret3.

1. Cambio de color de enlaces en el tema Twenty Ten.

Como ocurre con la gran mayoría de temas de WordPress, los estilos de este tema se controlan desde el fichero styles.css. Esta circunstancia se puede comprobar desde el propio navegador, haciendo clic con el botón derecho y seleccionando la opción Ver código fuente o Ver código fuente de la página. Pues bien, desde el menú Apariencia > Editar CSS se puede hacer clic sobre el enlace incluido en la la opción “Añade estos estilos a la hoja de estilos del tema XXX (ver hoja de estilos original)”, lo cual nos permitirá abrir una copia del citado fichero styles.css. En las líneas 313-322 del citado fichero veremos un código como el que aparece en la figura 1:

a:link {
color: #0066cc;
}
a:visited {
color: #743399;
}
a:active,
a:hover {
color: #ff4b33;
}

Bastar entonces con editar este código y sustituir los valores hexadecimales que definen el color en los diversos estados de los enlaces (“link”, “visited”, “active” y “hover”) por los siguientes:

a:link {
color: #33FF00;
}
a:visited {
color: #33FF99;
}
a:active,
a:hover {
color: #660000;
}

Figura 1 - Tema TwentyTen con los estilos originales (enlaces en azul)

Figura 1 - Tema TwentyTen con los estilos modificados (enlaces en verde)

2. Cambio de alineación del título y el lema del blog en el tema dkret3.

El tema dkret3 utiliza no una, sino varias hojas de estilo diferentes. Como desde la mayoría de los navegadores no se puede saber exactamente cuál es el fichero CSS que controla la alineación del título y el lema del blog, resulta necesario utilizar herramientas especiales, como por ejemplo la extensión Firebug para Firefox, o bien la función de Inspeccionar elemento, de la cual se dispone haciendo clic sobre un elemento de la página en navegadores como Safari o Google Chrome.

Una vez utilizadas estas herramientas, podemos averiguar que los estilos que controlan el título y el lema del blog se definen en las líneas 437-451 del fichero screen.css, y tienen el siguiente contenido:

#site-title {
font-size: 36px;
margin: 0;
padding: 18px 80px 0;
text-align: right;
}

#site-description {
color: #474747;
font-size: 16px;
margin: 0;
padding: 1px 80px 1px;
}

Como sólo nos interesa cambiar los atributos de alineación y “padding” (el espacio interior entre un elemento y la caja que le rodea), podemos mantener la mayoría de los atributos, y añadir sólo el código necesario:

#site-title {
padding: 18px 0px 0;
text-align: left;
}

#site-description {
padding: 1px 0px 1px;
text-align: left;
}

Como se ve, hemos modificado la alineación, cambiando “right” por “left” y el “padding”; en este segundo caso, hemos sustituido el valor 80px, que define la distancia entre el elemento y la caja que lo rodea, por 0px, con lo que el título y la descripción quedan perfectamente alineados por su izquierda. El efecto resultante se ve muy claro comparando las capturas de pantalla de las figuras 3 y 4.

Figura 3 - El tema dkret3, con el título y la descripción alineados a la derecha

Figura 4 - El tema dkret3, con el título y la descripción alineados a la izquierda

Para más detalles sobre el proceso de edición de los estilos personalizados, conviene consultar el tutorial Editing CSS (en inglés). Es conveniente tener en cuenta que, a diferencia de lo que se indica en dicho tutorial, la plataforma Multiblog no guarda el historial de revisiones de las hojas de estilo CSS, pues dicha funcionalidad está desactivada por defecto para todos los blogs. Por otra parte, sólo es posible definir para cada blog un único juego de estilos, que en cada caso afectará únicamente al tema que esté activo en el blog. Esto significa que, si se personaliza un tema y luego se cambia a otro, los estilos definidos para el primero afectarán al segundo, con resultados imprevisibles.