Si coneixeu el llenguatge CSS (sinoó llegiu primer aquest article: «Introducció als fulls d’estil»), podeu molt fàcilment modificar l’aparença del vostre lloc Web, fins i tot sense tenir necessitat de conèixer el llenguatge dels bucles i les etiquetes d’SPIP.
Creeu el vostre full d’estil
Durant la instal·lació d’SPIP, els esquelets es distribueixen amb diversos «fulls d’estil externs» que agrupen les indicacions que produeixen l’aparença gràfica del lloc Web. Podeu modificar aquests fitxers i afegir-hi les vostres pròpies definicions d’estil, però és preferible fer-ho a dins del vostre propi fitxer CSS per tal que allò que pugueu haver afegit no «s’esborri» quan instal·leu una nova versió d’SPIP.
Important: no treballeu mai directament amb els fitxers que us són lliurats per defecte, ja que correu el risc de perdre totes les vostres modificacions a cada actualització d’SPIP. Per evitar-ho, feu una còpia dels fitxers que desitgeu modificar.
1. Creeu un fitxer mes_styles.css (o qualsevol altre nom que li vulgueu donar) i guardeu-lo a dins de la vostra carpeta «squelettes»->3450. Copiareu a dins d’aquest fitxer les definicions d’estils que desitgeu utilitzar i modificar; però per seguir amb aquest tutorial considerarem que partiu d’un full en blanc.
2. Crideu aquest full d’estil a l’encapçalament del vostre esquelet, és a dir, entre les etiquetes <head> del fitxer HTML (als costats del títol i altres meta). De la següent manera:
<link rel="stylesheet" type="text/css" href="[(#CHEMIN{mes_styles.css})]" />
Sovint n’hi ha prou amb un únic full d’estil per tot el disseny gràfic d’un lloc Web, però podeu general d’aquesta manera tants fuls d’estil com us sigui necessari.
Històric: À partir d’SPIP 1.8.2, s’utilitza:
<link rel="stylesheet" type="text/css" href="#DOSSIER_SQUELETTE/mes_styles.css" />A partir d’SPIP 1.9, l’etiqueta #CHEMIN substitueix i millora #DOSSIER_SQUELETTE.
- SPIP us facilita la vida: perso.css
Per tal de descobrir una mica la personalització d’estils, podeu crear simplement un arxiu perso.css a dins de la carpeta squelettes/.
Com SPIP carrega aquest fitxer al final a la capçalera, els estils que s’hi defineixen o que s’hi redefineixen esdevindran prioritaris. L’ús d’aquest fitxer es molt pràctic per:
- modificar algun dels estils
- provar modificacions
- declarar estils personals Per desenvolupament i personalitzacions més considerables, s’aconsella que seguiu utilitzant els vostres propis fulls d’estil declarats tal i com s’indica més amunt.
Respecteu la «cascada»
És important conservar l’essència del funcionament «en cascada» del CSS (Cascading Style Sheets significa literalment «fulls d’estil en cascada») quan diverses definicions d’estil fan referència a un mateix element, s’aplica prioritàriament l’estil més proper de l’element. Per tant, l’ordre en el que els estils es «llegeixen» te la seva importància.
- Fulls d’estils externs
Si utilitzeu diversos fulls d’estil, fixeu-vos que l’ordre amb el que són cridats a l’encapçalament de la pàgina té importància. Si crideu primer mes_styles.css i a continuació spip_style.css: són els estils d’aquest darrer, més propers, els que s’aplicaran abans que els vostres. Penseu, per tant, a fer-ho a la inversa:
<link rel="stylesheet" type="text/css" href="[(#CHEMIN{spip_style.css})]">
<link rel="stylesheet" type="text/css" href="[(#CHEMIN{mes_styles.css})]">- Estils definits a dins del codi HTML
Si no voleu modificar els fitxers CSS, podeu seguir inserint, per emplaçament, indicacions gràfiques directament a dins del codi HTML dels vostres esquelets: definint alguns estils a dins del head, i/o situant indicacions d’estil directament a les etiquetes HTML de la pàgina.
Els estils situats directament a les etiquetes, com que són més propers als elements afectats, tindran prioritat per damunt d’aquells que hagin pogut ser definits en el head, i aquests sobre els dels fulls d’estil externs.
Estils que tenen «classe»
Llavors, com ho hem de fer per canviar, per exemple, l’aparença de tots els subtítols SPIP? És molt simple. Obriu el vostre fitxer mes_styles.css en un editor de text i afegiu-hi la següent línia:
h3.spip { color: red; font-size: 18px; }
Torneu a carregar la pàgina: tots els subtítols es mostren ara, com per art de màgia, de color vermell; fixeu-vos a més que els altres h3 de la vostra pàgina, si n’hi ha, no es mostren en vermell.
Expliquem breument la sintaxi d’aquesta regla de configuració:
- h3.spip just abans de les claus significa que la regla només s’aplica als <h3>
dotats d’un atribut class igual a «spip». Fixeu-vos-hi bé: ni els <h3>
que no tinguin aquest atribut, ni les etiquetes que tinguin aquest atribut però no siguin <h3>
no es veuran afectats.
Si afegiu els vostres propis estils, heu de saber que el valor donat a l’atribut class és totalment arbitrari. La única cosa que compta, és que utilitzeu el mateix nom al codi HTML (class="toto") i en el vostre fulls d’estil CSS (.toto { ... }).
No obstant, recordem que no podeu tornar a nomenar els class associats al codi generat per SPIP (les definicions dels quals es troben agrupades a spip_style.css).
- Les claus contenen la llista de propietats gràfiques associades a l’estil definit d’aquesta manera. Aquí veiem que el color ha de ser vermell i que la font que es mostri ha de ser d’una mida de 18 píxels.
Fixem-nos que totes les propietats no definides en aquesta llista guardaran el seu valor habitual per l’etiqueta considerada; en el cas que ens ocupa, l’h3 genera sempre un text en negreta, perquè res en aquesta definició no diu el contrari.
La gestió de la memòria cau
El fet que els estils estiguin definits en un fitxer separat té una conseqüència important. En efecte, aquest fitxer, al contrari del vostres esquelets, no està gestionat per SPIP (no en té cap necessitat!). Això significa que si modifiqueu un full d’estil, no haureu de buida la memòria cau d’SPIP: en tindreu prou recarregant la pàgina al vostre navegador. Això fa que el control de la configuració de la pàgina sigui encara més senzill.
Recordeu no obstant que el vostre full d’estil ha d’estar registrat en els vostres fitxers HTML, i que aquests han de tornar a ser calculats un primer cop per tal que aquest nou registre sigui tingut en compte.