[Tutorial]Creare Skin ForumFree/Forumcommunity

Vai nella Home di ForumFree
nel frame centrale trovi la scritta "crea il tuo forum",
cliccaci sopra per cominciare ad impostarlo.
Nella pagina che si apre vanno inserite le impostazioni di base,
scegli il titolo del forum, il dominio, ed imposta le sezioni,
inizialmente inseriscilne solo un paio, poi, una volta impostato lo stile,
ne potrai aggiungere quante ne vorrai.
Leggi i termini del servizio e scorri la pagina fino in fondo, clicca su "crea il tuo forum".
Si apre una pagina, in cui, tra le opzioni lincabili, c'è "modifica skin",
clicca li sopra e scorri le skin a disposizione per sceglierne una con un'imposatzione che ti piace.
In questo momento non badare al colore, poi lo cambiamo, scegli solamente quella che,
come forma ti piace di piu.
Io ho scelto la "keeping"



Che, con le modifiche da me apportate, è diventata cosi' SKIN
Ora che il forum è stato configurato, nella pagina che ti si apre, clicca su "accedi al forum".
Ora passiamo alla personalizzazione, e per farlo si deve usare la colonna di link posta alla sinistra del frame, gestione codice html.
Apri photoshop, o paint shop pro, e apri un nuovo file, stiamo per fare la barra sopra ai forum, quindi non deve essere altissima,
io ho aperto un file di 500x35.
Usa la fantasia, e, usando i livelli, le forme, gli stili, crea la barra (se la barra che vuoi è simmetrica basta creare solo un margine laterale, poi lo capovolgiamo in orizzontale in modo da avere lo stesso file in modo speculare)



Se invece non vuoi che sia simmetrico devi rifinire entrambi i margini.



Fatto questo si deve ritagliare il tutto in tre parti, una che costituira' il margine sinistro



e una per la parte cenntrale, usa pure un pezzettino piccolo, tanto si ripetera' fino a coprirla tutta.



Facciamo anche la barra che sta sotto al forum, meglio farla in pochino piu' bassa, mantenendo lo stile ed i colori della prima, io la faccio 500x20. e dividiamola come quella di prima in tre parti



Parte sinistra

Parte centrale

Parte destra


Ora andiamo in forumfree, in modifica colori e stili, e portiamoci in questa parte:




In .mback metti le immagini dellaa barra superiore, in .msub quelle della barra inferiore.
E' molto importante anche modificare le misure mettendo quelle esatte delle immagini create da voi.
Ora, con i cambiamenti fatti, dovremmo avere un cambiamento cosi'



passiamo ora al resto del codice, dall'inizio
Abbiamo la definizione generale del corpo




Qui puoi decidere lo stile del testo, la grandezza, il tipo di font, ed il colore. La mia skin ora è cosi'




Se vuoi colorare la scrollbar va aggiunto questo codice, modificando i colori esadecimali in base alla tua skin






Ora abbiamo questa stringa



in cui vengono modificate solo queste scritte, esterne ai forum




In questa stringa cambiamo la larghezza del forum rispetto allo schermo in cui viene visualizzato, va quindi inserito un valore percentuale.





Modificando questa parte





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




In questa stringa




modifichiamo la barra alta, questa



L'immagine creata da me è questa



Modificando questa




si vanno a modificare i colori e gli stili dei riquadri delle sezioni, in .title si puo impostare anche un semplice colore di background, oppure, come in questo caso, un'altra barra fatta sullo stile di quelle create prima.




Ora abbiamo la tabella delle statistiche forum





Per la barra della mia tabella, quella del titolo, ho usato la stessa immagine fatta come titolo allo sfondo dei forum; ma ne potete creare un'altra, oppure mettere semplicemente il colore di background ed eliminare la parte con l'url.
Ora, in questa stringa modifichiamo semplicemente i colori dei link.





Passiamo ora alla tabella delle discussioni, andiamo a modificare, quindi, tutto cio che puo trovarsi all'interno di ogni post: il testo, i link, le quote, il code ecc...





Non è fattibile spiegare i termini uno ad uno, conoscendo un po i css e l'html basta leggere quello che c'è scritto, e di conseguenza fare le modifiche ai colori mettendoli abbinati allo stile del proprio forum. Ci vole un po di occhio e di pazienza, io consiglio, le prime volte, di fare una modifica alla volta, prenderne nota e salvare le modifiche fatte, in modo da vedere subito cosa siete andati a modificare e rimediarvi.
Qui siamo invece nel messenger, praticamente l'editor in cui vengono inseriti i messaggi da inviare.






Abbiamo quasi finito con gli stili, ora troviamo questa stringa, che corrisponde alla parte bassa della skin, dove c'è il form per l'inserimento delle risposte veloci, i pulsandi di moderazione e il riquadro che indica cio' che l'utente puo o non puo fare in quel forum, la legenda sulle discussioni nuove, gia' lette ecc....






L'ultima cosa da fare è modificare la pagina con il profilo utente, e lo facciamo da questa stringa






Con gli stili abbiamo finito, e questo è il forum con le modifiche apportate fino ad ora




A questo punto modifichiamo lo sfondo, che qui è stato inserito con una barra laterale, ma che si puo impostare con qualsiasi immagine o colore in tinta unica. Andiamo nel menu di amministrazione e clicchiamo su "modifica sfondo".
Io ho creato questa immagine con le due barre ai lati




e questo è il forum come appare ora






--------------------------------------------------------------------------------


Ora dobbiamo modificare le immagini. partiamo dal logo, cliccando in "modifica logo" nel menu' del pannello di forumfree.
Come vedete, c'è scritto cosa fare in modo automatico, le dimensioni massime che potete dargli, e il suggerimento di usare un hosting per la vostra immagine.
Andate quindi in photoshop e create il vostro bannerone, lo hostate e lo inserite, e salvate la modifica; io ho creato questo (è brutto e semplice, ma è solo un esempio...



Fatto il logo, passiamo a tutte le altre immagini della skin, per fare questa modifica dovete cliccare su "modifica immagini"
Nella schermata che si apre c'è una lista con le immagini gia' presenti nella skin, si devono solo creare e inserire quelle personalizzate





Finito con le immagini, ora si puo personalizzare la skin e il forum aggiungendo le varie sezioni e sottosezioni.
Usando il menu del pannello di controllo admin forum vai in "crea sezioni" ed aggiungi quelle che vuoi.
Se vuoi che le sezioni, invece della semplice descrizione, abbiano delle targhette, devi cliccare, dopo che la sezione è stata creata, in "gestione sezioni" e da li aprire ogni sezione con un click ed inserire la tua targhetta (ricordo che qui va esclusivamente usato html, quindi le immagini avranno la formula:


Ultima cosa da fare è aggiungere i credit della skin; non togliete mai quelli di chi ha creato il codice di base, ma aggiungete il vostro nick per le modifiche fatte, andate in "gestione codice html" e modificate la parte "codice html visualizzato in fondo al forum".
Usando il codice html, da questa finestra del pannello di coontrollo admin, possiamo aggiungere cio' che vogliamo, tabelle, news, datari, link, riferimenti ecc...



tutorial by Giulyx