[Prima Lezione] Corso di Skin
Impostiamo la Barra e Iniziamo la Nostra Skin.
Indice:
- Punto Primo: Cosa dobbiamo sapere per fare una skin?
- Punto Secondo: Preparativi Prima di Iniziare.
- Punto Terzo: La Barra.
- Punto Quarto: Funzione del .mtitle.
- Punto Quinto:La Barra Sondaggio.
- Punto Sesto:Suggerimento.
1 -
Cosa dobbiamo sapere per fare una skin?Dobbiamo avere una minima conoscenza del css e una discreta capacità grafica con qualsiasi programma grafico ( Photoshop, Gimp, Pro Paint, Ect..)
2-
Preparativi Prima di Iniziare:Realizzare una barra per la Skin, potete seguire numerosi Tutorial, ma io vi consiglio quello che abbiamo nel forum, è un buon tutorial per iniziare:
Tutorial Barra. Dopo aver Realizzato la Barra, Create un Nuovo forum di Prova e impostate la Icg Station come skin di base o l'amnesiac se volete creare una skin scura.
Prima di Iniziare dovete tener presente che la vostra barra sarà formata da Tre pezzi( chiamati anche .mback_left, .mback_right, .mback_center), Un pezzo per il lato destro,sinistro(basta ruotare l'immagine) e centrale che sarà l'immagine che si ripeterà all'interno.
Assicuratevi sempre che l'altezza dei pezzi sia sempre uguale, di non lasciare pixel trasparenti ai lati mentre ritagliate le barre e di stare attenti nel ritagliare il pezzo centrale per evitare una erronea ripetizione dell'immagine.
Ma come possiamo vedere in qualsiasi skin abbiamo anche una barra inferiore detta .msub, che si divide anch'essa in tre pezzi: .msub_left - .msub_right - .msub_center. la realizzazione dipende da come vorrete voi stessi la barra inferiore.
3 - Ora passiamo Alla parte tecnica dell'inserimento delle barre, la parte che le riguarda, è questa:
CODICE
/* BARRA ATTORNO AL FORUM */
.mback {height: 38px; background-image: none}
.mtitle {padding-top: 22px; font-size: 8pt; text-align: center; letter-spacing: 1px; font-weight: bold; color: #FFF}
.mback_left {width: 270px; background-image: url(left.gif); background-repeat: no-repeat; background-position: bottom}
.mback_center {background-image: url(center.gif); background-repeat: repeat-x; background-position: bottom}
.mback_right {width: 270px; background-image: url(right.gif); background-repeat: no-repeat; background-position: bottom}
.msub {height: 17px}
.msub_left {width: 14px; background-image: url(subleft.gif); background-repeat: no-repeat}
.msub_center {background-image: url(subcenter.gif); background-repeat: repeat-x}
.msub_right {width: 15px; background-image: url(subright.gif); background-repeat: no-repeat}
.mleft, .sep_left, .mright, .sep_right {width: 0}
.bar_left {background-image: url(bar-left.gif); background-repeat: no-repeat}
.bar {background-image: url(bar-center.gif); background-repeat: repeat-x}
.bar_right {background-image: url(bar-right.gif); background-repeat: no-repeat}
Iniziamo a poco a poco a spiegare cosa sono questi elementi che a primo impatto possono sembrare una sfilza di codici senza un significato preciso.
CODICE
.mback {height: 38px; background-image: none}
esattamente questo è il selettore che regola la barra principale formata dai tre pezzi. Guardate l'altezza dei vostri pezzi e modificate il selettore "38px" in base alla vostra barra.
height = Altezza
width = Larghezza
CODICE
.mback_left {width: 270px; background-image: url(left.gif); background-repeat: no-repeat; background-position: bottom}
.mback_center {background-image: url(center.gif); background-repeat: repeat-x; background-position: bottom}
.mback_right {width: 270px; background-image: url(right.gif); background-repeat: no-repeat; background-position: bottom}
Ora l'.mback diventa sempre più preciso e dobbiamo modificare i vari codici in base ai nostri 3 pezzi principali. .mback_left la prima cosa che chiede e la larghezza, in quanto l'altezza l'abbiamo già specificata precedentemente, mettere le varie misure sia per il left,right e center. come potete notare lì mback_center ha una parte diversa dagli altri due: background-repeat: repeat-x; Questo codice rende possibile la ripetizione per orizzontale(x) se fosse stato in verticale la (x) sarebbe stata cambiata con (y). Inserite i vari link della vostra barra e il primo passo è stato fatto.
4 - Prima di questi codici abbiamo tralasciato quest'altro selettore:
CODICE
.mtitle {padding-top: 6px; font-size: 8pt; text-align: center; letter-spacing: 1px; font-weight: bold; color: #FFF}
è esattamente il testo che ritroviamo nelle nostre barre una volta montate, insomma in parole povere sarà il titolo che daremo ad ogni blocco di sezioni, e ne determina il font,il colore,la grandezza e il posizionamento. Molto spesso la gente non ha idea di cosa sia questo
padding-top: 6px, è in realtà un regolatore di posizionamento del testo, spesso infatti il testo non è allineato con la barra, spesso è troppo in su o troppo in giù, per regolarlo ci aiuta il padding-top(distanza dalla cima) o il padding-bottom (distanza dal basso), questo selettore è davvero molto variabile, non c'è una misura standard ma sta a voi provare finchè non allineate il testo.
text-align: center questo codice invece appare abbastanza chiaro, determina semplicemente una posizione su una base orizzontale del testo,quindi "left,center,right" questi sono le posizioni che possiamo usare, ma per oggi andiamo sul classico e lasciamo il center.
letter-spacing: 1px questo codice è molto utile al fine di una buona visualizzazione, difatti stabilisce un pixel di distanza tra le lettere del testo.
font-weight: bold determina la struttura della forma del testo, in parole povere, se vogliamo o meno il grassetto, esistono varie specificazioni per questo codice,ad esempio: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit; ma normalmente si ci limita ad usare normal e bold(grassetto). E non scordatevi di modificarene il colore, quello messo al momento è Bianco (#FFF).
Ma se guardate il codice per intero che abbiamo postato all'inizio,ora ci mancano le ultime due parti, intanto chiediamoci cosa sia questo:
CODICE
.mleft, .sep_left, .mright, .sep_right {width: 0}
E' un codice inerente sempre ai pezzi della barra, difatti se ci fate caso la nostra skin è costruita semplicemente con una barra superiore e una inferiore, e i lati dove sono? esattamente sono questi, che per comodità questa volta non li mettiamo, anche perchè non voglio strafare, e già tanto fare le cose a poco a poco.
5 - Ultimo codice della serie elencata precedentemente:
CODICE
.bar_left {background-image: url(bar-left.gif); background-repeat: no-repeat}
.bar {background-image: url(bar-center.gif); background-repeat: repeat-x}
.bar_right {background-image: url(bar-right.gif); background-repeat: no-repeat}
Questo codice ci permette di personalizzare la barretta del sondaggio, quell'asticina che mostra graficamente chi o cosa è in vantaggio di voti. il procedimento è uguale alla barra principale,fare un pezzo destro,sinistro e centrale, naturalmente fate barre piccole, io di solito uso un pezzo unico per tutti e tre, vi mostro il mio codice:
CODICE
.bar, .bar_left, .bar_right {background-image: url(http://digilander.libero.it/keyzbianca/lovetodance/bar.gif); background-repeat: repeat-x}
L'immagine che ho usato come potete vedere è semplicissima, ciò mi permette di sbrigarmi e fare un codice unico per tutte e tre le parti.
-
Suggerimenti: Spesso capita di imbattersi in skin dove è presente nel lato destro della barra un quadratino con un segno
+ o
-, è davvero fastidioso certe volte, per questo per evitarlo basta sostituire al selettore che trovate nel vostro css che dovrebbe essere: .minus, .plus questa specificazione:
CODICE
.minus, .plus { display: none}
