Spip y las hojas de estilo

SPIP 1.2 Cuando se utilizan los atajos tipográficos en los artículos con SPIP (permitiendo por ejemplo poner en negrita, en cursiva, crear enlaces hipertexto, íntertítulos, etc.) SPIP produce las balizas HTML necesarias a tal efecto, cada una de estas balizas está asociada a una clase de estilo CSS.

Por ejemplo,

Esto es un [enlace->http://www.uzine.net]

será transformado en código HTML así:

Esto es un <a href="http://www.uzine.net" class="spip_out">enlace</a>

El código HTML se completa así llamando a un estilo CSS llamado «spip_out ». Quién lo use puede lograr por tanto la personalización de su interfaz gráfica definiendo este estilo «spip_out» (color diferente, fondo, letra utilizada, etc.).

La mayoría de los atajos tipográficos de SPIP pueden así ser parametrizados con hojas de estilo; algunos son muy útiles, otros se reservan a las webmisstres/webmasters que desean efectos exóticos...

¿Dónde se encuentra la definición de hojas de estilo?

En la instalación de SPIP con los esqueletos que se ofrecen en estándar, la definición de las hojas de estilo se encuentra en la carpeta donde está instalado SPIP, en el fichero:

-  spip_style.css

Puedes modificar los estilos (incluso es aconsejable), pero es preferible definir tu propio fichero de hojas de estilo CSS para que tus añadidos no se «pierdan» cuando instales una versión nueva de SPIP. Igualmente puedes integrar directamente las definiciones de estilos en los esqueletos.

Atención: el concepto de hoja de estilo o cascading style sheets, no es una norma propia de SPIP, se trata de un estándar de la Web. Existe numerosa documentación sobre este tema en diversos sitios; consultar por ejemplo la página del W3C sobre este asunto.

Con el fin de seguir esta explicación es altamente recomendable abrir el archivo «spip_style.css» en un editor de textos.

Los enlaces de hipertexto

Las dos primeras definiciones permiten modificar el comportamiento de « a » y « a :hover »; muy clásicas, se refieren a todos los sitios enlazados en la página Web (mostrar los enlaces sin subrayado, y regular el «sobrevuelo» de los enlaces de hipertexto).

Se encuentran a continuación tres definiciones propias de los atajos tipográficos de SPIP: «a.spip_in», «a.spip_out», «a.spip_url».

-  a.spip_in se refiere a los enlaces al interior de tu propio sitio. Por ejemplo :

Esto es un [enlace interno->article1177]

-  a.spip_out se refiere a los enlaces al exterior de tu sitio. Por ejemplo :

Esto es un [enlace externo->http://www.uzine.net]

-  a.spip_url se refiere a las direcciones URL transformadas en enlace hipertexto. Por ejemplo :

[->http://www.uzine.net]

(este atajo muestra la URL, con un enlace hipertexto hacia esta dirección, así : http://www.uzine.net).

El principal interés de estos tres estilos diferentes es el de permitir diferenciar de manera gráfica los enlaces internos del sitio y los enlaces hacia otros sitios.

Los intertítulos

Los intertítulos creados por el atajo siguiente :

{{{Un intertítulo}}}

pueden ser definidos por el estilo h3.spip. Este estilo es sin duda uno de los más útiles puesto que permite definir el tamaño, el cuerpo (police) y la posición de los intertítulos en los artículos: según tu elección gráfica y tipográfica es probable que tengas que modificarlo.

Por defecto, la definición es :

Fíjate en particular en los atributos margin y padding que permiten intervenir sobre el espaciado del intertítulo respecto a los párrafos anterior y siguiente. Sin estos reglajes, habría muchas posibilidades de que el intertítulo estuviese demasiado «pegado» al resto del texto, o bien demasiado separado (según los gustos...).

Código y tabla

Los elementos del código definidos por el atajo :

son parametrizados por el estilo .spip_code Poco utilizado, salvo en casos de documentación técnica (como esta) donde hay que poner trozos de código informático, nombres de archivos o directorios...

Introducida en SPIP 1.3, la baliza <cadre>...</cadre> permite presentar código fuente en una tabla (elemento de formulario) en la cual es fácil copiar y pegar el texto.

La hoja de estilo asociada es :.spip_cadre, definido así por omisión:

Las notas a pie de página

Las notas a pie de página, definidas por el atajo :

El texto[[Una nota de pie de página]] se parametrizan con el estilo p.spip_note. A menudo inútil, ya que las notas pueden ser modificadas directamente en HTML cuando empleas de la baliza #NOTES en tus esqueletos.

Las tablas

Las tablas son definidas en SPIP de la siguiente manera :

|{{Nombre}}|{{Fecha de nacimiento}}|{{Ciudad}}|
| María | 5/10/1970 | Buenos Aires |
| Juan Carlos | 12/2/1975 | Barcelona |
| Marta | 1/31/1957 | Roma |
| Manu | 23/12/1948 | Bilbao |

que queda como sigue:

NombreFecha de nacimientoCiudad
María 5/10/1970 Buenos Aires
Juan Carlos 12/2/1975 Barcelona
Marta 1/31/1957 Roma
Manu 23/12/1948 Bilbao

Las hojas de estilo permiten parametrizar detalladamente como se muestran tales tablas :

-  table.spip permite modificar el comportamiento general de la tabla (particularmente su posición, a la izquierda, centrada...);

-  table.spip tr.row_first define el comportamiento de la «primera línea» de la tabla, en este caso en amarillo (para que la «primera línea» se tenga en cuenta es necesario que los elementos que contiene se coloquen en negrita);

-  table.spip tr.row_odd para las líneas impares;

-  table.spip tr.row_even para las líneas pares;

-   table.spip td permite modificar el comportamiento de las celdas de la tabla.

Uno de los intereses estriba en la elección de colores diferentes para «row_odd» y «row_even», permitiendo poder hacer una presentación de colores alternados para las líneas de la tabla (en este caso gris claro y gris oscuro).

Línea de separación horizontal

Una línea de separación horizontal, definida por :

----

puede modificarse con: hr.spip.

Negrita e itálica

La negrita y la itálica son definidas por los atajos :

Texto {{en negrita}}, texto {en itálica}

Pueden ser modificadas por los estilos: strong.spip y i.spip. Estilos poco útiles.

Histórico: en les versiones anteriores a [SPIP 1.8], el texto en negrita se declaraba con el estilo b.spip>.

Los párrafos

Los párrafos creados por SPIP (dejando líneas vacías entre los párrafos) pueden ser modificados por el estilo : p.spip.

A priori, poco útil, puesto que se puede definir directamente el comportamiento de los elementos de texto en HTML.

Los formularios

En el espacio público se utilizan diferentes formularios para el motor de búsqueda interno, la interfaz de redacción de mensajes de los foros, las inscripciones en el espacio privado...

Las hojas de estilo son : .forml, .spip_encadrer, .spip_bouton, .formrecherche.

Por omisión se definen así :

-  .formldefine las «celdas» de texto de los formularios; útil para definir el tamaño de estas celdas y el color de fondo;

-  .spip_encadrer; cuando un formulario tiene diferentes «partes», la separación entre ellas puede definirse con este estilo (por ejemplo, enmarcar cada parte, crear un espacio antes o después...);

-  .spip_bouton modifica el aspecto del botón de validación del formulario;

-  .formrecherche modifica el aspecto de la celda «Buscar» del motor de búsqueda.

Las imágenes y los documentos

Desde [SPIP 1.8], el estilo de las imágenes y de los documentos insertados automáticamente con los atajos <docXX|left> y <imgXX|right> pueden controlarse con las clases:
-  .spip_documents para la caja que contiene la miniatura y la información del documento,
-  .spip_doc_titre que controla la presentación del título del documento,
-  .spip_doc_descriptif para la descripción del documento.

Conclusión

Te darás cuenta de que, por omisión, algunos estilos no están definidos en la hoja. Pueden considerarse como muy accesorios (reservados a webmistress/webmasters que quieren obtener efectos gráficos muy específicos).

Como regla general, los estilos que causan modificaciones gráficas espectaculares en un sitio, por otro lado sencillos de parametrizar, son los que se refieren a :
-  Los enlaces del conjunto de la página, a y a:hover,
-  El comportamiento de los intertítulos, h3.spip,
-  Los formularios.

Traducido por:
Montserrat Boix
Mujeres en Red por el Software Libre y no sexista

Autor o autora mboix Publicado el: Actualizado: 26/10/12

Traducciones: عربي, català, Deutsch, English, Español, français, italiano, Nederlands, українська