[Quarta Lezione] Corso di Skin
Modifichiamo La Grafica delle Discussioni.
Oggi ci occuperemo di una parte molto importante e che spesso i neo-skinner tralasciano e non fanno,credendo che la grafica della skin si fermi alla facciata. il codice in questione è
questo:
CODICE
/* DISCUSSIONE */
.left_top, .right_top, .left_bottom, .right_bottom {height: 25px; color: #444; background-color: #EAEAEA; border: 1px solid #FFF; border-bottom: 0}
.left, .right {background-color: #FAFAFA; border: 1px solid #FFF; border-bottom: 0}
.nick {font-size: 12px; color: #FF5555; padding-bottom: 2px}
.nick a:link, .nick a:visited {font-weight: bold}
#quote {border: 1px solid #A9B8C2; background-color: #DCE1E5; font-size: 8pt; padding: 2px}
#code {border: 1px solid #778F9F; background-color: #A9B8C2; color: #FFF; font-size: 8pt; padding: 2px}
.color {font-size: 9.5pt; line-height: 150%}
.color a:hover {text-decoration: underline}
hr {color: #ADBAC6}
.fancyborder {background-color: #FFF; border: 1px dashed #ADBAC6}
.edit {font-size: 9px; font-style: italic; color: #778F9F}
.bottomborder {border-bottom: 1px dashed #ADBAC6}
.signature {color: #778F9F; line-height: 150%}
.sep {height: 7px}
A vederlo cosi,sembra il più complesso di tutti ma vi assicuro che questo codice è davvero semplicissimo.CODICE
.left_top, .right_top, .left_bottom, .right_bottom {height: 25px; color: #444; background-color: #EAEAEA; border: 1px solid #FFF; border-bottom: 0}
.left, .right {background-color: #FAFAFA; border: 1px solid #FFF; border-bottom: 0}
è semplicemente la grafica della nostra discussione postata,per aiutarvi vi indicherò tutte le parti in un immagine:
Come potete notare ogni post è diviso in due parti:
Left e
Right, e di conseguenza queste si dividono in altre due: top e bottom. questo ci sarà molto utile se vogliamo differenziare alcune parti da altre ma io consiglio si farle sempre tutte con lo stesso colore,tranne magare il left top e il right top leggermente più scuri, ma non di molto, potete anche inserire immagini come background,come avete fatto per il title.
CODICE
.nick {font-size: 12px; color: #FF5555; padding-bottom: 2px}
.nick a:link, .nick a:visited {font-weight: bold}
Questo è il codice che serve per modificare il colore dei nostri
nickname che appaiono nella discussione,potete ingrnadirli,cambiare colore o mettere un font particolare, bhè sbizzaritevi.
CODICE
#quote {border: 1px solid #A9B8C2; background-color: #DCE1E5; font-size: 8pt; padding: 2px}
#code {border: 1px solid #778F9F; background-color: #A9B8C2; color: #FFF; font-size: 8pt; padding: 2px}
Indicano rispettivamente
la citazione e l'opzione per mettere codici in un post, poetete farli come più vi piacciono, vi consiglio di visualizzare la nostra guida sui bordi per dare un tocco più particolare, vi raccomando inoltre di differenziare sempre il code dal quote perchè è fastidioso vederli uguali.
CODICE
.color {font-size: 9.5pt; line-height: 150%}
.color a:hover {text-decoration: underline}
Se tornate a guardare l'immagine precedente potete notare che il
.color è esattamente il testo che useremo nelle discussioni, vi raccomando che sia sempre ben leggibile.
CODICE
hr {color: #ADBAC6}
.fancyborder {background-color: #FFF; border: 1px dashed #ADBAC6}
Questi sono i codici meno importanti dentro la discussione,l'hr è una sorta di dettaglio, quindi non fatelo mai troppo evidente ma sempre un pò a metà tra lo scuro e il chiaro, meglio se grigio o sulla tonalità che avete scelto per la vostra skin. Il
.fancyborder è il riquadro interno di quando adrete a mettere in un post un'immagine allegata.
Edited by ~ Sy - 11/5/2009, 20:45
Grazie!! Mi era sfuggito ... ._______.