Skinning for Dummies [lezione 2]

La seconda parte su cui ci concentreremo adesso è quella relativa alla modifica delle sezioni del forum. I selettori che troverete in questa sezione di CSS servono a modificare queste parti della skin:



.mainbg: la funzione del mainbg è quella di fare da sfondo ultimo alle nostre sezioni. Solitamente nelle skin complete viene visualizzato come il bordo che racchiude e divide le varie parti come .aa etc.
.title: è la parte dove vengono visualizzate le informazioni fisse delle sezioni che servono ad identificarne le parti. Sto parlando delle scritte "Forum, Discussioni, Risposte, Ultimo Messaggio".
.ww, .xx, .yy, .zz, .aa, .bb, .cc: si tratta rspettivamente dei blocchi che racchiudono le diverse parti delle sezioni. .ww non fa però propriamente parte dei codici di modifica delle sezioni ma viene comunque accumunato ad essi per comodità e rappresenta, alternato con .aa, i messaggi della tagboard. Il selettore .cc non lo si trova in homepage ma all'interno della sezione.
.foot: parte simile al title, ma puramente decorativa. E possibile rimuoverla senza causare alcun problema di visualizzazione alla skin (.foot {display_none})
.web: (suddivisibile in .web, .web a:link, web a:active, .web a:visited e .web a:hover) Rappresenta i nomi delle sezioni del vostro forum.
.desc : (suddivisibile in .desc, .desc a:link, .desc a:active, .desc a:visited, .desc a:hover) Rappresenta la descrizione della vostra sezione.



Per modificare i selettori spiegati sopra ci serve conoscere davvero poche nozioni di base:
- background-color: rappresenta il colore di sfondo che vogliamo che il nostro abbia. Può anche essere sostituito con un'immagine di sfondo.
- font-weight: serve a definire lo spessore delle lettere di un testo. Le opzioni disponibili sono bold, bolder, light, lighter, inherit, normal. La variabile più utilizzata è bold, che serve a trasformare il testo in grassetto. In caso si voglia il testo con le impostazioni normali si può tranquillamente procedere alla rimozione di questa proprietà.
- color: è il colore del testo del nostro selettore. Si scrive unendo un cancelletto ad un colore esadecimale (esempio: #FFFFFF)
- border: stabilisce la presenza o l'assenza dei bordi attorno alla parte visibile relativa al nostro selettore. Solitamente la variabile viene formattata inserendo la dimensione desiderata del bordo, il tipo di bordo che si desidera e il colore di questo (1px solid #FFFFFF). Scrivendo solamente .border il codice verrà interpretato per tutti e quattro i bordi del selettore, nel caso volessimo invece solamente uno o due lati con i bordi dovremmo specificare quali utilizzando .border_top, .border_bottom, .border_left, .border_right. Vi rimando ad un breve tutorial che vi spiegherà i diversi tipi di bordi esistenti: Border Style.
- font-size: rappresenta la dimensione del testo stabilita dal nostro selettore. Le misure più utilizzate sono pixel (px) e punti (pt).
- display: none viene invece utilizzato quando si vuole nascondere o eliminare un elemento.



Ci occuperemo ora del Menù Utente. Innanzi tutto si tratta di quella barra sotto il logo dove sono presenti i dati personali dell'Utenza (Ovvero nickname, opzioni, esci, messaggi privati) e i form di ricerca. E' compreso nel blocco di codici del Menù anche un selettore riguardante l'header, ovvero quella parte che fa da sfondo e, nel caso sia impostato, da bordo al logo della Skin.



.header: come detto prima è il selettore che modifica lo sfondo e i bordi del logo. Se avete intenzione di utilizzare un logo centrato vi consiglio di eliminare l'immagine di background e di inserire come colore di sfondo lo stesso utilizzato per lo sfondo della skin e di settare i bordi a zero pixel.
.menu: in questo selettore andranno inserite tutte le modifiche riguardanti l'aspetto del menù utente, dall'immagine (o colore) di background al colore e alle dimensioni del testo.
.menu a:link, .menu a:visited, .menu a:active : selettore facoltativo. Serve a differenziare i link del menù da quelli del resto del forum. Sono specificati i link normali (a:link) i link attivi (a: active) e i link già visitati in precedenza (a:visited)
.menu a:hover: selettore facoltativo. Serve a differenziare il link del menù al passaggio del mouse da quelli del resto del forum.



L'ultima cosa che vi spiegherò sarà come fare il menù utente centrato. Come qui allo Skin Factory. Prima di tutto dovete capire che questo menù per visualizzarsi correttamente con Internet Explorer richiede obbligatoriamente che il logo sia impostato centrale. Con gli altri browser si vede perfettamente con qualsiasi impostazione diate al logo. Una volta specificato questo per ottenere il menù centrato inserite l'immagine di sfondo che volete, sistemate il colore, l'altezza e la ripetizione dello sfondo e il gioco è fatto!