1. GUIDA CREAZIONE SKIN: I PRIMI PASSI
In questa guida imparerete a creare un nuovo forum, che userete come base per le vostre skin.
Premetto che potete crearlo sia in ForumCommunity che in ForumFree, i procedimenti sono
identici.
Per prima cosa dovete cliccare su Crea il Forum, che si trova nel pannello a sinistra in Home.
Ora dovete scegliere il nome, il dominio e il nome delle sezioni del vostro forum.
La descrizione non è obbligatoria e andrà sotto al nome della sezione.
Sia per il nome che per il dominio io vi consiglio di aggiungere prova.
In questo modo gli amministratori di ForumCommunity/Forumfree sapranno che si tratta di un
forum di prova. A me è successo che è stato cancellato un forum che usavo come prova, perchè
avevo scritto semplicemente skinrosa.
Leggete con molta attenzione i Termini di Servizio.
Il punto più importante è questo:
-I siti inattivi per almeno 12 mesi (ultimo post risalente a più di 12 mesi fa) vengono cancellati
automaticamente. I siti senza nessun post vengono cancellati dopo 1 mese.
Quindi per ogni sezione aprite un topic. Potete anche scrivere bla bla bla. Non è importante il
contenuto.
Potete anche scegliere una skin personalizzabile, ma non vi soffermate più di tanto, perchè sarà
possibile cambiarla nel pannello amministrazione.
Ora cliccate su Crea il tuo forum.
Il vostro forum è stato creato. Io l'ho chiamato skinprovaguida.
Cliccateci sopra e aprite i topic per ogni sezione!
Dovete aspettare 40 secondi per scrivere un nuovo topic.
Poi cliccate vicino al nome del vostro forum su “Amministrazione”
Voi siete fondatori del forum, per continuare è bene leggere questa piccola guida:
http://www.forumcommunity.net/?l=0&wiki=Fondatore
Ci sono diverse voci correlate, è importante leggerle se siete alle prime armi.
Io vi consiglio di leggere anche la voce “Amministratore”.
Vi illustrerò ora il pannello Amministrazione.
Essendo fondatori avete queste voci. “Sito Web, Utenti, Grafica, Funzioni Aggiuntive”.
Cliccando sopra a Sito web avete un elenco dei vostri poteri.
Nome e dominio -->potete cambiare il Nome e domino del vostro forum
Restrizioni accesso-->avete la possibilità di far accedere o con una password o solo determinati
utenti.
Gestioni sezioni-->avete la possibilità di creare delle sottosezioni, cambiare la posizione delle
sezioni e decidere chi può accedere alle sezioni. Per i dettagli cliccate su Guida Rapida.
Gestione blog--> potete trasformare le sezioni in un blog
Crea/Rimuovi sezioni-->potete creare o rimuovere delle sezioni
Trasferisci sezioni--> potete trasferire le sezioni in un altro forum
Cancella sito--> potete cancellare il vostro forum. Prima di farlo dovete cancellare ogni sezione
Logs-->potete visualizzare le azioni degli amministratori e dei moderatori
Cliccando su Utenti avete la possibilità di inserire Amministratori e Moderatori nel vostro forum,
creare dei gruppi, bannare un utente, convalidare un utente, cancellare un utente, modificare un
nome utente. In livelli avete la possibilità di configurare i livelli che i vostri utenti otterranno in base
al numero dei messaggi scritti. Inoltre potete gestire anche le firme e gli avatars stabilendo la
lunghezza o l'altezza massima o stabilendo se saranno visibili nel forum.
Per creare una nostra skin ci interessa la Grafica.
Cliccandoci sopra abbiamo otto voci: Codice Html, Logo, Skin, Sfondo, Immagini, Colori e stili,
Allegati, Emoticons.
Come prima cosa dobbiamo decidere la nostra skin di base.
Ci sono sia skin personalizzabili e sia skin predefinite.

2. Noi dobbiamo modificare interamente una skin, quindi è consigliabile usare una skin predefinita.
La migliore da usare come base, secondo me è iCGstation.
La skin è stata installata con dei codici che noi possiamo vedere nei Colori e Stili.
Il codice è in linguaggio CSS.
Il CSS è l' acronimo di "Cascading Style Sheets", cioè "Fogli di stile a cascata" e sono la tecnologia
elaborata da W3C per definire l'aspetto delle pagine web.
Un foglio di stile è costituito da una serie di regole che stabiliscono come vengono rappresentati i
contenuti del documento html.
Gli elementi costitutivi di una regola CSS sono:
-le proprietà che la regola vuole controllare
-i valori assegnati alle proprietà
-il selettore a cui applicare la regola
Ad esempio:
body {background-color: #FFF}
La proprietà indica i vari aspetti che vogliamo cambiare, quindi in questo esempio è background-
color (cioè lo sfondo del body).
Il valore indica la caratterista che il singolo aspetto deve assumere, quindi in questo esempio è #FFF
(cioè il colore dello sfondo).
La proprietà e il valore devono essere sempre divise da i due punti (:) e costituiscono la
dichiarazione. La dichiarazione deve essere indicata tra le due parentesi graffe.
Per ogni dichiarazione non è possibile indicare due proprietà es. body {background-color color:
#fff} è una regola errata. Mentre è possibile indicare due valori per una proprietà. Es. body {font-
family: verdana, tahoma, arial}.
Il selettore indica a quali oggetti del documento deve essere assegnata la dichiarazione, quindi in
questo esempio è body.
Ad ogni selettore è possibile applicare più regole, cioè più dichiarazioni (scritte tra le due parentesi
graffe).
es.
body {background-color: #FFF; font-family: verdana, tahoma, arial; font-size: 8pt; color: #000}
Ogni dichiarazione deve essere separata dal punto e virgola (;).
In sintesi con il primo pezzetto di codice abbiamo dichiarato che il body (il corpo) del forum, deve
avere uno sfondo color bianco. Con l'ultimo codice abbiamo aggiunto il tipo di carattere da
applicare ( che dovrebbe essere Verdana, ma se non sarà disponibile per il broswer sarà Tahoma e
così via), la grandezza del carattere e il colore del carattere.
Nel codice della nostra skin abbiamo dei selettori preceduti da un punto.
es.
.nav {font-weight: bold; font-size: 8pt}
Si tratta di un selettore di classe. Un selettore di classe può essere assegnato a più elementi e quindi
può essere ripetuto più volte in una stessa pagina.
Esiste nel linguaggio CSS un selettore di tipo ID che può essere assegnato ad un solo elemento.
Se volete altre informazioni potete andare qui:
http://css.html.it/guide/lezione/22/id-e-classi-due-selettori-speciali/
Ma per la nostra skin non sono informazioni essenziali.

3. Inoltre possiamo assegnare una stessa dichiarazione per più selettori.
es. table, div {font-size: 7.5pt}
Ora incollo una parte della guida di forum free: http://skinlab.forumfree.it/?t=3642555 che vi spiega
come impostare l'altezza, la larghezza di un attributo (cioè di un selettore), il testo, il bordo e lo
sfondo. E' fatta molto bene ed è semplice da capire.
Altezza 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

4. 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:
CODICE
.class {color: #RRGGBB}
#RRGGBB sta per RGB, acronimo di Red-Green-Blue.
CODICE
.class {color: #559900}
In questo caso, ad esempio, ci sarà una quantità di 55 di rosso, 99 di verde e 0 di blu. In questo caso
avremmo anche potuto scrivere
CODICE
.class {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}

5. 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ò essere
CODICE
.class {padding: 4px}
In questo caso, abbiamo messo il padding su tutti e quattro i lati. Invece con
CODICE
.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
-outset
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à"

6. 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.
Fonti:
Guida Completa Css di Gianluca Troiani, Apogeo.
http://skinlab.forumfree.it
http://css.html.it