Skinning School: 5 Lezione - Mback e Title

Mback e Title

Con questa quinta lezione introdurrò (finalmente) il blocco sezioni. Forse è questa la parte più interessante o che comunque quella che risalta subito all’occhio quando ci troviamo di fronte ad un forum. Dividerò questa lezione in due parti: Barra e title. Iniziamo a vedere come codificare la nostra barra sezioni (mback) e successivamente il title (la barra dove troviamo scritto “Forum, Ultimo Messaggio e Statistiche”).

MBACK
Partiamo come sempre andando ad identificare il selettore, in questo caso sarà “.mback”; la parte relativa alla barra sarà quindi questa:

SPOILER (clicca per visualizzare)

Iniziamo il montaggio eliminando innanzitutto i selettori .minus e .plus che riguardano il “+” e il “-“ che troviamo nella parte destra della barra (solitamente anche in tutte le altre skin). Costruiamo ora la nostra barra andando a ritagliare la parte interessata, come in questo caso:

Questi saranno I nostri nuovi parametri. Andando ad analizzare meglio vediamo che:
Nell’mback sono state cancellate tutte le dichiarazioni, tranne quella inerente all’altezza. In questo caso l’altezza deve corrispondere esattamente a quella della nostra immagine ritagliata con photoshop.
Successivamente nell’mback_center, ovvero la parte centrale della barra, abbiamo inserito la nostra immagine ritagliata come background e ripetuta orizzontalmente (repeat-x). Infine è stato aggiunto il bordino azzurro.
Stessa cosa è stata fatta per i lati della nostra barra, ovvero è stata inserita la nostra immagine di sfondo a mback_right e mback_left. In questo caso senza ripetizione e sistemando i bordi con il radius a seconda della specularità del bordo. In questi ultimi tre selettori citati non ci sarà bisogno inserire l’height poiché la dichiarazione è stata già posta in .mback, di conseguenza varrà anche per le altre.
N.B. : Questa divisione in tre parti della barra sezione è importante poiché migliora l’adattamento della skin ad ogni tipo di larghezza; inoltre vi voglio ricordare che chiunque di voi voglia fare il lato sinistro o destro diverso, dovrà semplicemente cambiare l’immagine e adattare la relativa larghezza.
Importante è la sistemazione del titolo della barra. In questo caso il selettore non riguarda l’mback ma bensì l’.mtitle, che si differenzia dal title.
Nella nostra preview l’mitlte è spostato sulla sinistra ed è all’interno di un box. Potevamo inserire il box già nel ritaglio della parte sinistra della barra, ma sarebbe stato errato in quanto i vari titoli in quel caso non si sarebbero adattati al box fuoriuscendo o non centrandosi alla perfezione; è per questo che inseriamo il box, che in questo caso è il background dell’mtitle, all’interno di questo selettore:

.mtitle {float: left; padding: 5px; border-radius: 5px; font: 12px segoe ui, verdana, arial; font-weight: bold; color: #37A1D2; border-bottom: 1px solid rgba(255, 255, 255, 0.17); background: rgba(0, 0, 0, 0.76) !important}

Il float ci permetterà di posizionare il title senza la conseguenza indesiderate per lo sfondo. A questo punto finiamo di sistemare il font e il background aggiungendo il bordo che darà spessore (sono sicuro che riguardo al font, arrivati a questo punto delle lezioni, non avrete problemi a modificarlo).

Se avete qualche domanda potete scrivere un commento e appena possibile vi risponderò. Per questa quinta lezione è tutto, vi aspetto alla prossima con la conclusione del blocco sezione. Vi auguro inoltre una buona Pasqua