SPIP e i fogli di stile

SPIP 1.2 Quando si utilizzano le scorciatoie tipografiche negli articoli all’interno di SPIP (che permettono, per esempio, di mettere il grassetto, il corsivo, creare link, titoli di paragrafo, ecc.), SPIP produce i tag HTML necessari a questi effetti; in tal caso ogni tag è associata a una classe di stile CSS.

Per esempio,

Questo è un [link->http://www.uzine.net]

viene trasformato in codice HTML così:

Questo è un <a href="http://www.uzine.net" class="spip_out">link</a>

Il codice HTML viene quindi completato da una chiamata a uno stile CSS intitolato "spip_out". L’utente può aumentare la personalizzazione della propria interfaccia grafica definendo questo stile "spip_out" (colore diverso, sfondo colorato, font utilizzato...).

La maggior parte delle scorciatoie tipografiche di SPIP possono essere configurate con fogli di stile; alcuni sono molto utili, altri saranno riservati ai webmaster che desiderano ottenere effetti esotici...

Dov’è la definizione di questi fogli di stile?

All’atto dell’installazione di SPIP, con i modelli normalmente forniti, la definizione dei fogli di stile si trova nel file:

-  spip_style.css

È possibile modificare questi stili (è addirittura consigliato), ma è preferibile farlo nel proprio file CSS al fine di non vedere "cancellate" le proprie aggiunte quando si aggiornerà SPIP. Chiaramente, è anche possibile integrare direttamente le definizioni di stile nei propri modelli.

N.B.: il concetto di foglio di stile, o cascading style sheets, non è proprietario di SPIP, al contrario, si tratta di uno standard del Web. Esistono numerosi documenti su questo argomento; consultare per esempio la pagina del W3C a tale proposito.

Al fine di seguire la continuazione di questa spiegazione, si consiglia vivamente di aprire il file "spip_style.css" in un editor di testi.

I link ipertestuali

Le prime due definizioni permettono di modificare il comportamento di "a" e "a:hover"; molto frequenti, essi riguardano tutti i link mostrati sulla propria pagina Web (visualizzare i link senza sottolineatura, e impostare il "roll-over" dei link ipertestuali).

Successivamente vi sono tre definizioni proprie alle scorciatoie tipografiche di SPIP: "a.spip_in", "a.spip_out", "a.spip_url".

-  a.spip_in riguarda i link che puntano all’interno del proprio sito. Per esempio:

Questo è un [link interno->article1177]

-  a.spip_out riguarda i link che puntano all’esterno del proprio sito. Per esempio:

Questo è un [link esterno->http://www.uzine.net]

-  a.spip_url tratta gli indirizzi URL trasformati in link ipertestuale. Per esempio:

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

(questa scorciatoia visualizza direttamente l’URL, con un link verso questo indirizzo, così: http://www.uzine.net).

Il vantaggio principale di questi tre stili differenti è quello di permettere di distinguere graficamente i link interni al sito e quelli verso altri siti.

I titoli di paragrafo

I titoli di paragrafo, creati con la seguente scorciatoia:

{{{Un titolo di paragrafo}}}

possono essere definiti con lo stile h3.spip. Questo stile è forse uno dei più importanti, poiché permette di definire la dimensione, il font e la posizione dei titoli di paragrafo negli articoli: di sicuro si vorranno modificare in base alle scelte grafiche e tipografiche.

La definizione di default è:

h3.spip {
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-weight: bold;
	font-size: 120%;
	text-align: center;
	margin-top: 2em;
	margin-bottom: 1.5em;
	padding: 0em;
}

Notare in particolare gli attributi margin e padding che permettono di agire sulla “spaziatura prima e dopo” del titolo di paragrafo. Senza questa impostazione è molto probabile che il titolo sia troppo "attaccato" al resto del testo, oppure troppo spaziato (a seconda dei gusti...).

Codice e riquadro

Gli elementi di codice, definiti con la scorciatoia:

<code>Codice nel testo</code>

sono definiti dallo stile .spip_code. Poco utilizzato, salvo nel caso di una documentazione tecnica (come questa) in cui si devono citare brani di codice informatico, nomi di file o di cartelle...

Introdotta con SPIP 1.3, il tag

<div class="base64" title="PGRpdiBjbGFzcz0icHJlY29kZSI+PHByZSBjbGFzcz0ic3BpcF9jb2RlIHNwaXBfY29kZV9ibG9jayIgZGlyPSJsdHIiIHN0eWxlPSJ0ZXh0LWFsaWduOiBsZWZ0OyI+PGNvZGU+Li4uDQo8L2NvZGU+PC9wcmU+PC9kaXY+"></div>

permette di presentare un codice sorgente in una tabella (elemento di form) nella quale è facile copiare e incollare il testo. Il foglio di stile associato è: .spip_cadre, definito così per default:

.spip_cadre { 
	width : 100%;
	background-color: #FFFFFF; 
	padding: 5px; 
}

Le note a piè di pagina

Le note a piè di pagina, definite con la scorciatoia:

Il testo[[Una nota a piè di pagina]]

sono definiti dallo stile p.spip_note. Spesso inutile, poiché le note possono essere modificate direttamente in HTML usando il segnaposto #NOTES nei propri modelli.

Le tabelle

Le tabelle sono definite in SPIP nel modo seguente:

| {{Nome}} | {{Data di nascita}} | {{Città}} |
| Alberto | 5/10/1970 | Roma |
| Martina | 12/2/1975 | Genova |
| Massimo | 1/31/1957 | Napoli |
| Sara | 23/12/1948 | Perugia |

che dà:

I fogli di stile permettono una configurazione fine della visualizzazione di tali tabelle:

table.spip {
}

table.spip tr.row_first {
	background-color: #FCF4D0;
}

table.spip tr.row_odd {
	background-color: #C0C0C0;
}

table.spip tr.row_even {
	background-color: #F0F0F0;
}

table.spip td {
	padding: 1px;
	text-align: left;
	vertical-align: center;
}

-  table.spip permette di modificare il comportamento generale della tabella (in particolare la sua posizione, a sinistra, centrata...);

-  table.spip tr.row_first definisce il comportamento della "prima riga" della tabella (qui in giallo) (affinché la "prima riga" sia presa in considerazione gli elementi che contiene devono essere in grassetto);

-  table.spip tr.row_odd per le righe dispari;

-  table.spip tr.row_even per le righe pari;

-  table.spip td permette di modificare il comportamento delle celle di tabella.

Una delle utilità si basa sulla scelta di colori diversi per "row_odd" e "row_even", che permette presentare una tabella con le righe a colori alterni (qui grigio chiaro e grigio scuro).

Linea di separazione orizzontale

Una linea di separazione orizzontale (filetto), definita da:

----

può essere modificata con: hr.spip.

Grassetto e corsivo

Il grassetto e il corsivo sono definiti con le scorciatoie:

Il testo {{in grassetto}}, il testo {in corsivo}

Possono essere modificati con gli stili: b.spip e i.spip. Stili poco utili.

Storia: nelle versioni anteriori a [SPIP 1.8], il testo in grassetto viene dichiarato dallo stile b.spip>.

I paragrafi

I paragrafi creati da SPIP (lasciando righe vuote tra i paragrafi) possono essere modificati con lo stile: p.spip.

A priori poco utile, poiché è possibile definire direttamente il comportamento degli elementi di testo in HTML.

I form

Nell’area pubblica, sono utilizzati diversi form per il motore di ricerca interno, l’interfaccia di redazione dei messaggi dei forum, le registrazioni all’area riservata...

I fogli di stile sono: .forml, .spip_encadrer, .spip_bouton, .formrecherche.

Di default sono definiti così:

.forml { width: 100% ; background-color: #FFDDAA;}
.spip_encadrer { background-color: #EEEEEE; }
.spip_bouton { background-color: #FFCC00;}
.formrecherche { width: 100% ; background-color: #FFDDAA;}

-  .forml definisce le "caselle" di testo dei form; utile per definire la larghezza di queste caselle e il colore dello sfondo;

-  .spip_encadrer; quando un form propone diverse "parti", la separazione tra queste parti può essere definita con questo stile (per esempio, mettere una cornice ad ogni parte, creare uno spazio prima o dopo...);

-  .spip_bouton modifica l’aspetto del pulsante di invio del form;

-  .formrecherche modifica l’aspetto della casella "Ricerca" del motore di ricerca.

Le immagini e i documenti

Dalla versione [SPIP 1.8], lo stile delle immagini e dei documenti inseriti automaticamente con le scorciatoie <docXX|left> e <imgXX|right> può essere controllato con le classi:
-  .spip_documents per il box che contiene la miniatura e le informazioni del documento,
-  .spip_doc_titre che controlla la visualizzazione del titolo del documento,
-  .spip_doc_descriptif per la descrizione del documento.

Conclusioni

Si può notare come, per default, alcuni fogli di stile non siano definiti. Essi possono essere considerati come molto marginali (riservati ai webmaster che vogliono ottenere effetti grafici molto specifici).

Come regola generale, gli stili che causano modifiche grafiche spettacolari di un sito, e tuttavia semplici da definire, sono quelli che riguardano:
-  i link di tutta la pagina, a e a:hover,
-  il comportamento dei titoli di paragrafo, h3.spip,
-  i form.