SPIP 1.9.2
Los estilos definidos por SPIP
Como ya sabrás, las hojas de estilo permiten centralizar y gestionar las definiciones gráficas de forma mucho más fácil que cuando se insertan en HTML tradicional. Esto hace beneficioso su uso, aunque no indispensable: se puede seguir insertando donde se quiera códigos gráficos en el HTML mientras se sigue usando una hoja de estilo.
En SPIP, las hojas de estilo tienen una función adicional fundamental: sirven para modificar las propiedades gráficas de los elementos que no están definidos en tu HTML (el del esqueletos). En realidad, el propio SPIP genera une multitud de estilos de publicación diversos y variados. De este modo, los atajos tipográficos (enlaces de hipertexto, subtítulos, negrita, cursiva, tablas...) se transforman en código HTML/CSS para representarlos en pantalla. Lo mismo sucede con los formularios automáticos (responder a un foro, firmar una petición...) y otros más.
Para que también se pueda modificar el aspecto gráfico de estos estilos, SPIP les da un nombre específico, inmutable. Por ejemplo, los {{{subtítulos}}} no generan una simple etiqueta <h3>, sino una etiqueta <h3 class="spip">. ¿Qué es lo interesante? Que las etiquetas llevan un nombre específico en el atributo class: este nombre define a que «clase» pertenece, es decir, un conjunto de elementos HTML que heredan las mismas propiedades gráficas definidas en la hoja de estilo.
Y ahora ¿cómo hacemos para cambiar el aspecto de todos los subtí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 las siguientes líneas:
h3.spip {
color: red;
font-size: 18px;
}Recarga la página y todos los subtítulos SPIP apareceran 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 son publicadas en rojo... Si no aparece nada de esto, comprueba que está declarada la hoja de estilo en el esqueleto (en la etiqueta <head> como se explicaba en el artículo anterior), y recarga la página...
Expliquemos brevemente la sintaxis de esta regla de publicació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.
- Las llaves contienen la lista de las propiedades gráficas asociadas al estilo definido. 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 <h3> producirá siempre un texto en negrita, ya que nada en el estilo dice lo contrario.
- Cada una de las propiedades listadas entre llaves termina con un punto y coma. Estan formadas por un nombre (definido por el lenguaje CSS), seguido por dos puntos y por uno o más valores. Aquí vemos que el color está puesto en rojo y que la fuente de caracteres debe mostrarse con una altura de 18 pixels.
Importante: si añades tus propios estilos, debes saber que el valor dado al atributo
classes totalmente arbitrario. Para el navegador es indiferente que este atributo se llamespip,menu-seccionesopatin321. Lo único que hay que tener en cuenta es que el valor corresponda con la regla enunciada en la hoja de estilo.
Como puedes ver, el lenguaje CSS es muy sencillo, y usa el mismo tipo de vocabulario que los atributos HTML clásicos. Segun vayas progresando en el lenguaje de las hojas de estilo, seguirás encontrando nociones más o menos heredadas del HTML tradicional (border, width, height...).
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 le 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: la línea <link rel="stylesheet" type="text/css" href="mes_styles.css"> debe encontrarse «en la caché» para que el navegador pueda contar con ella.
Después de esta presentación general y el primer ejemplo, veamos más en detalle cono se pueden utilizar los CSS para las balizas SPIP.