Note di rilascio per la versione 2.0.4: il tag body in HTML ora ha l'attributo class, quindi è possibile dare stili diversi alle sezioni del sito. Il prefisso è "section-" seguito dallo Short Name (nome breve, o URL parziale) dell'oggetto nella cartella radice. È possibile personalizzare questa funzione se si preferisce che venga applicata a tutti i livelli anziché solo alla radice, oppure che fornisca classi diverse.

Questo si applica solo alle cartelle subito sotto la cartella radice, ma è possibile personalizzarlo modificando lo script getSectionFromURL. Inoltre, il contenuto della guida non si applica ad aree del sito come la Mappa e la Ricerca, che non vengono create con un template di pagina.

Ecco come funziona:

Nel template principale si trova uno script che genera al volo una classe per ogni sezione del sito. Questo script si chiama "getSectionFromURL".

Con l'esempio seguente capiremo come possiamo agire.

Se abbiamo una sezione del nostro sito chiamata, ad esempio, "Prodotti", e guardiamo il codice sorgente di una delle pagine di questa sezione, vedremo che Plone ha creato una classe nel tag body chiamata “section-prodotti”. Plone utilizza lo shortname della cartella, che è anche il nome del suo oggetto sul database.

Nei nostri fogli di stile, aggiungiamo ad ogni stile che vogliamo rendere differente per la sezione questo prefisso: .section-nome_della_cartella, sostituendo a "nome_della_cartella" l'id o short name della cartella. Per esempio, questo codice cambia il colore dello sfondo della sezione "Prodotti" del nostro sito, facendolo diventare verde:

body.section-prodotti { background-color: green; }

Questo codice invece inserisce un'immagine di sfondo:

body.section-prodotti { background-image: url(gradient2.png); }

In questo caso per andare a modificare i fogli di stile in Plone, dobbiamo accedere alla ZMI, cliccare su portal_skins, poi su plone_styles e poi su PloneCustom.css. Qui, cliccando su Customize, si può personalizzare il nostro CSS, inserendo un parametro per una particolare sezione del sito.

Un esempio pratico:

Abbiamo applicato questi semplici passi al sito Plone di prova della nostra area demo.

• Abbiamo aggiunto nel foglio di stile a cascata una parte di codice per far sì che la sezione "News" avesse uno sfondo grigio:

body.section-news { background-color: #b3b3b3; }

Ed ecco il risultato:

• Abbiamo poi agito sulla sezione "Events", aggiungendo nel foglio di stile una parte di codice per rendere lo sfondo rosso:

  body.section-events { background-color: #ff6f6f; }

  Ed ecco come apparirà la sezione "Events":

  

Questo è solo un semplicissimo esempio di partenza, ma grazie a queste semplici operazioni si possono creare stili ed effetti interessanti per il proprio sito Plone, disegnando uno stile diverso per ogni sezione e a tema con i suoi contenuti. Buon divertimento!

Questo documento è stato realizzato da:

• Federico Prato
• Alice Narduzzo

Fonti e contributi:

Questo how-to è una libera traduzione di parte del testo originale Create a different look and feel for different sections of your web site.