Si ya conoces el lenguaje CSS (si no, lee antes este artículo: «Introducción a las hojas de estilo»), puedes modificar con facilidad la apariencia de tu sitio, incluso sin necesidad de conocer el lenguaje de los bucles y balizas de SPIP.
Crea tu hoja de estilo
En la instalación de SPIP, los esqueletos se distribuyen con varias «hojas de estilo externas» que agrupan las instrucciones que producen el aspecto gráfico del sitio. Se pueden modificar estos archivos para añadir definiciones de estilo propias, pero es preferible hacerlo en un archivo CSS propio para que las modificaciones no sean «destruidas» cuando instales una versión nueva de SPIP.
Importante: nunca jamás trabajes directamente con los archivos que se proporcionan por omisión, o de lo contrario ¡corres el riesgo de perder todas tus modificaciones con cada actualización de SPIP! Para evitar esto, haz una copia de los archivos que vayas a modificar.
1. Crea un archivo mes_styles.css (o cualquier otro nombre que quieras darle) y sitúalo en tu directorio «squelettes». Copia en este archivo las definiciones de los estilos que vayas a utilizar y modificar; aunque en el resto de este tutorial, vamos a suponer que partes de una hoja en blanco.
2. Llama a esta hoja de estilo desde el encabezado de tu esqueleto, es decir entre las etiquetas <head> del archivo HTML (junto a title y otros meta). De la siguiente manera:
<link rel="stylesheet" type="text/css" href="#CHEMIN{mes_styles.css}" />
Bastante a menudo es suficiente una sola hoja de estilo para toda la personalización gráfica de un sitio, aunque puedes declarar de este modo tantas hojas de estilo como necesites.
Histórico: A partir de SPIP 1.8.2, se utiliza:
<link rel="stylesheet" type="text/css" href="#DOSSIER_SQUELETTE/mes_styles.css" />Desde SPIP 1.9, la baliza #CHEMIN reemplaza y mejora #DOSSIER_SQUELETTE.
Respeta la «cascada»
Es importante tener presente siempre el funcionamiento «en cascada» del CSS (Cascading Style Sheets significa literalmente «hojas de estilo en cascada»): cuando varias definiciones de estilo afectan a un mismo elemento, se aplica con prioridad el estilo más cercano al elemento. El orden en el que se «leen» los estilos es importante por lo tanto.
- Hojas de estilo externas
Si utilizas varias hojas de estilo, fíjate en la importancia que tiene el ordee en que se llaman desde el encabezado de la página. Si llamas primero a mes_styles.css y después a spip_style.css: son los estilos de esta última, más cercanos, los que se aplicarán con preferencia sobre los tuyos. Por lo tanto, debes hacer lo contrario:
<link rel="stylesheet" type="text/css" href="#CHEMIN{spip_style.css}">
<link rel="stylesheet" type="text/css" href="#CHEMIN{mes_styles.css}">- Estilos definidos en el código HTML
Si no deseas tocar los archivos CSS, puedes continuar insertando, según el lugar, instrucciones gráficas directamente en el código HTML de tus esqueletos: definiendo varios estilos en el head, y/o poniendo instrucciones de estilo directamente en las etiquetas HTML de la página.
Los estilos situados directamente en las etiquetas, al estar más cercanos a los elementos afectados, tendrán preferencia sobre los definidos en el head, los cuales tienen prioridad sobre los de las hojas de estilo externas.
Estilos que tienen «class»
Y ahora ¿cómo hacemos para cambiar, por ejemplo, el aspecto de todos los intertítulos de SPIP? Muy fácil, basta con abrir el archivo mes_styles.css (o cualquier otro nombre que hayas decidido darle) en un editor de texto y añadir la siguiente línea:
h3.spip { color: red; font-size: 18px; }
Recarga la página y todos los intertítulos de SPIP aparecerán en rojo como por arte de magia; fíjate además en que el resto de etiquetas <h3> de la página, si las hay, no se ven en rojo. [1]
Expliquemos brevemente la sintaxis de esta regla de compaginación:
- h3.spip justo antes de las llaves significa que la regla siguiente sólo se aplicará a las etiquetas <h3> que tengan un atributo class igual a «spip». Fíjate bien : ni las etiquetas <h3> que no tengan este atributo, ni las etiquetas que tengan este atributo y no sean <h3>, resultan afectadas.
Si añades tus propios estilos, debes saber que el valor dado al atributo class es totalmente arbitrario. Lo único que cuenta, es que utilices exactamente el mismo nombre en el código HTML (class="pepe") y en tu hoja de estilo CSS (.pepe { ... }).
Recordamos de todas formas que no se pueden renombrar las class asociadas con código generado por SPIP (cuyas definiciones de estilo se agrupan en spip_style.css).
- Las llaves contienen la lista de las propiedades gráficas asociadas al estilo definido. Aquí vemos que el color se pone en rojo y que el juego de caracteres ha de presentarse en un tamaño de 18 pixels.
Es destacable que el resto de propiedades no definidas en esta lista mantienen el valor por defecto para la etiqueta en cuestión; en este caso, la etiqueta
producirá siempre un texto en negrita, ya que nada en el estilo dice lo contrario.
La gestión de la caché
El hecho de que tu hoja de estilo esté definida en un archivo separado (el famoso mes_styles.css) tiene una consecuencia importante. En efecto, el archivo, al contrario de tus esqueletos no es gestionado por SPIP (¡ni es necesario!). Eso significa que si modificas la hoja de estilo, no necesitas vaciar la caché de SPIP: basta con recargar la página en el navegador. Eso hace que el ajuste de la página sea aún más fácil.
Hay que recordar también que la hoja de estilo debe ser declarada en los archivos HTML, y que estos deben ser recalculados una primera vez para que la declaración sea tenida en cuenta.