Guida alla creazione di una Skin

Gaara il Kazekage

Posted on 28/6/2010, 13:06 by: Gaara il Kazekage

User deleted

Ecco a voi un Semplice tutorial Per creare una skin...
iniziamo col creare una barra larga 500px e alta 50px:

ora dividetela in tre parti, quella di destra, centro e sinistra:

ora facciamo la stessa cosa con la barra di sotto, solo che ora mettiamo 30px di altezza:

Ora possiamo passare alla parte più difficile ovvero quella di modificare i CSS

IL CODICE E DA INSERIRE IN "COLORI E STILI"

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(LINK BARRA DI SOPRA PARTE SINISTRA); background-repeat: no-repeat; background-position: bottom}
.mback_center {background-image: url(LINK BARRA SUPERIORE PARTE CENTRALE); background-repeat: repeat-x; background-position: bottom}
.mback_right {width: 150px; height: 35px; background-image: url(LINK BARRA SUPERIORE PARTE DESTRA); background-repeat: no-repeat; background-position: bottom}
.msub {height: 20px} .msub_left {width: 26px; height: 20px; background-image: url(LINK BARRA DI SOTTO PARTE SINISTRA); background-repeat: no-repeat}
.msub_center {background-image: url(LINK BARRA DI SOTTO PARTE CENTRALE); background-repeat: repeat-x}
.msub_right {width: 26px; height: 20px; background-image: url(LINK BARRA DI SOTTO PARTE DESTRA); background-repeat: no-repeat}
.mleft, .sep_left, .mright, .sep_right {width: 0}

IN "width212px; height:25px" dovete mettere le misure esatte, questo lo dovete fare qui

CODICE

.mback_left {width: 212px; height: 35px; background-image:

QUI

CODICE

mback_right {width: 150px; height: 35px; background-image:

QUI invece dovete fare la stessa cosa, ma con le misure esatte dei pezzi della barra di sotto:

CODICE

.msub {height: 20px} .msub_left {width: 26px; height: 20px; background-image: url

E QUI

CODICE

.msub_right {width: 26px; height: 20px; background-image: url

_______________________________________________________________

Ora con questo cod abbiamo la definizione generale della skin..,
Con questo cod possiamo cambiare tipo di scrittura(font) cambiare la grandezza di visualizazzione e colore...

CODICE

body {background-position: center; background-color: #FFFFFF; font-family: verdana, tahoma, arial; font-size: 8pt; color: #BBBBBB}
table, div {font-family: verdana, tahoma, arial; font-size: 7.5pt; color: #A09F9F}
a:link, a:visited {text-decoration: none; color: #888888}
a:hover {color: #949393}

QUI possiamo cambiare il tipo di scrittura, basta sostituire verdana con una font che a noi piace molto,come vedrete c'è anche 7,5pt ovvera la grandezza del font, modificando 7.5pt in (esempio) 10pt la
nostra font verrà visualizzata in modo più grande, dopo la grandezza della font c'è: color:#A09F9F a questo punto dobbiamo usare il generatore dei colori html perchè qui possiamo cambiare il colore delle scritte (normali no link)

CODICE

table, div {font-family: verdana, tahoma, arial; font-size: 7.5pt; color: #A09F9F}

Qui invece possiamo cambiare colore dei link.

CODICE

a:link, a:visited {text-decoration: none; color: #888888}

Qui invece possiamo cambiare il colore dei link "quando ci passiamo sopra con il cursore"
______________________________________________________________

Ora abbiamo

CODICE

/* SCRITTE ESTERNE */
.nav {font-weight: bold; font-size: 9pt}

dove e possibile modificare solo la scritta esterna, in questo caso: "( (Amministrazione) Naruto Shippuden Storm GDR spoiler 500 499 grafica episodi naruto one piece bleach 404 hentay hard film porno streaming »
il mio consiglio e di lasciare questo codice cosi com'è...
_______________________________________________________________

Ora invece potremmo cambiare le misure con del forum con questo codice:

CODICE

/* DIMENSIONI FORUM */
.header_width, .skin_tbl_width, .skin_tbl {width: 75%}
.stats .border {width: 76%}

bisogna modificare solo 75% e 76%.
________________________________________________________________

Qui invece si assegnano i colori in base ai ruoli e ai gruppi di appartenenza (sempre che i gruppi vengano poi creati); per default il forum avra' solo i primi 4 attivi

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}

________________________________________________________________

Invece ora possiamo modificare la barra utenti con questo cod:

CODICE

/* BARRA UTENTE */
.menu {height: 28px; background-image: url(Link IMG da usare per la barra utenti)}
.menu a:link, .menu a:visited {color: #888888}
.menu a:hover {color: #929191; text-decoration: none}

Qui invece possiamo modificare (come nel codice di prima) il colore dei link della barra utenti:
a:link,...... cambia il colore dei link
a:hover....... cambia il colore dei link quando ci si passa sopra con il cursore

CODICE

.menu a:link, .menu a:visited {color: #888888}
.menu a:hover {color: #929191; text-decoration: none}

[/CODE]
________________________________________________________________

Edited by Gaara il Kazekage - 28/6/2010, 18:52

15 replies since 28/6/2010, 13:06 139 views