TUTORIAL SKIN

TUTORIAL SKIN, DEVO CONTINUARE

« Older topic | Newer topic »

Track this topic | Email this topic | Print this topic

Amaredda

Posted on 3/12/2008, 15:38

la vita è lunga ma si vive giorno per giorno perchè all'improvviso potresti non averla più!!!

Group: *Amministratore*
Posts: 1020

Status: Offline: ultima azione eseguita il 16/11/2009, 19:45

Quest'ultimo lo troverete andando in Modifica colori e stili che troverete nell'amministrazione del vostro forum.

Le parti inserite nelle varie caselle di code rappresentano il forum che alla fine avrete!!!

CODICE

body {background-color: #3D3737; font-family: verdana, tahoma, arial; font-size: 8.5pt; color: #000}
table, div {font-size: 7.5pt; color: #FFFFFF}
a:link, a:visited {text-decoration: none; color: #FFFFFF}
a:hover {color: #C9C9C9}

CODICE

/* BARRA ATTORNO AL FORUM */
.mback {height: 30px; background-repeat: repeat-x; background-image: url(LINK IMMAGINE)}
.mtitle {color: #FFF; font-size: 9pt}
.mtitle a:link, .mtitle a:visited {text-decoration: none; color: #FFF}
.mtitle a:hover {text-decoration: none}
.mtitle {text-align: center; letter-spacing: 1px; word-spacing: 2px; padding-top: 3px; font-weight: bold; font-size: 10px; color: #000; width: 100%}
.mtitle a:link {text-align: center; color: #000}
.mback_center {background-image: url(LINK IMMAGINE); background-repeat: no-repeat; background-position: bottom}
.mback_left {width: 28px; background-image: url(LINK IMMAGINE); background-repeat: no-repeat}
.mback_right {width: 283px; background-image: url(LINK IMMAGINE); background-repeat: no-repeat}
.mleft, .sep_left, .mleft_top, .mright, .sep_right, .mright_top {width: 1px}
.msub {border-left: 1px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid #000000; height: 10px; background-image: url(LINK IMMAGINE); background-repeat: repeat-x}

CODICE

/* SEZIONI FORUM */
.skin_tbl_border {background-color: #000000}
.mainbg {background-color: #000000}
.title, .sunbar {height: 17px; font-weight: bold; background-repeat: repeat-x; color: #A5A5A5; background-color: #1F1F1F; background-image: url(http://skin.forumfree.net/black_ice/title.gif); border-top: 1px solid #3F3F3F}
.aa, .bb, .cc, .ww, .xx, .yy, .zz, .row1 {background-color: #28292A; border-top: 1px solid #3F3F3F}
.web {font-size: 10pt; line-height: 150%}
.web a:link, .web a:visited {tect-decoration: none}
.web a:hover {border-bottom: 2px solid #FFF}
.desc {font-size: 10px}
.board .foot {display:none}

CODICE

/* STATISTICHE */
.skin_tbl_border {background-color: #000000}
.highlight {color: #FFF}
.stats .title2, .title2, .title3, .row2 {height: 16px; font-weight: bold; background-repeat: repeat-x; color: #A5A5A5; background-color: #1F1F1F; background-image: url(LINK IMMAGINE); text-align: bottom; padding-left: 20; padding-bottom: 3px}

CODICE

/* DISCUSSIONE */
.foot, .left_top, .right_top, .left_bottom, .right_bottom {background-color: #28292A; border-top: 1px solid #3F3F3F}
.left {background-color: #28292B}
.right {background-color: #28292B}
#quote, #code {font-size: 11px; color: #EEEEEE; background-color: #202224; border: 1px dotted #000; border-right: 1px dotted #EEEEEE; border-bottom: 1px dotted #E5E5E5; padding: 2px}
.color {font-size: 9.5pt; line-height: 150%}
.color a:link, .color a:visited {text-decoration: underline}
hr {color: #000}
.fancyborder {border: 1px dotted #7A9B9B}
.edit {font-size: 8.5px; font-style: italic}
.bottomborder {border-bottom: 1px dotted #7A9B9B}
.signature {font-size: 7.5pt; line-height: 150%; width: 88%}
.bar_left {background-image:url(http://digilander.libero.it/kalelmanu/White%20gothic%20skin/bar.gif)}
.bar {background-image:url(http://digilander.libero.it/kalelmanu/White%20gothic%20skin/bar.gif)}
.bar_right {background-image:url(http://digilander.libero.it/kalelmanu/White%20gothic%20skin/bar_right.gif)}

CODICE

/* MESSENGER */
.msg_main {background-color: #28292A}
.row3 {background-color: #313131; border: 1px solid #000000}
.darkbar {color: #E5E5E5; font-weight:bold; background-color: #313131}
.nick a:link, .nick a:visited {font-weight: bold; text-decoration: none; font-size: 9pt}
.nick a:hover {text-decoration: underline}
.msg .details p {font-size: 10px; line-height: 150%}
.msg .details {font-size: 7.5pt}
.info {font-size: 11px; color: #5FA45F; background-color: #202420; border: 1px dotted #000; border-right: 1px dotted #3A3E39; border-bottom: 1px dotted #3A3E39; padding: 2px}
.alert {font-size: 11px; color: #B05E5E; background-color: #242020; border: 1px dotted #000; border-right: 1px dotted #3E3939; border-bottom: 1px dotted #3E3939; padding: 2px}
.sep {height: 3px; background-color: #E5E5E5; border-right: 1px solid #000; border-left: 1px solid #000}

CODICE

/* INPUT */
.textinput {background-color: #313131; color: #E5E5E5; font-size: 8.5pt; font-family: tahoma, helvetica, sans-serif; vertical-align: middle; border: 1px solid #000}
.forminput, .input, .codebuttons {background-color: #313131; color: #A5A5A5; font-size: 8.5pt; font-family: verdana, helvetica, sans-serif; vertical-align: middle; border: 1px solid #000; background-image: url(LINK IMMAGINE)}

andiamo a studiarle:

inizio dalla prima cella!

CODICE

body {background-color: #3D3737; font-family: verdana, tahoma, arial; font-size: 8.5pt; color: #000}

Qui cambieremo il colore dello sfondo del forum "background-color: #3D3737", il font del forum e il suo clore o almeno di una parte e la dimensione "font-family: verdana, tahoma, arial; font-size: 8.5pt; color: #000"

CODICE

table, div {font-size: 7.5pt; color: #FFFFFF}
a:link, a:visited {text-decoration: none; color: #FFFFFF}

Qui modificate la grandezza del font e il colore contenuto nelle tabelle "table, div {font-size: 7.5pt; color: #FFFFFF}" , la parte dove potrete modificare il font dei link che NON sono toccati dal mouse "a:link, a:visited {text-decoration: none; color: #FFFFFF}"

CODICE

a:hover {color: #C9C9C9}

Modificate qui il colore dei link al passaggio del mouse!!

Seconda cella:
In questa fase tratteremo la Barra Attorno al forum, nonchè le parti grafiche che racchiudono il nostro blocco.

CODICE

.mback {height: 30px; background-repeat: repeat-x; background-image: url(LINK IMMAGINE)}

Troviamo la parte che si ripete sempre come sfondo della Barra con sopra il titolo del blocco di sezioni. Create un'immagine 7x30 px postatela su un sito hosting e incollate il codice dove trovate LINK IMMAGINE

CODICE

.mtitle {color: #FFF; font-size: 9pt}
.mtitle a:link, .mtitle a:visited {text-decoration: none; color: #FFF}
.mtitle a:hover {text-decoration: none}
.mtitle {text-align: center; letter-spacing: 1px; word-spacing: 2px; padding-top: 3px; font-weight: bold; font-size: 10px; color: #000; width: 100%}

Questa è la parte riguardante il titolo sopra il blocco delle sezioni, dobbiamo modificarlo e dargli un colore!,".mtitle {text-align: center; letter-spacing: 1px; word-spacing: 2px; padding-top: 3px; font-weight: bold; font-size: 10px; color: #000; width: 100%}
" text-align è il posizionamento del titolo, sciegliete fra Center, Left, Right.
Subito dopo abbiamo lo spazio fra le singole lettere, è consigliato lascIare invariato.
Stessa cosa per il codice dopo che serve per lo spazio fra le parole.
In padding-top mettete il numero di pixel che volete sia lasciato dal margine superiore.
Il resto è : lo stile del font (grassetto, corsivo ecc..), la grandezza del font, il colore (molto importante, settatene uno opposto al colore della skin così da farlo visualizzare bene) e infine la larghezza che si consiglia di non variare.

CODICE

.mback_center {background-image: url(LINK IMMAGINE); background-repeat: no-repeat; background-position: bottom}
.mback_left {width: 28px; background-image: url(LINK IMMAGINE); background-repeat: no-repeat}
.mback_right {width: 283px; background-image: url(LINK IMMAGINE); background-repeat: no-repeat}

Questo pezzo rappresenta la barra presente in ogni blocco delle sezioni sulla quale c'è il titolo!!
create una barra colorata a vostro piacimento ritagliate una parte centrale che si ripeterà postatela e inserite il link in MBACK_CENTER!
Ugualmente fate con la parte sinistra e quella destra! Prendendo però la parte della vostra barra corrispondente a quella richiesta (sinistra e destra)! Ricordo: LEFT E' SINISTRA, RIGHT E' DESTRA!
"background-position: bottom" Questa sigla vi serve per la precisione di posizionamento della barra!
in mback_center scrivete center al posto di bottom, in mback_left scrivete left, in mback_right scrivete right!

CODICE

.msub {border-left: 1px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid #000000; height: 10px; background-image: url(LINK IMMAGINE); background-repeat: repeat-x}

Questa è la barretta sotto il blocco delle sezioni!
al posto di LINK IMMAGINE mettete l'immagine utilizzata precedentemente della parte centrale della barra superiore o fatene un'altra di queste dimensioni 7x30.
Dove trovate scritto BORDER... inserite un colore al posto di 000000 che sarà il colore dei bordi!

Terza cella: Sezioni forum

CODICE

.skin_tbl_border {background-color: #000000}
.mainbg {background-color: #000000}

Qui daremo colore ai bordi!
il primo è per i bordi esterni!
il secondo per quelli interni!

CODICE

.title, .sunbar {height: 17px; font-weight: bold; background-repeat: repeat-x; color: #A5A5A5; background-color: #1F1F1F; background-image: url(LINK IMMAGINE); border-top: 1px solid #3F3F3F}

Questa è la barretta che troviamo sotto la barra principale della cornice della skin.
Create un'immagine più o meno alta 25 px, pixel in più o in meno!
Stabilite il colore del testo su di essa.

CODICE

.aa, .bb, .cc, .ww, .xx, .yy, .zz, .row1 {background-color: #28292A; border-top: 1px solid #3F3F3F}

Queste sono le varie parti della tabella del blocco delle sezioni, dove troviamo titolo della sezione, numero di topic e ultime risposte. Modificate i colori e testate per vedere il risultato!

CODICE

.desc {font-size: 10px; color: #FFF}

Qui viene deciso il colore delle descrizioni delle sezioni!!

CODICE

.board .foot {display:none}

Per far in modo che non appaia un ulteriore spazio sopra la parte inferiore della cornice della skin.

Quarta cella: Statistiche

CODICE

.skin_tbl_border {background-color: #000000}

Bordo delle statistiche! Modificate il colore!

CODICE

.highlight {color: #FFF}

Freccia che separa un nickname dall'altro in statistiche! Modificare il colore!

CODICE

.stats .title2, .title2, .title3, .row2 {height: 16px; font-weight: bold; background-repeat: repeat-x; color: #A5A5A5; background-color: #1F1F1F; background-image: url(LINK IMMAGINE);

Barretta dove trovate il titolo statistiche!!create un'immagine e mettete il link

CODICE

<i>color: #A5A5A5</i>

Che vi consentirà di cambiare colore del font, consigliato inserire quello messo all'inizio (Guarda Lezione 1)

CODICE

text-align: bottom

Sostituendo a bottom:
left oppure right
oppure lasciate bottom

Quinta cella: Discussione

CODICE

.foot, .left_top, .right_top, .left_bottom, .right_bottom {background-color: #28292A; border-top: 1px solid #3F3F3F}

In questo pezzo dovrete modificare il codice del colore di sfondo:
background-color: #28292A e il "bordo superiore":
border-top: 1px solid #3F3F3F
Modificando questi codici cambierete il colore delle parti "esterne" del topic per esempio il colore di sfondo della parte in alto al topic dove vedete scritta la data dell'invio della discussione e lo sfondo sotto il nick

CODICE

.left {background-color: #28292B}
.right {background-color: #28292B}

che non sono altro che il colore di sfondo della vera discussione.
.left è la parte sinistra (la colonna in cui trovate l'autore del topic) mentre .right la parte destra dove ci sarà il post.

CODICE

#quote, #code {font-size: 11px; color: #EEEEEE; background-color: #202224; border: 1px dotted #000; border-right: 1px dotted #EEEEEE; border-bottom: 1px dotted #E5E5E5; padding: 2px}

che sono le opzioni Citazione (quote) e Codice (code)
Per variare il loro aspetto modificate queste parti:
- font-size: 11px Per variare la grandezza del font.
- color: #EEEEEE Il colore del font
- background-color: #202224 Il colore di sfondo
- border: 1px dotted #000 Il bordo della parte di Citazione/Codice. Modificate la parola dotted con solid, dashed

CODICE

.color {font-size: 9.5pt; line-height: 150%}
.color a:link, .color a:visited {text-decoration: underline}

Queste qui su trovate le opzioni del vostro font nella discussione, impostate la grandezza del font e lasciate la percentuale così come la trovate.

CODICE

color a:link, .color a:visited {text-decoration: underline}

Modificate underline con qualche altro effetto che volete.

CODICE

hr {color: #000}
.fancyborder {border: 1px dotted #7A9B9B}
.edit {font-size: 8.5px; font-style: italic}

Il primo rigo è il colore di una linea che potrete creare nel topic scrivendo

CODICE

<hr>

!
Il secondo rigo indica il colore del bordo tratteggiato che trovate attorno alla dicitura del "file allegato".
Il terzo rigo è il codice che racchiude le opzioni del font che trovate quando un topic è stato modificato.

CODICE

.bottomborder {border-bottom: 1px dotted #7A9B9B}
.signature {font-size: 7.5pt; line-height: 150%; width: 88%}

Nel primo dovrete modificare il colore del rigo tratteggiato che separa topic da firma
Nel secondo potrete modificare le opzioni della firma. Il font, la larghezza.

CODICE

.bar_left {background-image:url(LINK IMMAGINE)}
.bar {background-image:url(LINK IMMAGINE)}
.bar_right {background-image:url(LINK IMMAGINE)}

La barra in questione è suddivisa nelle 3 righe di codice qui sopra:
la parte sinistra, la parte centrale che si ripete tante volte quanto è il numero di voti e la parte destra che chiude.

Sesta cella: Messenger

CODICE

.row3 {background-color: #313131; border: 1px solid #000000}

Questo sarà il codice dello sfondo del vostro spazio per i messaggi privati, modificate il codice del colore.

CODICE

.nick a:link, .nick a:visited {font-weight: bold; text-decoration: none; font-size: 9pt}
.nick a:hover {text-decoration: underline}

che serve a modificare il colore del nostro nick dentro il messaggio privato.
Nel primo rigo troviamo il codice del nick normale, nel secondo troviamo quello per il nick evidenziato dal passaggio del mouse. Potrete modificare anche la decorazione del testo sostituendo a underline altri selettori.

CODICE

.msg .details p {font-size: 10px; line-height: 150%}
.msg .details {font-size: 7.5pt}

Questi sono i codici per settare il font delle scritte che trovate sotto il vostro nick, modificate la grandezza (font-size: 7.5pt).

CODICE

.info {font-size: 11px; color: #5FA45F; font-size: 11px; color: #B05E5E; border: 1px dotted #000; border-right: 1px dotted #3A3E39; border-bottom: 1px dotted #3A3E39; padding: 2px}

Questo invece è il codice del font che sta ad indicare le informazioni della data e ora del fuso orario, per poterlo visualizzare entrate nella voce Opzioni forum dal vostro pannello

CODICE

.alert {font-size: 11px; color: #B05E5E; background-color: #242020; border: 1px dotted #000; border-right: 1px dotted #3E3939; border-bottom: 1px dotted #3E3939; padding: 2px}

Questo codice sta a rappresentare il messaggio di Errore che vi compare quando sbagliate qualcosa, non rispettate l'antiflood ecc...
Modificate la grandezza del font e il colore (font-size: 11px; color: #B05E5E), il colore di sfondo della scritta (font-size: 11px; color: #B05E5E) e il bordo (border: 1px dotted #000; border-right: 1px dotted #3E3939; border-bottom: 1px dotted #3E3939; padding: 2px).

CODICE

.sep {height: 3px; background-color: #E5E5E5; border-right: 1px solid #000; border-left: 1px solid #000}

Che non è altro che quel piccolo spazietto colorato che divide un post dall'altro
Modificate l'altezza in base a quanto volete sia distante dal post, il colore di sfondo e il colore dei bordi laterali.

Ultima cella: Input

CONTINUO DOPO

Edited by Amaredda - 26/1/2009, 15:26

made by • S t e r n •

0 replies since 3/12/2008, 15:38

Track this topic | Email this topic | Print this topic