Salve a tutti,
oggi vorrei farvi una piccola e semplice guida su come creare una skin
1° Passo
Amministrazione ---> Grafica -----> Colori e stili
2° Passo
Apriamo phostoshop e cominciamo a creare la barra attorno al forum (grandezza 500x 35)
Ora tagliamo l'immagine in 3 parti
lato destro
lato sinistro
barra centrale
3° Passo
Apriamo phoshop e rifacciamo la barra (grandezza 500 x 20)
Ora dividiamola in 3 parti
4.1° Passo
Ora andiamo in forumfree, in modifica colori e stili, e portiamoci in questa parte:
CODICE
/* BARRA ATTORNO AL FORUM */
.mback {height: 35px; background-image: none}
.mtitle {padding-bottom: 2px; font-size: 9pt; text-align: center; color: #F98C67}
.mback_left {width: 212px; height: 35px; background-image: url(http://i205.photobucket.com/albums/bb90/giulyx/margine_sin.png); background-repeat: no-repeat; background-position: bottom}
.mback_center {background-image: url(http://i205.photobucket.com/albums/bb90/giulyx/barra_centro.png); background-repeat: repeat-x; background-position: bottom}
.mback_right {width: 150px; height: 35px; background-image: url(http://i205.photobucket.com/albums/bb90/giulyx/margine_destro.png); background-repeat: no-repeat; background-position: bottom}
.msub {height: 20px} .msub_left {width: 26px; height: 20px; background-image: url(http://i205.photobucket.com/albums/bb90/giulyx/barra_sx_sotto.png); background-repeat: no-repeat}
.msub_center {background-image: url(http://i205.photobucket.com/albums/bb90/giulyx/barra_cn_sotto.png); background-repeat: repeat-x}
.msub_right {width: 26px; height: 20px; background-image: url(http://i205.photobucket.com/albums/bb90/giulyx/barra_dx_sotto.png); background-repeat: no-repeat}
.mleft, .sep_left, .mright, .sep_right {width: 0}
In .mback metti le immagini dellaa barra superiore, in .msub quelle della barra inferiore.
E' molto importante anche modificare le misure mettendo quelle esatte delle immagini create da voi.
Aggiornate pagina forum!!
Passo 4.2
Se volete modificare il colore della scrollbar, aggiungete il seguente codice e modificatelo in base alla skin:
CODICE
body {scrollbar-face-color: #FBD8F6;
scrollbar-arrow-color: #FFFFFF;
scrollbar-track-color: #FBD8F6;
scrollbar-shadow-color: #FBD8F6;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #828282;
scrollbar-darkshadow-color: #FBD8F6}
Passo 5.1
Ora abbiamo questa stringa
CODICE
/* SCRITTE ESTERNE */
.nav {font-weight: bold; font-size: 9pt}
in cui vengono modificate solo queste scritte, esterne ai forum
Passo 5.2
In questa stringa cambiamo la larghezza del forum rispetto allo schermo in cui viene visualizzato, va quindi inserito un valore percentuale.
CODICE
/* DIMENSIONI FORUM */
.header_width, .skin_tbl_width, .skin_tbl {width: 75%}
.stats .border {width: 76%}
Passo 5.3
Modificando questa parte
CODICE
/* COLORI LISTA UTENTI ATTIVI */
.amministratore {color: #F98C67; font-weight: bold}
.moderatore {color: #FABDA9; font-weight: bold}
.utente {color: #A09F9F}
.daconvalidare {}
.gruppo1 {color: #B980FF; font-weight: bold}
.gruppo2 {color: #80A9FF; font-weight: bold}
.gruppo3 {color: #95DDFF; font-weight: bold}
.gruppo4 {color: #9FEF50; font-weight: bold}
.gruppo5 {color: #FFF000; font-weight: bold}
.gruppo6 {color: #FFB56A; font-weight: bold}
si assegnano i colori in base ai ruoli e ai gruppi di appartenenza (sempre che i gruppi vengano poi creati); per i colori dovrete usare gli html
(IMG:
http://www.tecnoreview.it/wp-content/uploa...olori-html.jpeg)
Passo 6
In questa stringa
CODICE
/* BARRA UTENTE */
.menu {height: 28px; background-image: url(http://katyna.altervista.org/_altervista_ht/Skin/t3_copia.gif)}
.menu a:link, .menu a:visited {color: #888888}
.menu a:hover {color: #929191; text-decoration: none}
modifichiamo la barra alta, questa
Passo 7
Passiamo avanti
CODICE
/* SEZIONI FORUM */
.mainbg {background-color: #CCCCCC}
.title, .foot {height: 18px; background-color: #CBC9C9; color: #B2B1B1; background-image: url(http://katyna.altervista.org/_altervista_ht/Skin/userlinks.png)}
.title a:link, .title a:visited, .foot a:link, .foot a:visited {font-weight: bold; color: #F98C67}
.title a:hover, .foot a:hover {color: #F98C67; text-decoration: underline}
.aa, .bb, .cc, .ww, .xx, .yy, .zz {background-color: #F2F2F2; border-top: 1px solid #FFFFFF}
.web {font-size: 10pt; line-height: 150%}
.web a:link, .web a:visited {color: #F98C67}
.web a:hover {color: #F98C67; text-decoration: underline}
.desc {font-size: 10px; color: #BBBBBB}
.board .foot {display: none}
qui potremmo modificare i colori e gli stili dei riquadri delle sezioni, in .title si puo impostare anche un semplice colore di background, oppure, come in questo caso, un'altra barra.
Passo 7.1
Ora passiamo alla bacheca delle statistiche
CODICE
/* STATISTICHE */
.stats .border {border: 1px solid #828282; background-color: transparent}
.skin_tbl_border {background-color: #B8D8F6}
.stats .title2, .stats .sunbar {text-align: center}
.stats .title2 {height: 26px; background-image: url(http://katyna.altervista.org/_altervista_ht/Skin/mscenter.gif); background-repeat: repeat-x; background-color: #CBC9C9; color: #F98C67; font-size: 9pt; font-weight: normal}
.sunbar {padding-bottom: 0; color: #BBBBBB; background-color: #CBC9C9}
.stats .aa, .stats .ww {background-color: #F2F2F2; border-top: 1px solid #FFFFFF}
.highlight {color: #F98C67; font-weight: bold}
Passo 7.2
Ora, in questa stringa modifichiamo semplicemente i colori dei link.
CODICE
/* LINK MOD */
.highlight a:link, .highlight a:visited {color: #A5A6A6; font-weight: normal} .highlight a:hover {text-decoration: line-through; color: #47A0FB}
Passo 8°
Passiamo ora alla tabella delle discussioni, andiamo a modificare, quindi, tutto cio che puo trovarsi all'interno di ogni post: il testo, i link, le quote, il code ecc...
CODICE
/* DISCUSSIONE */
.left_top, .right_top, .left_bottom, .right_bottom {background-color: #F2F2F2}
.left_top .td, .right_top .td, .nick a:link, .nick a:visited, .right_top * a:link, .right_top * a:visited, .left_bottom .td, .right_bottom .td, .right_bottom * a:link, .right_bottom * a:visited {font-weight: bold; color: #A09F9F} .nick a:hover, .right_top * a:hover, .right_bottom * a:hover {color: #A09F9F}
.sep {height: 7px}
#end .title {font-weight: bold; color: #A09F9F}
#end .title a:link, #end .title a:visited {font-weight: bold; color: #A09F9F; text-decoration: underline}
#end .title a:hover {color: #B0B0B0}
.left, .right {color: #CCCCCC; background-color: #F2F2F2; border-top: 1px solid #FFFFFF}
.nick a:link, .nick a:visited {text-decoration: none; color: #F98C67; font-size: 12px; font-weight: bold; padding-bottom: 2px}
.nick {font-size: 12px; color: red; padding-bottom: 2px}
.quote_top {border: 1px solid #CCC; text-align: center; background-color: #F0F0F0; color: #F98C67; background-image: url(http://i86.photobucket.com/albums/k84/LadyKatyna/quote_code_.gif)}
#quote {font-family: verdana, arial; font-size: 11px; color: #BBB; background-color: #F0F0F0; padding-left: 5px; padding-right: 5px; border: 1px solid #CCC}
.code_top {border: 1px solid #CCC; text-align: center; background-color: #F0F0F0; color: #F98C67; background-image: url(http://i86.photobucket.com/albums/k84/LadyKatyna/quote_code_.gif)}
#code {font-family: verdana, arial; font-size: 11px; color: #BBB; background-color: #F0F0F0; padding-left: 5px; padding-right: 5px; border: 1px solid #CCC}
.color {font-size: 9.5pt; line-height: 150%}
.color a:link, .color a:visited {color: #A09F9F}
.color a:hover {text-decoration: underline; color: #BBBBBB}
hr {color: #A09F9F}
.fancyborder {background-color: #BBBBBB; border: 1px dashed #A09F9F}
.edit {color: #F98C67; font-size: 9px; font-style: italic; text-decoration: underline}
.bottomborder {border-bottom: 1px dashed #A09F9F}
.signature {font-size: 7.5pt; color: #F98C67; line-height: 150%}
Non è fattibile spiegare i termini uno ad uno, conoscendo un po i css e l'html basta leggere quello che c'è scritto, e di conseguenza fare le modifiche ai colori mettendoli abbinati allo stile del proprio forum. Ci vole un po di occhio e di pazienza, io consiglio, le prime volte, di fare una modifica alla volta, prenderne nota e salvare le modifiche fatte, in modo da vedere subito cosa siete andati a modificare e rimediarvi.
Passo 9°
Qui siamo invece nel messenger, praticamente l'editor in cui vengono inseriti i messaggi da inviare.
CODICE
/* MESSENGER */
.msg_main {background-color: #F2F2F2; color: #CCCCCC; border-top: 1px solid #FFFFFF}
#msg_txt a:link, #msg_txt a:visited {color: #A09F9F} #msg_txt a:hover {text-decoration: underline}
.row1, .row2, .row3 {background-color: #EDECEC}
.row3 {border: 1px solid #CCCCCC}
.darkbar {background-image: none; background-image: url(http://katyna.altervista.org/_altervista_ht/Skin/userlinks.png)} .title3 {font-weight: bold; background-color: #E5E5E5; color: #F98C67}
#normalname_msg a:link, #normalname_msg a:visited {text-decoration: none; color: #A09F9F; font-size: 12px; font-weight: bold; padding-bottom: 2px}
#normalname_msg a:hover {color: #BBBBBB}
.msg .details p {color: #A09F9F; font-size: 10px; line-height: 150%}
.msg .details {font-size: 7.5pt}
.info {padding-left: 1px; padding-right: 1px; background-color: #EFEFEF; color: #BBBBBB; border: 1px solid #CCCCCC}
.alert {padding-left: 1px; padding-right: 1px; background-color: #EFEFEF; color: #BBBBBB; border: 1px solid #CCCCCC}
#pagetitle_msg {color: #F98C67; font-size: 18px; font-weight: bold; letter-spacing: -1px; line-height: 120%}
Passo 10°
Abbiamo quasi finito con gli stili, ora troviamo questa stringa, che corrisponde alla parte bassa della skin, dove c'è il form per l'inserimento delle risposte veloci, i pulsandi di moderazione e il riquadro che indica cio' che l'utente puo o non puo fare in quel forum, la legenda sulle discussioni nuove, gia' lette ecc....
CODICE
/* INPUT */
.textinput {background-color: #ECEBEB; color: #939292; font-size: 8.5pt; font-family: verdana, helvetica, sans-serif; vertical-align: middle; border: 1px solid #828282}
.foot .forminput, .darkbar .forminput, .row1 .forminput {font-size: 8pt; font-family: verdana, helvetica, sans-serif; vertical-align: middle; background-color: #ECEBEB; color: #939292; border: 1px solid #F98C67}
.forminput {font-size: 11px; font-family: verdana, helvetica, sans-serif; vertical-align: middle; color: #939292; background-color: #ECEBEB; border: 1px solid#F98C67}
.input, .codebuttons {font-size: 7.5pt; font-family: verdana, helvetica, sans-serif; vertical-align: middle; color: #939292; background-color: #ECEBEB; border: 1px solid#F98C67}
Passo 11°
L'ultima cosa da fare è modificare la pagina con il profilo utente, e lo facciamo da questa stringa
CODICE
/* PROFILO UTENTI */
.pagetitle {color: #3A3A3A; font-size: 18px; font-weight: bold; letter-spacing: -1px; line-height: 120%}
.title2 {height: 26px; background-repeat: repeat-x; background-color: #FBD4F5; background-image: url(http://i205.photobucket.com/albums/bb90/giulyx/barra_utente.png); font-weight: bold; color: #3A3A3A}
.title2 a:link, .title2 a:visited {font-weight: bold; color: #FFFFFF; text-decoration: underline}
.title2 a:hover {color: #828282}
.profile .row1 {background-image: none; background-color: #FBD4F5; border: 1px solid #828282; border-top: 1px solid #FFFFFF}
The End
Fonte:
Creare skin Forumfree ForumCommunity (mia)
