-
.Introduzione
Questa guida si rivolge a chi è alle prime armi con i css. Tratterà gli attributi più utilizzati nelle skin di ForumFree.net, sono le basi per creare una skyn agli inizi puo sembrare difficile ma con la pratica diventerà semplice.Intro ai Css
Prima di tutto, cosa sono i css? CSS è l' acronimo di "Cascading Style Sheets", ovvero "Fogli di stile a cascata". Servono per realizzare la "parte grafica" delle pagine web.
Un foglio di stile è composto da un selettore e un blocco di dichiarazione. Che vuol dire? Prendiamo in esame un id molto semplice:CODICEEelemento {background-color: #FFF; color: #000}
Il selettore in questo caso èCODICEelemento
mentre il blocco di dichiarazione èCODICE{background-color: #FFF; color: #000}Il selettore
Il selettore può essere di due tipi:ID e CLASSE.
La sintassi del primo èCODICE#nome_del_div{attributi}
mentre le classi sonoCODICE.nome_della_classe{attributi}
La differenza sostanziale tra id e classe è che una classe può essere ripetuta più volta in un documento html(o php ecc..), mentre un id no. Il discorso fatto finora non serve a molto per quanto riguarda le skin, ma serve a chiarirci le idee su id e classi, in quanto sono entrambi presenti nel foglio di stile di Forumfree/Forumcommunity.Il blocco di dichiarazione
Il blocco di dichiarazione è composto dagli attributi. Gli attributi servono, appunto, ad attribuire delle qualità all' elemento a cui vengono assegnate. Prendiamo come esempio il seguente codice:CODICEclass {color: #FFF; background-color: #000}
L' elemento .class avrà il testo di colore bianco(#FFF) e lo sfondo di colore nero(#000). Prima di andare a vedere gli attributi piì utilizzati nelle skin, ecco alcune piccole "regolette":
- Ogni attributo deve finire con un ; (punto e virgola). E' obbligatorio, serve a dividere i diversi attributi.
- Ogni blocco di dichiarazione deve essere aperto da una { (parentesi graffa aperta) ed essere chiuso da un } (parentesi graffa chiusa).
- Se ci sono selettori (id/classi) con attributi identici, possimo "unirli" con una virgola, in questo modo:CODICE.class1, .class2 {attributi}
- Se un selettore (esempio: .title2) è contenuto dentro un altro (.stats), quest'ultimo si può personalizzare scrivendo .stats .title2Altezza e larghezza
Come avrete capito, servono a definire la larghezza e l' altezza di un attributo.L' altezza viene dichiarata con l' attributo height, mentre la larghezza con width.CODICE.class {height: 100px; width: 50px}
Il nostro elemento div avrà una larghezza di 50px e un' altezza di 100px.
Altezza e larghezza hanno delle unità di misura che sono:
-cm (centimetri)
-mm (millimetri)
-in (pollici)
-pt (punti)
-pc (pica)
-px (pixel)
-em (lunghezza lettera m)
-ex (altezza carattere x)Il testo
Ed eccoci giunti a uno degli attributi con i quali si può più spaziare. Esso ha varie proprietà, che sono:
-Font-size:
Indica la grandezza del font.Le unità di misura sono le stesse di altezza e larghezza.In più ci sono anche delle "parole", come xx-small, x-small, small, medium, large, x-large, xx-large.
-Font-family:
Indica il tipo di font(carattere) del testo.La sintassi è :CODICE.class {font-family: primofont, secondofont, terzofont}
Il browser, una volta caricato il foglio di stile della pagina, cercherà di usare il primo font.Se non disponibile, userà il secondo e così via.
Quando si imposta un font-family, bisogna sempre ricordare di mettere alla fine il nome di una famiglia generica.Su windows sono 5: * -serif
-sans-serif
-cursive
-fantasy
-monospace
I nomi dei font vanno divisi da virgole, mentre i font con un nome di più di una parola va messo tra virgolette.
-Line-height:
E' il cosidetto interlinea.Indica gli spazi tra le righe di testo.Le unità di misura sono quelle sopra citate per altezza e larghezza.In più si può definire con un semplice numero o una percentuale, anche se è sconsigliato usarla.
-Text-align:
Indica l' allineamento del testo.I suoi valori possono essere:
-left: Allinea il testo a sinistra
-right: Allinea il testo a destra
-center: Centra il testo
-justify: Giustifica il testo
-Text-decoration:
Indica le decorazioni del testo.I valori sono:
-none: Il testo non avrà decorazioni
-underline: Il testo sarà sottolineato
-overline: Il testo avrà una linea superiore
-line-through: Il testo sarà attraversato da una linea orizzontale al centro
-blink: Il testo sarà lampeggiante
-Letter-spacing:
E' lo spazio tra le lettere.Può essere normal, e quindi lo spazio sarà quello di default, o può essere indicato da un valore numerico seguito da un' unità di misura.
-Word-spacing:
E' lo spazio tra le parole.Vale lo stesso discorso di letter-spacing.
-Color:
Indica appunto il colore del testo. La sintassi è di vari tipi:CODICEclass {color: #RRGGBB}
#RRGGBB sta per RGB, acronimo di Red-Green-Blue.CODICEclass {color: #559900}
In questo caso, ad esempio, ci sarà una quantita di 55 di rosso, 99 di verde e 0 di blu.In questo caso avremmo anche potuto scrivereCODICEclass {color: #590}
Perchè quando i valori sono duplicati, si può anche scriverlo una sola volta.CODICE.class {color: rgb(0%,30%,40&}
In questo modo indichiamo i colori in percentuali.Le percentuali devono sempre essere precedute da rgb e devono per forza stare tra parentesi tonde.CODICE.class {color: rgb(0,0,0)}
In questo modo, abbiamo indicato i colori con unità di misura, tramite valori compresi tra 0 e 255.Anche in questo caso prima del colore va inserito rgb e i colori devo stare tra parentesi tonde.CODICE.class {color: red}
Il colore può anche essere inserito per nome.
Una cosa importante è che i colori, quando vengono inseriti in lettere , tranne nel caso in cui specifichiamo il nome del colore(color:red), bisogna scrivere sempre maiuscolo.
-Padding:
Il padding serve a creare degli "spazi" automaticamente.Esso è utile quando si vuole distanziare, ad esempio, il titolo della categoria da un margine del maintitle.La sintassi può essereCODICE.class {padding: 4px}
In questo caso, abbiamo messo il padding su tutti e quattro i lati.Invece conCODICE.class {padding-top: 4px}
abbiamo messo il padding solo dal margine superiore.Possiamo anche avere padding-left, padding-right e padding-bottom.Le unità di misura sono le stesse di altezza e larghezza.I bordi
L' attributo border serve, appunto, a dare un bordo ad un elemento.Come il padding, possiamo trovare o semplicemente border, oppure border-top, border-bottom, border-left, border-right.Nell' attributo border, ci sono 3 valori da "settare".Lo stile, lo spessore e il colore.
Per il colore, vale quanto detto sopra per il colore del testo.
Lo spessore ha le stesse unità di misura della larghezza e dell' altezza.
Lo stile può essere:
-none.
-hidden (Equivalente a none)
-dotted
-dashed
-solid
-double
-groove
-ridge
-inset
-outsetBackground-color e background-image
Background-color e background-image
Partiamo prima dal background-color.Come avrete capito, serve a dare un colore di sfondo ad un elemento.Vale lo stesso discorso del colore del testo, quindi è inutile ripetersi.
Per quanto riguarda background-image il discorso è diverso.La sintassi di background-image è:CODICE.class {background-image: url(indirizzoimmagine)}
Poi, si possono "settare" anche altri valori, come background-attachment, background-position, background-repeat.
-Background-attachment:
Può essere fixed o scroll.Con background-attachment:fixed, quando "scendiamo" in una pagina del forum, lo sfondo rimane fisso.Invece, con background-attachment:scroll, lo sfondo si "muoverà" insieme al forum.
-Background-position:
Può essere top, center, bottom, left, right.Serve a decidere la posizione dello sfondo.Di default, se non si inserisce nessun valore, è top left
-Background-repeat:
I valori possono essere no-repeat, repeat-x e repeat-y.Serve decidere se e in che modo l' immagine di sfondo deve ripetersi.Con no-repeat, lo sfondo sarà presente una sola volta.Con repeat-x lo sfondo si ripeterà in senso orizzontale, invece con repeat-y in senso verticale.
Maggiori dettagli QUI
Qui alcuni dettagli ed un esempio di skyn Link Esterno Link Esterno
. -
.
Ecco una guida utile su come creare ho modificare le tabelle, molto utili per aggiungere informazioni al vostro forum
Link Esterno
Qui trovate una guida alla grafica
Link Esterno e qui Link Esterno
Edited by Peppe-73 - 20/5/2010, 18:06. -
.
Vi metto a disposizione un CSS di base " ossia quello che trovate in Colori e Stili " da questo CSS di partenza che dovrete personalizzare in base alle vostre idee potrete iniziare a provarea a fare la vostra skyn, questo CSS una particolarità ha le descrizioni nei vari campi che dice a cosa si riferisce il codice.
Questo codice e realizzato dallo Skynner Exile84 trovate i crediti in fondo a questo forum.CODICE/* -------------------LOGO E SFONDO PRINCIPALE-------------------- */
/* SFONDO DEL LOGO PRINCIPALE */
.header {background-image: none; background-color: none}
/* ------ F I N E ------ */
/* POSZIONE DELLO SFONDO GENERALE(static, scroll) */
body {background-attachment: static}
/* ------ F I N E ------ */
/* --------------------------MENU UTENTE-------------------------- */
/* SFONDO DEL MENU' */
.menu {background-color: none}
.menu {background-image: url(http://....)}
/* DIMENSIONE DEL MENU' */
.menu {width: 800px; height: 40px}
/* SCRITTA "BENVENUTO" */
.menu {text-align: center; font-style: italic; text-decoration: none; font-weight: bold; font-size: 11px; font-family: segoe ui; color: #......}
/* LINK AL NOME UTENTE, MESSAGGI & OPZIONI */
.menu a:link, .menu a:visited {font-style: normal; font-weight: bold; font-size: 10px; font-family: segoe ui; text-decoration: none; color: #......}
.menu a:hover {font-style: normal; font-weight: bold; font-size: 10px; font-family: segoe ui; text-decoration: underline; color: #.......}
/* CASELLA DI RICERCA */
.menu .textinput {font-style: italic; font-weight: bold; font-size: 10px; font-family: segoe ui; text-decoration: none; color: black}
.menu .forminput {background-image: url(http://......); background-color: none; height: 23px; whidth: 55px}
/* MENU' UTENTI & GUIDA */
.menu_right {display:none} oppure .menu_right {text-align: center; font-style: italic; text-decoration: none; font-weight: bold; font-size: 11px; font-family: segoe ui; color: #......}
/* ------ F I N E ------ */
/* ---------------------MENU' DI NAVIGAZIONE---------------------- */
/* SCRITTA "AMMINISTRAZIONE" */
.nav a:link, .nav a:visited {text-align: left; font-style: normal; text-decoration: none; font-weight: none; font-size: 13px; font-family: segoe ui; color: #......}
.nav a:hover {text-align: left; font-style: normal; text-decoration: underline; font-weight: none; font-size: 13px; font-family: segoe ui; color: #......}
/* SCRITTE NAVIGAZIONE SEZIONI */
.nav {text-align: left; font-style: italic; text-decoration: none; font-weight: none; font-size: 13px; font-family: segoe ui; color: white}
.nav: hover {text-align: left; font-style: italic; text-decoration: underline; font-weight: none; font-size: 13px; font-family: segoe ui; color: #......}
/* SCRITTA "BENTORNATO, LA TUA ULTIMA VISITA..." */
.navsub {text-align: none; font-style: none; text-decoration: none; font-weight: none; font-size: 12px; font-family: segoe ui; color: #......}
/* LINK PRESENTI ALLA DESTRA DI "BENTORNATO..." */
.navsub a:link {text-align: none; font-style: none; text-decoration: underline; font-weight: none; font-size: 12px; font-family: segoe ui; color: #.......}
.navsub a:hover {text-align: none; font-style: none; text-decoration: underline; font-weight: none; font-size: 14px; font-family: segoe ui; color: #......}
/* ------ F I N E ------ */
/* -----------------LARGHEZZA COMPLESSIVA DEL FORUM--------------- */
/* CORPO DEL FORUM */
.skin_tbl {width: 80%}
/* STATISTICHE E SCRITTE ESTERNE */
.skin_tbl_width, .header_width, .stats .border {width: 78%}
/* -------------------------TAG BOARD---------------------------- */
/* LARGHEZZA DELLA TAGBOARD */
.tag .skin_tbl {width: 80%}
/* TITOLO DELLA TAGBOARD */
.tag .mtitle {color: #......; font-style: none; font-weight: bold; font-size: 16px; text-align: center; padding-left: 30px; font-family: segoe ui}
/* IMMAGINE-COLORE DI SFONDO PREDEFINITO */
.tag .mainbg {background-color: #........}
/* DIVISORE FRA VARIE RISPOSTE IN TAG */
.tag .aa, .tag .ww {border-bottom: 0 dotted black}
/* SCRITTE DELLA TAGBOARD */
.tag .aa {color: #.....; font-style: none; font-weight: none; font-family: segoe ui; font-size: 11px}
.tag .ww {color: #.......; font-style: none; font-weight: none; font-family: segoe ui; font-size: 11px}
/* LINK UTENTI IN TAGBOARD */
.tag .aa, .ww a:link, .tag .aa, .ww a:visited {color: #......; font-style: none; font-weight: none; font-family: segoe ui; font-size: 11px}
.tag .aa a:hover {color: #.....; font-style: none; font-weight: none; text-decoration: underline; font-family: segoe ui; font-size: 11px}
.tag .ww a:hover {color: #......; font-style: none; font-weight: none; text-decoration: underline; font-family: segoe ui; font-size: 11px}
/* PULSANTI DELLA TAGBOARD */
.tag .codebuttons {color: #.....; font-style: none; font-weight: none; font-family: segoe ui; font-size: 11px}
/* CASELLA DI TESTO IN TAGBOARD */
.tag .textinput {color: #........; font-style: italic; font-weight: none; font-family: segoe ui; font-size: 11px; width: 300px; height: 50px}
/* SFONDO DELLE RISPOSTE IN TAG LINEA .AA*/
.tag .aa {background-color: #.......}
/* ------ F I N E ------ */
/* -----------------CORNICE ATTORNO AL FORUM------------------- */
/* SCRITTE DEL BORDO SUPERIORE */
.mtitle {text-align: center; letter-spacing: 1px; word-spacing: 2px; margin-top: 30px; font-weight: bold; font-size: 12pt; font-family: segoe ui; color: #......; width: 90%}
/* BORDO SUPERIORE */
.mback {height: 70px; whidth: auto; background-image: url(http://......); background-repeat: repeat-x}
/* ANGOLO SUPERIORE SINISTRO */
.mleft_top {height: 70px; width: 40px; background-image: url(http://.......); background-repeat: no-repeat}
/* ANGOLO SUPERIORE DESTRO */
.mright_top {height: 70px; width: 40px; background-image: url(http://......); background-repeat: no-repeat}
/* BORDO DI SINISTRA */
.mleft {height: auto; width: 40px; background-image: url(http://.......); background-repeat: repeat-y}
/* ANGOLO INFERIORE SINISTRO */
.mleft_bottom {height: 40px; width: 40px; background-image: url(http://.....); background-repeat: no-repeat}
/* BORDO DI DESTRA */
.mright {height: auto; width: 40px; background-image: url(http://........); background-repeat: repeat-y}
/* ANGOLO INFERIORE DESTRO */
.mright_bottom {height: 40px; width: 40px; background-image: url(http://......); background-repeat: no-repeat}
/* BORDO INFERIORE */
.msub {height: 70px; whidth: auto; background-image: url(http://.......); background-repeat: repeat-x}
/* SFONDO GENERALE DI TUTTO IL FORUM */
.mainbg {background-color: #.....; background-repeat: repeat-x-y}
/* PULSANTI DI APERTURA/CHIUSURA -PLUS/MINUS */
.minus, .plus {border: 0 solid #888; width: 95px; height: 25px; margin-top: 30px}
.plus {background-image: url(http://.....)}
.minus {background-image: url(http://......)}
/* LOGO DESTRO PRESENTE SULLA CORNICE */
.mback_right {width: 20px; background: url(http://.....) no-repeat center right; height: 22px}
/* LOGO SINISTRO DA INSERIRE SULLA CORNICE */
.mback_left {width: 140px; height: 20px; margin-top: 60px; background: url(http://.....) no-repeat left bottom}
/* ------ F I N E ------ */
/*-----------------------------------------------------------------*/
/* ---------------IMPOSTAZIONI CONTENUTI DEL FORUM---------------- */
/* ----------------------CONTENUTI DEL FORUM---------------------- */
/* SFONDO SCRITTE SOPRA LA CORNICE */
.mtitle {background-image: none; background-color: none}
/* BARRA DEI TITOLI E SOTTOBARRA(Disc. Succ-Prec/ N° risp dal..*/
.title, .foot {font-weight: bold; font-family: segoe ui; font-size: 10px; color: black}
/* SFONDO BARRA DEI TITOLI(Disc. Secc-Prec)*/
.title {background-image: url(http://.....); repeat: repeat-x; background-color: none}
/* SFONDO SOTTOBARRA HOME PAGE */
.board .foot {background-image: url(http://.....); repeat: repeat-x; background-color: none}
/* SFONDO SOTTOBARRA(N° risp dal...) */
.foot {background-image: url(http://.....); repeat: repeat-x; background-color: none}
/* CORPO DELLE VARIE SEZIONI */
.aa {background-image: none; background-color: #.....}
.bb {background-image: none; background-color: #....}
.xx, .yy, .zz {background-image: none; background-color: #......}
/* CORPO DEI VARI TOPIC */
.forum .ww {background-image: none; background-color: #.....}
.cc {background-image: none; background-color: #.....}
/* LINEE DI SEPARAZIONE(Griglia che compone Forum) */
.aa, .bb, .xx, .yy, .ww, .cc, .zz {border-bottom: 1px solid #D5D5D5; border-right: 1px solid #.....}
/* TITOLI DELLE SEZIONI E DEI TOPIC */
.web {font-size: 11pt; font-family: segoe ui; text-decoration: none; line-height: 150%}
.web a:link, .web a:visited {font-size: 11pt; color: black; text-decoration: none; font-weight: none}
.web a:hover {font-size: 11pt; color: #2779E9; text-decoration: underline; font-weight: bold}
/* DESCRIZIONI E SOTTOTITOLI */
.desc {text-align: none; font-style: none; text-decoration: none; font-weight: none; font-size: 10px; font-family: segoe ui; color: #.....}
/* SCRITTE "NUMERO MESSAGGI", "AUTORE", ECC.. */
.xx, .cc, .yy {font-size: 10px; font-family: segoe ui; font-weight: none; color: #....}
/* DETTAGLI ULTIMO MESSAGGIO(Data, In:.., Di:..) */
.zz {font-size: 11px; font-family: segoe ui; font-weight: none; color: #.....}
/* DETTAGLI ULTIMO MESSAGGIO(In quale sezione, e autore) */
.board .zz a:link, .board .zz a:visited {font-size: 11px; font-family: segoe ui; font-weight: none; text-decoration: none; font-style: italic; color: #......}
.board .zz a:hover {font-size: 11px; font-family: segoe ui; font-weight: none; text-decoration: underline; font-style: italic; color: #.......}
/* SFONDO GENERALE DEI TOPIC, RISP RAPIDA E CASELLA DI RISPOSTA */
.topic .mainbg, .msg .mainbg {background-color: #......}
/* SFONDO GENERALE HOME PAGE /SEZIONI PRINCIPALI e SOTTOSEZIONI) */
.board .mainbg, .forum .mainbg {background-color: #.........}
/* ------ F I N E ------ */
/* ----------------IMPOSTAZIONI SONDAGGI E TOPIC------------------ */
/* BARRA ALTA DEI SONDAGGI */
.title2 {background-color: none; background-image: url(http://......); repeat: repat-x}
/* BARRA BASSA DEI SONDAGGI */
.row2 {background-color: none; background-image: url(http://.......); repeat: repat-y}
/* SCRITTE BARRE ALTA E BASSA DEI SONDAGGI */
.title2, .row2, a:link {font-weight: bold; font-family: segoe ui; font-size: 11px; color: #......}
.title2, .row2, a:visited {font-weight: bold; font-family: segoe ui; font-size: 11px; color: #......}
.title2, .row2, a:hover {font-weight: bold; font-family: segoe ui; font-size: 11px; color: #.......}
/* RISPOSTE DEL SONDAGGIO E ANTEPRIMA DEI VARI MESSAGGI */
.row1 {font-weight: none; font-family: segoe ui; font-size: 13px; text-decoration: none; font-style: none; color: black}
.row1 {background-color: #......}
/* DIVISORE FRA LE VARIE RISPOSTE DEL SONDAGGIO */
.row1 {border-bottom: 1px dotted #.......}
/* BARRE GRAFICHE PERCENTUALI DELLE VOTAZIONI */
.bar {background-image: url(http://......)}
.bar_left {background-image: url(http://........)}
.bar_right {background-image: url(http://......)}
/* ------ F I N E ------ */
/* -------------------IMPOSTAZIONI DEL TOPIC-------------------- */
/* PARTE ALTA DX: Inviato il...e PULSANTI MODIF, QUOTA:... */
.right_top {background-image: url(http://........); repeat: repeat-x; background-color: none}
/* PARTE ALTA SX: Dove c'è nome utente sopra avatar */
.left_top {background-image: url(http://........); repeat: repeat-x; background-color: none}
/* PARTE ALTA APPENA SOTTO LA CORNICE AERO */
.topic .title {background-image: none; background-color: #......}
/* BORDI CHE COMPONGONO UN TOPIC */
.left {border-right: 1px dotted #.....}
/* SFONDO GENERALE DI UN TOPIC O UNA RISPOSTA */
.right {background-image: none; background-color: #......}
/* DIVISORE FRA LE VARIE RISPOSTE DI UN TOPIC */
.sep_left {display:none}
.sep {display:none}
.sep_right {display:none}
/* NICKNAME SOPRA L'AVATAR */
.nick a:link, .nick a:visited {font-weight: bold; font-family: segoe ui; font-size: 12px; text-decoration: none; font-style: none; color: #.....}
.nick a:hover {font-weight: bold; font-family: segoe ui; font-size: 12px; text-decoration: underline; font-style: none; color: #......}
/* DETTAGLI APPARTENENZA GRUPPO */
.details p {font-weight: bold; font-family: segoe ui; font-size: 11px; text-decoration: none; font-style: none; color: #.....}
/* DETTAGLI DEL PROPRIO PROFILO */
.details {font-weight: none; font-family: segoe ui; font-size: 11px; text-decoration: none; font-style: none; color: #......}
/* TIPO DEL CARATTERE NEL TOPIC E DEI VARI LINK */
.right {font-weight: none; font-family: segoe ui; font-size: 12px; text-decoration: none; font-style: none; color: #......}
.right a:link, .right a:visited {font-weight: none; font-family: segoe ui; font-size: 15px; text-decoration: underline; font-style: italic; color: #.......}
.right a:hover {font-weight: none; font-family: segoe ui; font-size: 15px; text-decoration: underline; font-style: italic; color: #......}
/* SCRITTA "CITAZIONE" SOPRA AL RIQUADRO QUOTE */
.quote_top {font-weight: none; font-family: segoe ui; font-size: 11px; text-decoration: none; font-style: italic; color: #......}
/* RIQUADRO DELLE CITAZIONI O QUOTE*/
#quote {font-family: segoe ui; font-size: 12pt; font-style: italic; color: #000; background-color: #......; filter:progid:dximagetransform.microsoft.gradient(gradienttype=0, startcolorstr=#B2CDFF, endcolorstr=#528FFD); border: 1px solid #528FFD; padding: 2px}
/* SCRITTA "SPOILER" E "CODICE" SOPRA AL RIQUADRO CODE, SPOILER */
.code_top {font-weight: none; font-family: segoe ui; font-size: 11px; text-decoration: none; font-style: italic; color: #.......}
/* RIQUADRO DELLO SPOILER E DEL CODICE */
#code {font-size: 12pt; font-family: courier; color: #000; background-color: #.........; filter:progid:dximagetransform.microsoft.gradient(gradienttype=0, startcolorstr=#FAB5BA, endcolorstr=#FF4E5B); border: 1px solid #FF4E5B; padding: 2px}
/* SCRITTA IN BASSO AL TOPIC "MODIFICATO DA..." */
.edit {font-weight: none; font-family: segoe ui; font-size: 10px; text-decoration: none; font-style: italic; color: #.......}
/* DIVISORE FRA TOPIC E FIRMA PERSONALE */
.bottomborder {border-bottom: 1px dashed #.....}
/* PULSANTI DELLA RISPOSTA RAPIDA */
#board .codebuttons {color: #....; font-style: none; font-weight: none; font-family: segoe ui; font-size: 11px}
/* PULSANTI "AGGIUNGI LA RISPOSTA" E "ANTEPRIMA" */
.forminput {color: #.....; font-style: none; font-weight: none; font-family: segoe ui; font-size: 11px}
/* LINK PRESENTI IN RISPOSTA RAPIDA */
#board a:link, #board a:visited {color: #.....; font-style: none; font-weight: none; font-family: segoe ui; font-size: 11px}
#board a:hover {color: #.......; font-style: none; font-weight: none; font-family: segoe ui; font-size: 11px}
/* SFONDO GENERICO DE RISPOSTA RAPIDA */
#board .msg_main {background-color: #.......}
/* CASELLA DI TESTO IN RISPOSTA RAPIDA, NUOVO TOPIC E RISPONDI */
.msg .textinput {color: #......; font-style: none; font-weight: none; font-family: segoe ui; font-size: 12px}
/* MESSAGGI DI ERRORE */
.alert {color: #......; font-style: italic; font-weight: bold; font-family: segoe ui; font-size: 11px; text-decoration: underline}
/* SCRITTA "NON CI SONO DISCUSSIONI" */
.forum .aa b {color: #........; font-style: none; font-weight: bold; font-family: segoe ui; font-size: 12px}
/* ------ F I N E ------*/
/* --------------------------NUOVO TOPIC------------------------ */
/* PULSANTI */
.msg .codebuttons {color: #......; font-style: none; font-weight: none; font-family: segoe ui; font-size: 11px}
/* LINK SELEZIONABILI */
.msg a:link, .msg a:visited {color: #.......; font-style: none; font-weight: none; font-family: segoe ui; font-size: 11px}
.msg a:hover {color: #59C4FF; font-style: none; font-weight: none; font-family: segoe ui; font-size: 11px}
/* SFONDO GENERICO TOPIC, RISPONDI */
.msg .msg_main, .darkbar {background-color: #.....}
/* TUTTO LE ALTRE SCRITTE */
.msg_txt {color: #......; font-style: none; font-weight: none; font-family: segoe ui; font-size: 11px}
.msg .darkbar {color: #.....; font-style: none; font-weight: none; font-family: segoe ui; font-size: 11px}
/* RIGHE DI SEPARAZIONI DLLE FUNZIONI */
.msg .mainbg {background-color: #.......}
/* SFONDO FUNZIONI */
.msg .darkbar {background-color: #........}
/* SCRITTA "FACCINE" e "ALTRE FACCINE */
.row3 {color: #......; font-style: italic; font-weight: none; font-family: segoe ui; font-size: 12px}
/* LINEA GENERALE -HR- */
hr {color: #......}
/*-----------------------------------------------------------------*/
/* ------ F I N E ------ */
*/ --------------------------STATISTICHE-------------------------- */
/* BORDO DELLA TABELLA STATISTICHE */
.stats .skin_tbl_border {border: 1px solid #......}
.stats .border {background-color: white; border: 1px solid #......; padding: 0}
/* SFONDO DELLA BARRA PRINCIPALE ALTA STAT */
.stats .title2 {background-color: #.......}
.stats .sunbar {background-color: #.......}
/* SCRITTA "STATISTICHE" BORDO ALTO */
.stats .title2 {font-family: segoe ui; font-size: 18px; font-weight: bold; font-style: italic; text-decoration: underline; color: #......; text-align: right; letter-spacing: 4px}
/* BORDO INTERNO, TITOLO PRINCIPALE */
.border .title2 {padding-left: 21px}
/* SFONDO DEI SOTTOTITOLI */
.sunbar {background-color: #........}
/* SCRITTE DEI SOTTOTITOLI */
.sunbar {font-family: segoe ui; font-size: 11px; font-weight: bold; text-decoration: underline; text align: center; color: #......}
/* CORPO DELLE STATISTICHE */
.stats .ww {width: 0%; padding: 10px; background-image:none}
.stats .aa {width: 100%; background-image:none; padding: 10px}
/* SCRITTE UTENTI, LEGENDE, ECC.. */
.stats .aa {color: #.....; font-family: segoe ui; font-weight: none; font-style: none; font-size: 11px}
.stats .aa a:hover {color: #.......; font-family: segoe ui; font-weight: bold; font-style: italic; text-decoration: underline; font-size: 11px}
.stats .ww a:link, .aa a:visited {color: #......; font-style: none}
/* SCRITTE DETTAGLI FORUM E POSIZIONE IN TOP FORUM */
.stats .ww {color: #......; font-family: segoe ui; font-weight: none; font-style: none; font-size: 11px}
.stats .ww a:hover {color: #......; font-family: segoe ui; font-weight: bold; font-style: italic; text-decoration: underline; font-size: 11px}
.stats .aa a:link, .aa a:visited {color: #......; font-style: none}
/* ------ F I N E ------ */
/* ---------------COLORI GRUPPI E UTENTI ATTIVI------------------ */
.amministratore {color: #F40000; font-weight: bold; font-size: 11px}
.moderatore {color: #002EF4; font-weight: bold; font-size: 11px}
.utente {color: #00ACF4; font-weight: bold; font-size 11px}
.daconvalidare {color: #B5B5B5; font-style: italic; font-size: 11px}
.gruppo1 {color: #B980FF; font-weight: bold; font-size: 11px}
.gruppo2 {color: #80A9FF; font-weight: bold; font-size: 11px}
.gruppo3 {color: #95DDFF; font-weight: bold; font-size: 11px}
.gruppo4 {color: #9FEF50; font-weight: bold; font-size: 11px}
.gruppo5 {color: #FFF000; font-weight: bold; font-size: 11px}
.gruppo6 {color: #FFB56A; font-weight: bold; font-size: 11px}
/* ------ F I N E ------ */
/* --------IMPOSTAZIONI RIGUARDANTI AL PROFILO E MODIFICA-------- */
.pagetitle {font-size: 25px; font-weight: bold; font-style: none; letter-spacing: 2px; word-spacing: 4px; font-family: segue ui}
.pagetitle a:link, .pagetitle a:visited {font-size: 25px; font-weight: bold; font-style: italic; letter-spacing: 2px; word-spacing: 4px; font-family: segue ui}
/* -------------------IMPOSTAZIONI DEL MESSENGER------------------ */
/* SFONDO DEI SOTTOTITOLI */
.title3 {background-image: none; background-color: #.....}
/* SCRITTE DEI SOTTOTITOLI */
.msg .title {font-weight: bold; font-family: segoe ui; font-size: 10px; color: black}
/* ------ F I N E ------ */
/* -------------------IMPOSTAZIONI DELLE FIRME-------------------- */
/* ALTEZZA E LARGHEZZA DELLE FIRME */
.signature {overflow: auto; height: 200px; width: auto}
/* ------ F I N E ------*/
/* --------------------------------------------------------------- */.
Home Page
Regolamento
Abilitazione Fans
Guida al Forum
Web
