[Terza Lezione] Corso di Skin
Il Testo e le Statistiche.
In questa lezione ci occuperemo del testo in generale della nostra skin e dei link ad esso correlati, in più vedremo come modificare la parte delle statistiche.
Innanzitutto vediamo alcuni codici che abbiamo tralasciato all'inizio e che andremo a modificare ora, li trovate proprio all'inizio del css:
CODICE
body {background-color: #FFF; font-family: verdana, tahoma, arial; font-size: 8pt; color: #000}
table, div {font-size: 7.5pt; color: #000}
a:link, a:visited {text-decoration: none; color: #586D7C}
a:hover {color: #445560}
Nella Prima riga troviamo il
body, che regola in generale il corpo della skin, quindi il colore di sfondo che andremo a vedere dietro la skin
background-color: #FFF;, il carattere del testo che vogliamo utilizzare
font-family: verdana, tahoma, arial ed infine la dimensione e il colore del testo, voi vi chiederete...ma allora basta solo questo codice per tutto il testo del forum? potrebbe, ma in verità molti testi di alcune parti li andiamo a particolarizzare.
Il
table, div comprende numerose parti di testo che a scrivere mi verrebbe davvero difficile spiegarle XD in generale comprende il testo che sta in .xx .zz .yy, nella barra del menu (se non è specificato nel dettaglio) e altre parti, in questa immagine vedrete le parti interessate colorate in rosso:
[Immagine]CODICE
a:link, a:visited {text-decoration: none; color: #586D7C}
a:hover {color: #445560}
Questi invece regolano i link di tutta la skin, naturalmente non quelli specificati nel dettaglio.
Passiamo ad un'altra parte di codice, quello delle Statistiche:
CODICE
/* STATISTICHE */
.stats .title2 {height: 23px; border-bottom: 1px solid #ADBAC6; background-image: url(http://img.forumfree.net/style_images/15/mback_center.gif); background-repeat: repeat-x; background-position: bottom; background-color: #FEFEFF; letter-spacing: 1px; font-size: 8pt; color: #445588}
.sunbar {height: 25px; font-weight: bold; color: #444; background-color: #EAEAEA; border: 1px solid #FFF; border-bottom: 0}
.stats .ww, .stats .aa {background-color: #F7F7F7}
.stats .ww {text-align: center}
.highlight {color: #778F9F}
è esattamente la barra principale delle statistiche, in cui si usa un'unica immagine ripetuta, molti tendono ad usare il centro del .mback ma non sempre è possibile usarlo,dipende dalla skin che si è fatta, comunque mettete la vostra immagine (attenzione a tagliare bene se no la ripetizione viene male), settate l'altezza, potete decidere se mettere un piccolo bordo in basso
border-bottom: 1px solid #ADBAC6; in generale io non lo metto, quindi potete anche toglierlo, inoltre non vi scordate di mettere un colore di sfondo (background-color: #FEFEFF;) che sia abbastanza simile all'immagine che mettete come ripetizione.
.sunbar è la parte sottostante la barra delle statistiche, di solito viene trattata come il .title, cioè si mette la stessa immagine del .title e si usa per il testo un colore non troppo forte. Dovreste sapere ormai come modificare questo codice in base ai vostri gusti, se fare il testo in grassetto, se diminuire la grandezza, ect..
Vi ricordo che
.stats .ww, .stats .aa è sempre meglio farlo come l'.aa e il .bb del blocco sezioni. Infine per il resto del codice vi lascio questa immagine che vi mostra dove sono le stats .aa e .ww, il sunbar,il title2 e anche il bordo delle statistiche:
Edited by ~ Sy - 11/5/2009, 20:42
