skin per forumfree©fabulatia
 
 
 

|  Torna all'elenco|  Creare un forum su forumfree | Modifica colori e stili | barra attorno al forum |

| gestione codice html | containr semplice | container con bordi | container con riquadro |

Premessa: vi prego di rispettare il mio lavoro e di non scopiazzarlo, su altri siti o forum, il tutorial, da me creato non è completo ed è suscettibile a cambiamenti. Il codice e le immagini, in quanto parte del tutorial, possono essere modificare e utilizzate per creare altre skin, vi chiedo solo di lasciare un messaggio nel Guestbook e di mettere un piccolo riferimento al mio sito.

Creative Commons License
Tutorial skin per forumfree by ©Fabulatia is licensed under a Creative Commons

Attribuzione-Non commerciale-Non opere derivate 2.5 Italia License.

 

PER MODIFICARE COLORI E STILI: VAI IN Amministrazione grafica ---> Modifica colori e stili

 

---> i codici di questo colore e tipo  #5f4d4d sono linkati ad una immagine che riporterà le modifiche in rosso .

 

per spiegarmi meglio, in questo caso il codice del colore #5f4d4d linkato all'immagine qui sopra, sta ad indicare che cambia il colore della scritta marchiata in rosso.

In amministrazione grafica

 

* prima parte del codice *

 

qui puoi modificare il colore e le dimensioni delle scritte ---> Esterne  e di alcune scritte interne alle sezioni.

 

body {background-color: #FFF2E3; font-family: georgia, verdana, arial; font-size: 8.5pt DIMENSIONI FONTS; color: #FFF2E3}
table, div {font-size: 7.5pt  DIMENSIONI FONTS; color: #5f4d4d}
a:link, a:visited {text-decoration: none; color: #5e3441 LINK}
a:hover {color: #CB5979 LINK AL PASSAGGIO DEL MOUSE}

 

* SCRITTE ESTERNE *

 

qui puoi modificare il colore e la dimensione della scritta ---> Amministrazione.

 

/* SCRITTE ESTERNE */
.nav {font-weight: bold; font-size: 8pt}
.nav a:link, .nav a:visited {color: #5E3441 LINK} .nav a:hover {color: #CB5979 LINK AL PASSAGGIO DEL MOUSE}

 

* DIMENSIONI DEL FORUM *

 

qui puoi modificare la larghezza della barra attorno al forum e quella della tabella statistiche.

 

/* DIMENSIONI FORUM */
.header_width, .skin_tbl_width, .skin_tbl {width: 86% larghezza barra attorno al forum}
.stats .border {width: 85%larghezza tabella statistiche}

 

* COLORE LISTA UTENTI ATTIVI *

 

a ciascun ruolo corrisponde un colore.

 

/* COLORI LISTA UTENTI ATTIVI */
.amministratore {color: #A85C68; font-weight: bold}
.moderatore {color: #008BC2; font-weight: bold}
.utente {color: #91456A; font-weight: bold}
.daconvalidare {color: #008000}
.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}

 

* BARRA ATTORNO AL FORUM *

 

qui puoi modificare la barra attorno al forum.

 

 

/* BARRA ATTORNO AL FORUM */
.mtitle {text-align: right; letter-spacing: 1px; word-spacing: 1px; padding-top: 3px; font-weight: bold; font-size: 8.5pt; font-family: georgia, verdana, verdana; color: #5b5555; font-style:}
.mback_left {width: 76px; background-image: url(http://i178.photobucket.com/albums/w258/dedola2007/SPRING/BARRA01.png); background-repeat: no-repeat; background-position: bottom}
.mback_center {background-image: url(http://i178.photobucket.com/albums/w258/dedola2007/SPRING/BARRA2.png); background-repeat: repeat-x; background-position: bottom}
.mback_right {width: 164px; background-image: url(http://i178.photobucket.com/albums/w258/dedola2007/SPRING/BARRA3.png); background-repeat: no-repeat; background-position: bottom}
.mback {height: 65px; border-bottom: 0 solid #FFF2E3; background-image: none}
.msub {height: 28px; font-size: 3px}
.msub_left {height: 28px; width: 120px; background-image: url(http://i178.photobucket.com/albums/w258/dedola2007/SPRING/LATOBASSO01.png); background-repeat: no-repeat}
.msub_center {background-image: url(http://i178.photobucket.com/albums/w258/dedola2007/SPRING/LATOBASSO02.png); background-repeat: repeat-x}
.msub_right {width: 120px; background-image: url(http://i178.photobucket.com/albums/w258/dedola2007/SPRING/LATOBASSO03.png); background-repeat: no-repeat}
.mleft_top {height: 32px; width: 22px; background-image: url(http://i178.photobucket.com/albums/w258/dedola2007/SPRING/ANGOLOSINISTRO.png); background-repeat: no-repeat; background-position: bottom}
.mleft {height: 50px; width: 22px; background-image: url(http://i178.photobucket.com/albums/w258/dedola2007/SPRING/LATOSINISTRO.png); background-repeat: repeat-y}
.sep_left, .sep_right {width: 0}
.mleft_bottom {height: 28px; width: 22px; background-image: url(http://i178.photobucket.com/albums/w258/dedola2007/SPRING/ANGOLOBASSOSINISTRO.png); background-repeat: no-repeat}
.mright_top {height: 59px; width: 28px; background-image: url(http://i178.photobucket.com/albums/w258/dedola2007/SPRING/ANGOLODESTRO.png); background-repeat: no-repeat; background-position: bottom}
.mright {height: 50px; width: 28px; background-image: url(http://i178.photobucket.com/albums/w258/dedola2007/SPRING/LATODESTRO.png); background-repeat: repeat-y}
.mright_bottom {height: 28px; width: 28px; background-image: url(http://i178.photobucket.com/albums/w258/dedola2007/SPRING/ANGOLOBASSODESTRO.png); background-repeat: no-repeat}

 

* BARRA UTENTE *

puoi modificare i colori della barra utente e lo sfondo del logo ---> #fff2e3 - #fff2e3.

 

/* BARRA UTENTE */
.header {border: 1px solid #fff2e3; background-color: #fff2e3}
.menu {border: 1px solid #fff2e3; border-top: 0; background-color: #fff2e3}
.menu {height: 25px; font-weight: bold; text-align: center;
.menu input} .menu select {display: none}
.menu_right {display: none}
.menu form {display: none}
.menu .highlight {font-weight: bold; color: #fff2e3}

 

* SEZIONI FORUM *

 

qui puoi modificare le scritte e il colore ---> della sezione forum.

 

/* SEZIONI FORUM */
.mainbg {background-color: #CB5979 .01.02.}
.title, .foot {height: 10px; background-color: #fff2e3; color: #4b373d; background-image: url(http://i178.photobucket.com/albums/w258/dedola2007/SPRING/BARRA02.png)}
.title a:link, .title a:visited, .foot a:link, .foot a:visited {font-weight: bold; color: #5E3441 LINK}
.title a:hover, .foot a:hover {color: #CB5979 LINK AL PASSAGGIO DEL MOUSE; text-decoration: underline}
.aa, .bb, .cc, .ww, .xx, .yy, .zz {background-color: #fff2e3; border-top: 0 solid #fff2e3}
.web {font-size: 8.5pt; line-height: 150%}
.web a:link, .web a:visited {color: #5E3441 LINK}
.web a:hover {color: #CB5979 LINK AL PASSAGGIO DEL MOUSE; text-decoration: underline}
.desc {font-size: 8.5px; color: #728BC6}
.board .foot {display: none}

 

* STATISTICHE *

qui puoi modificare le scritte e il colore ---> della tabella statistiche.

 

/* STATISTICHE */
.stats .border {border: 2px dashed #b9908e}
.skin_tbl_border {background-color: #b9908e}
.stats .title2 {background-color: #b9908e; background-image: url(http://i178.photobucket.com/albums/w258/dedola2007/SPRING/BARRA02.png); background-repeat: repeat-x; border: 0; color: #1A1414 SCRITTA STATISTICHE}
.sunbar {background-color: #f3dcc3; color: #3f3939}
.highlight {color: #3f3939 FRECCETTA ACCANTO AL NICK}
.bar_left {width: 10px; background-image: url(http://i178.photobucket.com/albums/w258/dedola2007/SPRING/BARRA02.png); background-repeat: no-repeat}
.bar {background-image: url(http://i178.photobucket.com/albums/w258/dedola2007/SPRING/BARRA02.png); background-repeat: repeat-x}
.bar_right {width: 10px; background-image: url(http://i178.photobucket.com/albums/w258/dedola2007/SPRING/BARRA02.png); background-repeat: no-repeat}

 

* LINK MOD *

 

/* LINK MOD */
.highlight a:link, .highlight a:visited {color: #3f3939} .highlight a:hover {text-decoration: line-through}

 

* DISCUSSIONE *

 

qui puoi modificare le scritte e il colore ---> dell'area discussioni.

 

/* DISCUSSIONE */
.msg .msg_main {background-color: #f7e8d7; border: 1px solid #e9c49d; border-bottom: 0}
.left_top, .right_top, .left_bottom, .right_bottom {background-color:#f7e8d7; border: 1px solid #e9c49d; border-bottom: 0}
.nick {font-size: 12px; color: :#FF0000; padding-bottom: 2px}
.nick a:link, .nick a:visited {font-weight: boldl}
.left, .right {background-color: #fff2e3; border: 1px solid :#e9c49d; border-bottom: 0}
#quote {border: 1px solid #5F4D4D; border-top: 2px dotted #c09899; background-color: #f3dcc3; font-size: 8pt; padding: 2px; font-style: italic; color: #796161}
#code {border: 1px solid #c09899; background-color: #f3dcc3; border-left: 5px solid #c09899; color: #796161; font-size: 8pt; padding: 2px}
.color {font-size: 9.5pt; line-height: 150%}
.color a:hover {text-decoration: underline}
hr {color: #5f4d4d}
.fancyborder {background-color: #FF0000; border: 1px dashed #FF0000}
.edit {font-size: 9px; font-style: italic; color: #ae8383}
.bottomborder {border-bottom: 1px dashed #5f4d4d}
.signature {color: #FF0000; line-height: 150%}
.sep {height: 0}

 

* MESSENGER *

 

qui puoi modificare le scritte e il colore ---> dell'area messenger.

 

/* MESSENGER */
.msg_txt a:hover {text-decoration: underline}
.msg_main, .row1 {background-color: #f7e8d7; border: 1px solid #e9c49d; border-bottom: 0}
.row3 {background-color: #fdf8e6; border: 1px solid #e9c49d}
.title3, .darkbar {height: 23px; background-image: url(http://i178.photobucket.com/albums/w258/dedola2007/SPRING/BARRA02.png); background-repeat: repeat-x; background-position: bottom; background-color: #f3dcc3; border: 1px solid #D6B6A0; border-bottom: 0; font-weight: bold; color:#5f4d4d}
.title3 {border: 0}
height: 25px; font-weight: bold; color: #5f4d4d; background-color: #f7e8d7
.msg .details p {color: #5f4d4d; font-size: 10px; line-height: 150%}
.msg .details {font-size: 7.5pt}
.info {padding: 3px; background-color: #f7e8d7; color: #5f4d4d; border: 1px solid #e9c49d}
.alert {padding: 3px; background-color: #f3dcc3; color: #5f4d4d; border: 1px solid #5f4d4d}
.msg .darkline {color: #97866B; background-image: url(http://i178.photobucket.com/albums/w258/dedola2007/SPRING/BARRA02.png); background-repeat: repeat-x; background-position: bottom; background-color: #E7D9BB; border: 0 dashed #97866B}

 

* PROFILO UTENTI *

 

qui puoi modificare le scritte e il colore ---> del profilo utenti.

 

/* PROFILO UTENTI */
.pagetitle {font-size: 18px; font-weight: bold; letter-spacing: -1px; line-height: 120%}
.profile .title2 {height: 25px; font-weight: bold; background-color: #f7e8d7; border: 2px solid #e9c49d; border-bottom: 2px solid #e9c49d; color: #5e3441; border-top: 2px solid #e9c49d}
.profile .row1 {border: 0; background-color: #fff2e3}

 

* INPUT *

le parti che andrai  a modificare qui sono diverse ---> alcuni parti del messenger - barra sondaggio: barracen.png -  barrasin.png -  barrades.png.

 

/* INPUT */
.bar {background-image: url(http://i178.photobucket.com/albums/w258/dedola2007/newspring/barracen.png); background-repeat: repeat-x}
.bar_left {width: 3px; background-image: url(http://i178.photobucket.com/albums/w258/dedola2007/newspring/barrasin.png); background-repeat: no-repeat}
.bar_right {width: 3px; background-image: url(http://i178.photobucket.com/albums/w258/dedola2007/newspring/barrades.png); background-repeat: no-repeat}

.textinput, .forminput, .input, .codebuttons {border: 1px solid #ae8383; background-color: #fdf8e6; color: #5f4d4d; font-size: 7.5pt; font-family: verdana, helvetica, sans-serif; vertical-align: middle}
.forminput {font-size: 11px}
.codebuttons, .forminput {background-image: url(http://i178.photobucket.com/albums/w258/dedola2007/newspring/SFONDISCRITTE.png); background-repeat: repeat-x; background-position: bottom}
.menu .textinput, .menu .forminput {background-color: #FF0000; border-left: 1px solid #FF0000}
.msg .textinput {background-color: #fdf8e6; color: #5f4d4d; font-size: 8.5pt}
.msg .input, .msg .forminput {background-color: #fdf8e6}