-
|
| .
|
|
|
|
Vi siete mai chiesti come alcuni forum hanno una tagboard diversa dal resto della Skin??Volete anche vuoi provare qualcosa di diverso???Bene seguite questo tutorial e anche voi potrete avete una TagBoard personalizzata =)
-Allora partite con il fare una skin oppure sceglierla tra quelle già belle e pronte (io scelgo una mia xxxxx)
-La tagboard non mi piace perchè è troppo ingombrante,vorrei qualcosa di più "normale" allora vado in AMMINISTRAZIONE-GRAFICA-COLORI E STILI e inizio man mano a mettere questo codice:
CODICE /* TAG */
.tag .skin_tbl_width, .tag .skin_tbl {width: numeroqualsiasi%; border: numeroqualsiasipx dashed #colore; background-color: #colore; padding: numeroqualsiasipx}
Width=è la lunghezza del "contorno della tagboard"
il background-color=è il contorno della tagboard che nell'immagine di sotto è rappresentato da quel contorno rosato
il padding è lo spazio di stacco della tabella,consiglierei un numero piccolo...tipo 2 o 3
CODICE .tag .mainbg {background-color: #coloreapiacere}
.tag .mtitle {text-align: center/left/right; padding-top: 3px; padding: 0; font-weight: bold; font-size: grandezzafontpx; color: #sceglicolore; text-transform: uppercase; font-style: normal}
-il tag.mainbg è una linea che divide la cella superiore da quella dei messaggi
-il tag.mtitle è invece il titolo che comparirà sulla vostra tagboard,dovete fare gli opportuni cambiamenti nel codice per avere questo risultato:
CODICE .tag .mback {height: 5px; background-image: immagine; background-color: #colorebasedellabarra}
.tag .msub {height: 5px; background-image: immagine; background-color: #colorebasedellabarra; margin-bottom: 0}
.tag .mback_center, .tag .mback_left, .tag .mback_right {background-image:immagine; width: 5px; height: 5px}
.tag .msub_center, .tag .msub_left, .tag .msub_right {background-image: immagine; width: 5px; height: 5px}
.tag .mleft, .tag .mright {width: 5px; background-image:immagine; background-color: #colorebasedellabarra}
.tag .mleft_top, .tag .mright_top {height: 5px; width: 5px; background-image: immagine; background-color: #colorebasedellabarra; background-repeat: no-repeat}
.tag .mleft_bottom, .tag .mright_bottom {height: 5px; width: 5px; background-image:immagine; background-repeat: no-repeat; background-color: #coloredellabarra}
questa è la parte più importante perchè ci permette di cambiare lo stile delle barre attorno alla tagboard. Dovete scegliere se usare delle immagini o semplicemente un colore quindi o il background-image o quello color.
Il mio risultato usando solo il colore base e mettendo NONE al background-image è questo:
CODICE .tag .ww {background-color: #colorebase; color: #colorescrittura; border: 0; font-size: grandezzatestopx; background-image: none; background-position: bottom; letter-spacing: 0}
questa parte ci permetterà di colorare l'interno della tagboard cioè dove arrivano i messaggi in questo modo:
CODICE .tag .aa {background-color: #colorebase; color: #coloretesto; border: 0; font-size: grandezzatestopx; background-image: none; background-position: bottom; letter-spacing: 0}
quest'altro codice ci permetterà di colorare le altre caselle di testo
questi ultimi codici servono a cambiare colore dei nick o del testo all'interno della tagboard
CODICE .tag .ww a:link, .tag .ww a:visited {text-decoration: none; color: #coloretesto; letter-spacing: 0; font-size: grandezzapx}
.tag .aa a:link, .tag .aa a:visited {text-decoration: none; color: #coloretesto; letter-spacing: 0; font-size: grandezzapx}
.tag .ww a:hover, .tag .aa a:hover {text-decoration: none; color: #coloretesto; letter-spacing: 0; font-size: grandezzapx}
Eccoco la nostra TAGBOARD personalizzata finita =)
|
|
|
| .
|
0 replies since 7/7/2011, 11:25 27 views
.
CODICE.tag .mback {height: 5px; background-image: immagine; background-color: #colorebasedellabarra}
CODICE.tag .ww {background-color: #colorebase; color: #colorescrittura; border: 0; font-size: grandezzatestopx; background-image: none; background-position: bottom; letter-spacing: 0}
CODICE.tag .aa {background-color: #colorebase; color: #coloretesto; border: 0; font-size: grandezzatestopx; background-image: none; background-position: bottom; letter-spacing: 0}
.
