• Colpo d'occhio e risparmio di spazio!
  Grazie a questa disposizione innovativa, è possibile ottimizzare lo spazio a disposizione, mettendo in risalto solo le parti salienti di una sezione!


• Disposizione orizzontale delle sezioni!
  Il codice permette di affiancare orizzontalmente le sezioni che si vogliono trasformare in "rubriche", molto utile soprattutto nel Quirk Layout, dove la struttura tabellare permette poche modifiche.


• Contenuto personalizzabile!
  Dovendo agire, di fatto, sulla descrizione di una sezione che farà da contenitore, avrete piena libertà sugli elementi che dovrete inserire (icona della sezione, titolo, descrizione, ...). E' possibile inserire anche un iframe con le ultime discussioni!

Anzitutto, occorre scegliere le sezioni che faranno da "rubriche". Nel nostro esempio, saranno "Il peccato, ma non il peccatore", "Consigli per il tuo forum" e "I consigli di Zio Ragy".
Per racchiuderle in questo box di sezione, è necessario creare una sezione madre, ed impostare le sezioni di cui sopra come SOTTOSEZIONI di questa sezione madre.
Andiamo quindi a crearla in Amministrazione --> Sito Web --> Gestione Sezioni.



La sezione che fungerà da contenitore è la numero 5. Le altre tre sezioni sono impostate come sottosezioni (come è visibile in figura). Premurarsi di NASCONDERE l'elenco di sottosezioni, e di spuntare il checkbox della sezione contenitore.
Il titolo del blocco sezione sarà quello visibile in homepage (in questo caso, è il seguente:
Nella DESCRIZIONE della sezione contenitore (in questo caso, la 5), inserire questo:

In Grafica --> Colori e Stili, inserire questo:



Occupiamoci di personalizzare il CODICE HTML. Prendiamo in esame il primo riquadro (Il peccato, ma non il peccatore).

Al posto di ID_SEZIONE andrà inserito l'ID della sezione corrispondente.
L'immagine può essere personalizzata a vostro piacimento, semplicemente sostituendo il link.
Per personalizzare il titolo del riquadrino, vi basterà agire sul testo all'interno del tag h3, mentre per la descrizione su quello all'interno del tag h4.
ATTENZIONE: Andando a capo nel codice, si creerà automaticamente un < br > quando salvate le modifiche. Se non volete spazi indesiderati, è necessario non andare a capo.

Consideriamo adesso il CODICE CSS.
Anzitutto, occorre sostituire #fc000000 con l'ID del BLOCCO SEZIONE, ossia della sezione che abbiamo creato perchè funzioni da contenitore. L'ID in questione altro non è che quello della sezione stessa.
L'immagine mostra, mediante lo strumento Analizza elemento (Click destro --> Analizza Elemento, o Ispeziona Elemento), come è possibile individuare l'ID voluto (la parte evidenziata in blu è quella di cui cerchiamo l'ID).

Il nostro ID è 64367867. Quindi, al posto di #fc000000, nel CSS scriveremo #fc64367867.

Consente di personalizzare lo stile della barra del titolo del box sezione.

Consente di personalizzare lo stile del TITOLO del blox sezione.

Consente di personalizzare lo sfondo del box sezione. Si consiglia di modificare esclusivamente il background.

Modificare il width a seconda di quanti riquadri volete su una riga. Se dovesse capitare che vadano a capo, ridurre il width.

La prima stringa personalizza il TITOLO dei vari riquadri, la seconda la DESCRIZIONE.


Qualora si volessero inserire più righe all'interno del box sezione, basterà copiare, DOPO l'ultimo div del codice HTML indicato in precedenza, lo stesso codice HTML, avendo cura di personalizzarlo adeguatamente (è possibile, ad esempio, sostituire l'iframe delle ultime discussioni con un ulteriore riquadro).



UPDATE 23.06.2014: La guida è stata interamente riscritta, ed il codice ottimizzato ed aggiornato.