La barra a cornice nello Standard Layout

Come tutti sapete, ad un selettore può essere dato uno sfondo tramite il noto attributo "background". Più in generale, quello che scriviamo per assegnare uno sfondo ad una classe o ad un id è questo:

Questo codice è il riassunto delle principali proprietà del background, riunisce cioè:
- background-image;
- background-repeat;
- background-position;
- background-color.
Come può immaginare chi non ha mai visto questo "codice-riassunto", a "RIPETIZIONE" vanno sostituiti i valori "repeat", "no-repeat", "repeat-x" o "repeat-y". A "POSIZIONE_SFONDO" i vari posizionamenti che si vogliono dare all'immagine di sfondo ("center", "bottom", "left", "left bottom" e così via). Al posto di "COLORE_SFONDO", infine, si sostituisce il colore di sfondo che deve stare al di sotto dell'immagine (e può essere espresso sia in esadecimale, ovvero il tradizionale #valore, sia a parole per pochi colori, sia in rgb).

Fatto questo piccolo e veloce riassunto sull'attributo "background", passiamo ora a vedere come si utilizza il multibackground, cioè la funzione che permette di assegnare ad uno stesso selettore più di uno sfondo.
Per fare ciò, si utilizza un codice molto più semplice di quanto si possa pensare:

Come vedete, a quell'inventato "selettore" io ho assegnato tre sfondi diversi, identificati dai numeri 1, 2 e 3 dopo i vari attributi.
In generale, quando si vuole assegnare più di uno sfondo ad un selettore, si utilizza sempre "background", ma una volta scritto tutto ciò che riguarda il primo sfondo si scrive una virgola, uno spazio e poi si procede con un altro sfondo. Quindi, ogni sfondo è separato dall'altro da una virgola e da uno spazio.
Ai vari sfondi potete assegnare tutti i diversi valori che volete. Mi spiego meglio con un esempio:


Quando usate la proprietà multibackground è importante che vi ricordiate qual è l'importanza che viene data ai vari sfondi, ovvero in quale ordine vengono visualizzati. Quello che si troverà sopra a tutti gli altri è quello che scrivere dopo i due punti, il secondo scritto sarà subito sotto e così via, fino ad arrivare all'ultimo sfondo scritto che si troverà sotto a tutti gli altri.
Proprio per questo, di solito non si mette mai il colore di sfondo ai primi sfondi, ma solo all'ultimo. Se infatti venisse assegnato un colore di sfondo al primo sfondo, tale colore riempirebbe tutto lo spazio, coprendo tutte le altre immagini sotto.
In quale ordine inserire gli sfondi? Poiché gli sfondi scritti per primi vanno a coprire quelli scritti dopo, qualora voi voleste uno sfondo di base che si ripete e sopra di esso altri sfondi che non si ripetono, è evidente che dovreste scrivere prima gli sfondi che non si ripetono e, per ultimo, lo "sfondo-base".



Ora che abbiamo visto come funziona la proprietà multibackground possiamo applicarla per ricreare anche sul nuovo layout la barra a cornice, tipica del vecchio.
Per ottenere l'effetto desiderato avete la possibilità di applicare il "multibackground" a due classi, e ognuna comporterà un utilizzo diverso della proprietà: .skin_tbl e .mainbg.



Per utilizzare il multibackground su questa funzione vi basterà scrivere:

Così facendo, tuttavia, il multibackground verrà applicato a tutti gli .skin_tbl della skin. Per evitare ciò, vi basterà anteporre a .skin_tbl la classe o l'id cui volete limitare l'effetto. Per sempio, se volete mettere la barra a cornice solo nella home, vi basterà scrivere:

Se volete metterla solo al topic vi basterà mettere .topic .skin_tbl e così via. Per vedere quali classi o id contengono cosa, vi basterà fare riferimento a questa nostra guida sul Nuovo Layout.
Quando usate .skin_tbl per creare la barra a cornice dovrete rendere invisibile/trasparente la barra principale, ovvero .mback, .mback_center, .mback_left e .mback_right.
Skin_tbl "comprende" infatti tutto il blocco sezioni, per cui potrete mettere tra i suoi sfondi anche la barra.
Nel forum di esempio (trovate il link in fondo all'articolo) il primo blocco sezioni ha una barra a cornice realizzata con .skin_tbl. Ho tolto qualsiasi sfondo alla barra principale, ho messo molteplici sfondi a .skin_tbl e, poi, gli ho anche messo un padding per far sì che tali sfondi si vedessero.
Mi spiego meglio: skin_tbl contiene preciso preciso tutto il blocco sezioni, quindi se impostate semplicemente vari sfondi, questi saranno coperti dalle sezioni. Per questo va usato il padding che "allarga" lo .skin_tbl, "spingendo" ciò che contiene verso l'interno.



L'applicazione risulta sostanzialmente uguale a quella di .skin_tbl, ma va coordinata con la barra (.mback). Come potete vedere dalla guida, infatti, .mainbg contiene solo le sezioni e non la parte superiore, ovvero proprio quella della barra.
Per questo a .mainbg, oltre al padding per lo stesso motivo di sopra, dovrete applicare vari sfondi esclusi quelli superiori, che potrete invece mettere direttamente grazie a .mback_center, .mback_right e .mback_left.



Quali valori del padding dovrete utilizzare? La proprietà padding si esprime in questo modo:

Come potete intuire, la proprietà padding va in senso orario, partendo dal padding applicato in alto. Qualora il valore del padding sia identico per tutti e quattro i lati, vi basterà scrivere:

Nel caso invece di un valore uguale per "alto"-"basso" e per i due lati, potrete scrivere, utilizzando solo due valori:

Ora, come potete adattare questa proprietà a .mainbg o a .skin_tbl? Osservate le dimensioni delle vostre immagini:
- guardate i valori di altezza delle immagini in alto e in basso (ovvero dei vecchi .mback e .msub) e impostateli rispettivamente come padding-top e padding-bottom;
- guardate il valore di larghezza delle immagini laterali (i vecchi mleft e mright) e impostatelo come padding-left e padding-right.
Ora, questo è di solito valido in generale, potrebbe capitare che dobbiate sistemare con altri valori per far tornare le cose come volete.



Cosa c'è di differente rispetto all'applicazione sul vecchio layout? Che .mleft_top, .mright_top, .mleft_bottom e .mright_bottom non vi serviranno più. Per intenderci, quando andate a tagliare le varie immagini che metterete come sfondi, dovrete includere quello che un tempo era .mleft_top in .mback_left, .mright_top in .mback_right, .mleft_bottom in .msub_left (che ovviamente non è tale, ma per farvi capire a quale immagine mi riferisco) e .mright_bottom in .msub_right.
In più, nel caso di una cornice con angoli arrotondati, dovrete attribuire "border-radius" a .mainbg o a .skin_tbl. Perché? Per esempio, quello che rappresenta .msub_center, che metterete sotto a quelli che stanno per .msub_left e .msub_right, si ripeterà continuamente sotto gli altri due. Nel vecchio layout potevate impostare delle larghezze per la parte destra e sinistra, cosa che adesso non potete fare perché gli sfondi fanno tutti parte di uno stesso selettore. Di conseguenza, dovete mettere degli angoli arrotondati a quello stesso selettore per "nascondere" le ripetizioni che non desiderate.



Quali sono le differenze tra i due metodi?
Nella maggior parte dei casi, non ci sono differenze. Facendo riferimento al forum di prova, non ci sono sostanziali differenze nel topic, nella risposta rapida, nell'interno sezione (così come non ci sarebbero nella risposta-non-rapida, che non ho realizzato perché identica agli altri casi).
Le differenze si presentano in quegli elementi che si possono chiudere e aprire, ovvero i blocchi sezioni e la tagboard. Cosa cambia in questi casi? Osservate voi stessi.
Quando chiudete il blocco sezioni (o la tagboard) nel metodo realizzato con .skin_tbl la barra rimane interamente visibile; al contrario, nel metodo .mainbg, rimane visibile solo la parte superiore della barra, ovvero .mback, perché .mainbg viene "chiuso" con le sezioni.
Apparentemente, quindi, risulta migliore il metodo che utilizza .skin_tbl.
Eppure esso presenta un difetto da cui invece l'altro è esente: quando impostate i padding dovete fare più attenzione, perché quando andrete a spostare l'.mtitle con dei padding (solo -top o -bottom) questi influenzeranno la posizione delle sezioni all'interno della barra, quindi dovrete fare più prove con vari valori fino a che non otterrete l'effetto desiderato.
Osservate adesso la barra chiusa del blocco realizzato con .mainbg. Come potete vedere ho arrotondato gli angoli inferiori della barra (so che non è il massimo della bellezza, ma la barra è presa da una skin che avevo realizzato sul vecchio layout), questa è una cosa che potete tranquillamente fare utilizzando i selettori:




Il metodo .skin_tbl, nel messenger, rimane invariato. L'unica differenza è che dovrete rendere trasparente non più mback ma .sunbar (ed in particolare .sunbar.top).
Il metodo con .mainbg risulta invece leggermente diverso. Non c'è più una barra (mback) da modificare. Avete solo una classe (sunbar) che non ha una parte sinistra e una parte destra, dovrete quindi dividerla in tre parti grazie, di nuovo, alla poprietà multibackground. In più, tutta la restante cornice non dovrà più essere di .mainbg (che qui nel messenger è .cp .mainbg), ma di .list (quindi .cp .list).



Sebbene questo sia un tutorial finalizzato solo a spiegare, che non presenta alcun nuovo codice o script, vi saremmo grati se, qualora lo utilizzaste, ci ringraziaste nei vostri credits.



Come vi dicevo sopra, non è una skin realizzata in tutto e per tutto. Ho solo montato la barra a cornice. Eccovi il link:
http://demomultibackground.skin.forumfree.it/