1. GUIDA CREAZIONE SKIN: I PRIMI PASSIIn 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 -monospaceI 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 -outsetBackground-color e background-imagePartiamo 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