|
14:57giovedì, 18 ottobre 2007
Vai nella home di ForumFree,
forumfree home
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.
Che, con le modifiche da me apportate, è diventata cosi'
SKIN DI GIULYX
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
una per quello destro
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:
/* 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(http://i205.photobucket.com/albums/bb90/giulyx/margine_sin.png); background-repeat: no-repeat; background-position: bottom}
.mback_center {background-image: url(http://i205.photobucket.com/albums/bb90/giulyx/barra_centro.png); background-repeat: repeat-x; background-position: bottom}
.mback_right {width: 150px; height: 35px; background-image: url(http://i205.photobucket.com/albums/bb90/giulyx/margine_destro.png); background-repeat: no-repeat; background-position: bottom}
.msub {height: 20px}
.msub_left {width: 26px; height: 20px; background-image: url(http://i205.photobucket.com/albums/bb90/giulyx/barra_sx_sotto.png); background-repeat: no-repeat}
.msub_center {background-image: url(http://i205.photobucket.com/albums/bb90/giulyx/barra_cn_sotto.png); background-repeat: repeat-x}
.msub_right {width: 26px; height: 20px; background-image: url(http://i205.photobucket.com/albums/bb90/giulyx/barra_dx_sotto.png); background-repeat: no-repeat}
.mleft, .sep_left, .mright, .sep_right {width: 0}
|
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
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 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
body {scrollbar-face-color: #FBD8F6;
scrollbar-arrow-color: #FFFFFF;
scrollbar-track-color: #FBD8F6;
scrollbar-shadow-color: #FBD8F6;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #828282;
scrollbar-darkshadow-color: #FBD8F6}
|
Ora abbiamo questa stringa
/* SCRITTE ESTERNE */
.nav {font-weight: bold; font-size: 9pt}
|
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.
/* DIMENSIONI FORUM */
.header_width, .skin_tbl_width, .skin_tbl {width: 75%}
.stats .border {width: 76%}
|
Modificando questa parte
/* 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}
|
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
/* BARRA UTENTE */
.menu {height: 28px; background-image: url(http://katyna.altervista.org/_altervista_ht/Skin/t3_copia.gif)}
.menu a:link, .menu a:visited {color: #888888}
.menu a:hover {color: #929191; text-decoration: none}
|
modifichiamo la barra alta, questa
L'immagine creata da me è questa
Modificando questa
/* SEZIONI FORUM */
.mainbg {background-color: #CCCCCC}
.title, .foot {height: 18px; background-color: #CBC9C9; color: #B2B1B1; background-image: url(http://katyna.altervista.org/_altervista_ht/Skin/userlinks.png)}
.title a:link, .title a:visited, .foot a:link, .foot a:visited {font-weight: bold; color: #F98C67}
.title a:hover, .foot a:hover {color: #F98C67; text-decoration: underline}
.aa, .bb, .cc, .ww, .xx, .yy, .zz {background-color: #F2F2F2; border-top: 1px solid #FFFFFF}
.web {font-size: 10pt; line-height: 150%}
.web a:link, .web a:visited {color: #F98C67}
.web a:hover {color: #F98C67; text-decoration: underline}
.desc {font-size: 10px; color: #BBBBBB}
.board .foot {display: none}
|
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
/* STATISTICHE */
.stats .border {border: 1px solid #828282; background-color: transparent}
.skin_tbl_border {background-color: #B8D8F6}
.stats .title2, .stats .sunbar {text-align: center}
.stats .title2 {height: 26px; background-image: url(http://katyna.altervista.org/_altervista_ht/Skin/mscenter.gif); background-repeat: repeat-x; background-color: #CBC9C9; color: #F98C67; font-size: 9pt; font-weight: normal}
.sunbar {padding-bottom: 0; color: #BBBBBB; background-color: #CBC9C9}
.stats .aa, .stats .ww {background-color: #F2F2F2; border-top: 1px solid #FFFFFF}
.highlight {color: #F98C67; font-weight: bold}
|
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.
/* LINK MOD */
.highlight a:link, .highlight a:visited {color: #A5A6A6; font-weight: normal} .highlight a:hover {text-decoration: line-through; color: #47A0FB}
|
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...
/* DISCUSSIONE */
.left_top, .right_top, .left_bottom, .right_bottom {background-color: #F2F2F2}
.left_top .td, .right_top .td, .nick a:link, .nick a:visited, .right_top * a:link, .right_top * a:visited, .left_bottom .td, .right_bottom .td, .right_bottom * a:link, .right_bottom * a:visited {font-weight: bold; color: #A09F9F}
.nick a:hover, .right_top * a:hover, .right_bottom * a:hover {color: #A09F9F}
.sep {height: 7px}
#end .title {font-weight: bold; color: #A09F9F}
#end .title a:link, #end .title a:visited {font-weight: bold; color: #A09F9F; text-decoration: underline}
#end .title a:hover {color: #B0B0B0}
.left, .right {color: #CCCCCC; background-color: #F2F2F2; border-top: 1px solid #FFFFFF}
.nick a:link, .nick a:visited {text-decoration: none; color: #F98C67; font-size: 12px; font-weight: bold; padding-bottom: 2px}
.nick {font-size: 12px; color: red; padding-bottom: 2px}
.quote_top {border: 1px solid #CCC; text-align: center; background-color: #F0F0F0; color: #F98C67; background-image: url(http://i86.photobucket.com/albums/k84/LadyKatyna/quote_code_.gif)}
#quote {font-family: verdana, arial; font-size: 11px; color: #BBB; background-color: #F0F0F0; padding-left: 5px; padding-right: 5px; border: 1px solid #CCC}
.code_top {border: 1px solid #CCC; text-align: center; background-color: #F0F0F0; color: #F98C67; background-image: url(http://i86.photobucket.com/albums/k84/LadyKatyna/quote_code_.gif)}
#code {font-family: verdana, arial; font-size: 11px; color: #BBB; background-color: #F0F0F0; padding-left: 5px; padding-right: 5px; border: 1px solid #CCC}
.color {font-size: 9.5pt; line-height: 150%}
.color a:link, .color a:visited {color: #A09F9F}
.color a:hover {text-decoration: underline; color: #BBBBBB}
hr {color: #A09F9F}
.fancyborder {background-color: #BBBBBB; border: 1px dashed #A09F9F}
.edit {color: #F98C67; font-size: 9px; font-style: italic; text-decoration: underline}
.bottomborder {border-bottom: 1px dashed #A09F9F}
.signature {font-size: 7.5pt; color: #F98C67; line-height: 150%}
|
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.
/* MESSENGER */
.msg_main {background-color: #F2F2F2; color: #CCCCCC; border-top: 1px solid #FFFFFF}
#msg_txt a:link, #msg_txt a:visited {color: #A09F9F} #msg_txt a:hover {text-decoration: underline}
.row1, .row2, .row3 {background-color: #EDECEC}
.row3 {border: 1px solid #CCCCCC}
.darkbar {background-image: none; background-image: url(http://katyna.altervista.org/_altervista_ht/Skin/userlinks.png)}
.title3 {font-weight: bold; background-color: #E5E5E5; color: #F98C67}
#normalname_msg a:link, #normalname_msg a:visited {text-decoration: none; color: #A09F9F; font-size: 12px; font-weight: bold; padding-bottom: 2px}
#normalname_msg a:hover {color: #BBBBBB}
.msg .details p {color: #A09F9F; font-size: 10px; line-height: 150%}
.msg .details {font-size: 7.5pt}
.info {padding-left: 1px; padding-right: 1px; background-color: #EFEFEF; color: #BBBBBB; border: 1px solid #CCCCCC}
.alert {padding-left: 1px; padding-right: 1px; background-color: #EFEFEF; color: #BBBBBB; border: 1px solid #CCCCCC}
#pagetitle_msg {color: #F98C67; font-size: 18px; font-weight: bold; letter-spacing: -1px; line-height: 120%}
|
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....
/* INPUT */
.textinput {background-color: #ECEBEB; color: #939292; font-size: 8.5pt; font-family: verdana, helvetica, sans-serif; vertical-align: middle; border: 1px solid #828282}
.foot .forminput, .darkbar .forminput, .row1 .forminput {font-size: 8pt; font-family: verdana, helvetica, sans-serif; vertical-align: middle; background-color: #ECEBEB; color: #939292; border: 1px solid #F98C67}
.forminput {font-size: 11px; font-family: verdana, helvetica, sans-serif; vertical-align: middle; color: #939292; background-color: #ECEBEB; border: 1px solid#F98C67}
.input, .codebuttons {font-size: 7.5pt; font-family: verdana, helvetica, sans-serif; vertical-align: middle; color: #939292; background-color: #ECEBEB; border: 1px solid#F98C67}
|
L'ultima cosa da fare è modificare la pagina con il profilo utente, e lo facciamo da questa stringa
/* PROFILO UTENTI */
.pagetitle {color: #3A3A3A; font-size: 18px; font-weight: bold; letter-spacing: -1px; line-height: 120%}
.title2 {height: 26px; background-repeat: repeat-x; background-color: #FBD4F5; background-image: url(http://i205.photobucket.com/albums/bb90/giulyx/barra_utente.png); font-weight: bold; color: #3A3A3A}
.title2 a:link, .title2 a:visited {font-weight: bold; color: #FFFFFF; text-decoration: underline}
.title2 a:hover {color: #828282}
.profile .row1 {background-image: none; background-color: #FBD4F5; border: 1px solid #828282; border-top: 1px solid #FFFFFF}
|
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
A_STAR è l'immagine che va sotto all'avatar, subito dopo il grado utente
GRADO_ADMIN e GRADO_MOD assegnano un'immagine esclusiva per questi due ruoli
A_REPLY è il pulsante per aggiungere una risposta al topic
A_POST è il pulsante per creare un nuovo topic
A_POLL è il pulsante per creare un nuovo sondaggio
A_POLLONLY è il pulsante per chiudere un sondaggio
A_LOCKED_B è il pulsante per chiudere una discussione
M_REPLY è il pulsante per rispondere ad un messaggio privato
M_ADDEM è il pulsante per creare un nuovo messaggio privato
M_DELETE è il pulsante per dancellare un messaggio privato
M_UNREAD e M_READ sono le icone di "messaggio non letto" e "messaggio gia' letto"
C_ON e C_OFF sono le immagini che compaiono alla sinistra della sezione, e che segnalano se ci sono nuove risposte dall'ultima visita in quella sezione
C_ON_RES e C_OFF_RES come sopra, solo che vengono applicate alle sezioni ad accesso limitato
C_LOCKED è l'icona di "sezione chiusa"
F_ACTIV e F_STAT sono le icone di "utente on line" e "utente off line"
Le seguenti dieci icone sono quelle che si visualizzano nella legenda in basso, e accanto ai post, e evidenziano nuona discussione, nuova risposta, discussione "calda",nuovo sondaggio, discussione spostata o chiusa, annuncio
Le seguenti dieci icone o pulsanti sono i pulsanti delle barre sopra e sotto al forum, quelle con i contatti, il sito web, per cancellare, editare ecc...
F_NAV e F_NAV_SEP sono le iconcine in alto al forum, accanto al messaggio di benvenuto
|
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:
<img border="0" src=url immagine width=xxx height=yyy>
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...
Ecco il risultato, commentate pure in tag, tanto il forum è chiuso XD
SKIN DI GIULYX>
TUTORIAL CREATO E SVILUPPATO DA GIULYX: VIETATO COPIARLO, RIPRODURLO, O SPACCIARLO PER PROPRIO
commento scarabocchiato da...:
Giulyalbascura
a proposito di... tutorials, tutorials html, tutorial creare skin forumfree
Thanks for commenti (42)
permalink
Per conoscere anche il mio sito, clicca su questo bannerino
Ciao ^^
|
|
