Salve utenti Dello Sciax2.it/Forum!
Dato che molti provano ancora difficoltà nella craezione di una skin per
Forumcommunity/Forumfree, Per questo creo una guida per farlo.
Premetto che per evitare violazione di Diritti o simili, useremo la skin base
di forumfree come skin "vergine".
Andiamo su forumfree.net o forumcommunity.net e creiamo un forum.
A questo punto andiamo nel pannello di amministrazione->Modifica colori e
stili.
Bene, lasciando il nostro browser su quella pagina creiamo un file di testo sul
nostro pc e rinominiamolo " Skin ".
Bene, a questo punto ritorniamo su "modifica colori e stili e copiamo il tutto.
E andiamo ad incollare il tutto nel file di testo che prima abbiamo rinominato
"skin" {Senza Apici}.
La parte iniziale è fatta, ora passiamo alla parte difficile
Iniziamo cambiando la skin Sezione per sezione o riga per riga :ragione:
Vediamo la prima riga della skin...
E iniziamo a modificare, ma prima di farlo voglio premettere che quì andreamo a modificare le impostazioni del Body, quindi di tutto quello che è compreso tra l'elemento (Tag) Body {<body></body>}
Ora modifichiamo:
Margin-bottom: Lasciamo 20 px
Background-color: in questo caso si deve cambiare il colore di sfondo{Sempre se non mettiamo una img di sfondo} in questo caso c'è #FFF che sarebbe l'abbreviazione del codice esadecimale #FFFFFF {Esadecimale = #RRGGBB} che rappresenta il colore BIANCO.
Io lo cambio in #000000 ovvero il nero.
Font-family: Questa scritta decide di che "famiglia" deve essere la scritta,in questo caso, la principale è: verdana, nel caso non fosse installato il verdana nel pc si visualizza il tahoma e nel caso non si visualizzasse neanche quest'ultimo, si passerebbe all'arial.
Io modifico da: Font-family:verdana, tahoma, arial; a : Font-family:"Comic Sans Ms", tahoma, arial; . e quindi il codice ora è così:
Font-size: decide la dimensione del font, io la cambio in 13 px.
color: Decide il colore delle scritte, io lo cambio in #ef0000 ovvero un rosso abbastanza scuro.
Abbiamo finito la prima riga ò_ò
Quindi il codice ora è:
Passiamo il codice su modifica colori e stili e facciamo registra modifiche {Non chiudete il file "skin" {Senza apici} perchè questa è solo una prova per vedere come sta venendo la skin.
A me è venuta così:
Ritorniamo al file di testo Skin.
Analizziamo la 2° Riga.
table,div: Decide che questo codice andrà per OGNI tabella o per ogni div.
P.s. dato che il forum è formato tutto da tabelle e da div, è fondamentale questa "stringa".
font-size: Come detto prima la dimensione del testo, io metto 13px.
color: Come detto prima questo stà per indicare il colore del testo. Io scelgo #ef0000.
Quindi ora il codice che abbiamo modificato è il seguente:
Facciamo come prima, apriamo modifica colori e stili ed applichiamo tutto il codice.
Ora, ritorniamo sul file skin.txt e prendiamo in considerazione la terza e quarta riga:
Questa, indica come devono essere gli a href, ovvero i collegamenti ad altre pagine.
Apportiamo qualche modifica:
Così, facciamo che i link di base sono di colore blu scuretto, mentre quando ci passiamo sopra con il mouse diventano di 15 px e di un colore rosso abbastanza scuro. Naturalmente ora il codice che abbiamo è:
Incolliamo il tutto in modifica colori e stili e vediamo l'effetto quando passiamo su un link...
Saltiamo le Scritte esterne {/* SCRITTE ESTERNE */}.
Passiamo a questa parte di codice:
/* DIMENSIONI FORUM */ è un commento, quindi non va modificato.
.skin_tbl_width, .skin_tbl, .headert_widht {widht 86%}: Indica quanto deve essere largo il forum. Io lascio 86 %.
.stats .border {width: 87%} sarebbe la larghezza della barra delle statistiche:
Io lascio 87 % .
Quindi ora il nostro codice è così:
Naturalmente non posto screen perchè dato che ora non ho apportato modifiche non c'è bisogno di fare screen perchè il forum è uguale a prima.
Saltiamo la parte:
Perchè stanno ad indicare i colori dei gruppi.
Soffermiamoci sul codice:
Perchè questa è la parte GRAFICA essenziale della skin.
Iniziamo analizzando la prima riga:
height 32 px: Decidiamo l'altezza di questa barra:
background-image: url (
Io modifico questa img con la mia cioè:
background-repeat:repeat-x: Ovvero fa ripetere quell'img piccolina da sinistra verso destra.
border-top: 1px solid #9DA1A6 : Indica che il bordo al di sopra della img sarà di un px e del colore #9DA1A6.
border-bottom:1px solid #899199: indica che il bordo di sotto sarà di 1 pixel e del colore #899199.
Ora il nostro codice sarà:
Ecco come è ora il forum:
Ora vediamo la seconda stringa:
Quì da modifica è solo l'immagine, ovvero:
background-image: url(Immagine): Io ho messo al posto di
una immagine 8 x 8 pixel { Deve essere questa la dim. sennò non si vede bene} creata da me.
Ovvero:
Poi se volete apportare altre modifiche... Fate pure!
Ecco come si presenta il codice ora:
Quindi ora il forum è così:
Bene, ora, dato che abbiamo dimestichezza col codice, non sto a descrivere Tutto precisamente anche perchè devo andare.
Le 2 righe dopo queste le saltiamo quindi prendiamo in considerazione:
.mback_left{
width: 10 px: sarebbe la larghezza dell'img che metteremo
background-image: url(
background-repeat:repeat-y: l'img viene ripetuta dall'alto verso il basso{ se troppo piccola}.
Questo vale anche per il .mback_right ma quest'ultimo è a destra.
Bene, modificato questo, la nostra skin è finita.
Appena posso amplierò la guida.
Per ora, però... La skin va bene no? ^^
:bye: !
P.s. : guida INTERAMENTE by ignazio96. Vietata la copia senza permesso.
Dato che molti provano ancora difficoltà nella craezione di una skin per
Forumcommunity/Forumfree, Per questo creo una guida per farlo.
Premetto che per evitare violazione di Diritti o simili, useremo la skin base
di forumfree come skin "vergine".
Andiamo su forumfree.net o forumcommunity.net e creiamo un forum.
A questo punto andiamo nel pannello di amministrazione->Modifica colori e
stili.
Bene, lasciando il nostro browser su quella pagina creiamo un file di testo sul
nostro pc e rinominiamolo " Skin ".
Bene, a questo punto ritorniamo su "modifica colori e stili e copiamo il tutto.
E andiamo ad incollare il tutto nel file di testo che prima abbiamo rinominato
"skin" {Senza Apici}.
La parte iniziale è fatta, ora passiamo alla parte difficile
Iniziamo cambiando la skin Sezione per sezione o riga per riga :ragione:
Vediamo la prima riga della skin...
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
E iniziamo a modificare, ma prima di farlo voglio premettere che quì andreamo a modificare le impostazioni del Body, quindi di tutto quello che è compreso tra l'elemento (Tag) Body {<body></body>}
Ora modifichiamo:
Margin-bottom: Lasciamo 20 px
Background-color: in questo caso si deve cambiare il colore di sfondo{Sempre se non mettiamo una img di sfondo} in questo caso c'è #FFF che sarebbe l'abbreviazione del codice esadecimale #FFFFFF {Esadecimale = #RRGGBB} che rappresenta il colore BIANCO.
Io lo cambio in #000000 ovvero il nero.
Font-family: Questa scritta decide di che "famiglia" deve essere la scritta,in questo caso, la principale è: verdana, nel caso non fosse installato il verdana nel pc si visualizza il tahoma e nel caso non si visualizzasse neanche quest'ultimo, si passerebbe all'arial.
Io modifico da: Font-family:verdana, tahoma, arial; a : Font-family:"Comic Sans Ms", tahoma, arial; . e quindi il codice ora è così:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Font-size: decide la dimensione del font, io la cambio in 13 px.
color: Decide il colore delle scritte, io lo cambio in #ef0000 ovvero un rosso abbastanza scuro.
Abbiamo finito la prima riga ò_ò
Quindi il codice ora è:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Passiamo il codice su modifica colori e stili e facciamo registra modifiche {Non chiudete il file "skin" {Senza apici} perchè questa è solo una prova per vedere come sta venendo la skin.
A me è venuta così:
Ritorniamo al file di testo Skin.
Analizziamo la 2° Riga.
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
table,div: Decide che questo codice andrà per OGNI tabella o per ogni div.
P.s. dato che il forum è formato tutto da tabelle e da div, è fondamentale questa "stringa".
font-size: Come detto prima la dimensione del testo, io metto 13px.
color: Come detto prima questo stà per indicare il colore del testo. Io scelgo #ef0000.
Quindi ora il codice che abbiamo modificato è il seguente:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Facciamo come prima, apriamo modifica colori e stili ed applichiamo tutto il codice.
Ora, ritorniamo sul file skin.txt e prendiamo in considerazione la terza e quarta riga:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Questa, indica come devono essere gli a href, ovvero i collegamenti ad altre pagine.
Apportiamo qualche modifica:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Così, facciamo che i link di base sono di colore blu scuretto, mentre quando ci passiamo sopra con il mouse diventano di 15 px e di un colore rosso abbastanza scuro. Naturalmente ora il codice che abbiamo è:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Incolliamo il tutto in modifica colori e stili e vediamo l'effetto quando passiamo su un link...
Saltiamo le Scritte esterne {/* SCRITTE ESTERNE */}.
Passiamo a questa parte di codice:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
/* DIMENSIONI FORUM */ è un commento, quindi non va modificato.
.skin_tbl_width, .skin_tbl, .headert_widht {widht 86%}: Indica quanto deve essere largo il forum. Io lascio 86 %.
.stats .border {width: 87%} sarebbe la larghezza della barra delle statistiche:
Io lascio 87 % .
Quindi ora il nostro codice è così:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Naturalmente non posto screen perchè dato che ora non ho apportato modifiche non c'è bisogno di fare screen perchè il forum è uguale a prima.
Saltiamo la parte:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Perchè stanno ad indicare i colori dei gruppi.
Soffermiamoci sul codice:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Perchè questa è la parte GRAFICA essenziale della skin.
Iniziamo analizzando la prima riga:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
height 32 px: Decidiamo l'altezza di questa barra:
background-image: url (
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
L'immagine di sfondo che ricoprirà questa riga :
Io modifico questa img con la mia cioè:
background-repeat:repeat-x: Ovvero fa ripetere quell'img piccolina da sinistra verso destra.
border-top: 1px solid #9DA1A6 : Indica che il bordo al di sopra della img sarà di un px e del colore #9DA1A6.
border-bottom:1px solid #899199: indica che il bordo di sotto sarà di 1 pixel e del colore #899199.
Ora il nostro codice sarà:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Ecco come è ora il forum:
Ora vediamo la seconda stringa:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Quì da modifica è solo l'immagine, ovvero:
background-image: url(Immagine): Io ho messo al posto di
Ovvero:
Poi se volete apportare altre modifiche... Fate pure!
Ecco come si presenta il codice ora:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Quindi ora il forum è così:
Bene, ora, dato che abbiamo dimestichezza col codice, non sto a descrivere Tutto precisamente anche perchè devo andare.
Le 2 righe dopo queste le saltiamo quindi prendiamo in considerazione:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
.mback_left{
width: 10 px: sarebbe la larghezza dell'img che metteremo
background-image: url(
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
sarebbe l'url dell'img che vogliamo mettere a sinistrabackground-repeat:repeat-y: l'img viene ripetuta dall'alto verso il basso{ se troppo piccola}.
Questo vale anche per il .mback_right ma quest'ultimo è a destra.
Bene, modificato questo, la nostra skin è finita.
Appena posso amplierò la guida.
Per ora, però... La skin va bene no? ^^
:bye: !
P.s. : guida INTERAMENTE by ignazio96. Vietata la copia senza permesso.
