-
¤°.¸¸Capitan America¸¸.°¤.
User deleted
Andate nella home di forumfree o forumcommunity nel frame centrale, ma anche nel menù a sinistra, trovate la voce Crea il tuo forum cliccateci sopra per cominciare ad impostarlo.
Nella pagina che si aprirà vanno inserite le impostazioni di base, scegliete il titolo del forum, il dominio ed impostate le sezioni.
Inizialmente inseritene solo un paio, poi, una volta impostato lo stile, ne potrete aggiungere quante ne vorrete.
Leggete i Termini del Servizio e scorrete la pagina fino in fondo, cliccate su Crea il tuo forum.
Si aprirà una pagina in cui, tra le opzioni lincabili, c'è Modifica Skin, cliccate lì e scorrete le skin a disposizione per scegliene una con un'impostazione che vi piace.
Non badate al colore, quello poi lo cambiate, scegliete solamente quella che, come forma, vi piaccia di più.
Ora che il forum è stato configurato, nella pagina che vi si apre, cliccate su Accedi al forum.
Personalizzazione
Per farla si deve usare la colonna di link posta alla sinistra del frame, Gestione codice HTML.
Aprite Photoshop o Paint Shop Pro e aprite un nuovo file, state per fare la barra sopra ai forum, quindi non deve essere altissima,
nell'esempio il file aperto è di 500x35
Usate la fantasia, e, usando i livelli, le forme, gli stili, create la barra (se la barra che volete è simmetrica basta creare solo un margine laterale, lo capovolgete in orizzontale in modo da avere lo stesso file in modo speculare)
Se invece non volete che sia simmetrico dovete rifinire entrambi i margini
Fatto questo si deve ritagliare il tutto in tre parti, una che costituirà il margine sinistro
una per quello destro
e una per la parte centrale, usate pure un pezzettino piccolo, tanto si ripeterà fino a coprirla tutta.
Fate anche la barra che sta sotto al forum, meglio farla in pochino più bassa, mantenendo lo stile ed i colori della prima, nell'esempio è 500x20 e dividetela come quella di prima in tre parti:
Parte sinistra sotto
Parte centrale sotto
Parte destra sotto
--------------------------------------------------------------------------------
Ora andate sul forum, in Modifica colori e stili, e portatevi in questa parte:CODICE/* 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 mettete le immagini della 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, dovreste avere un cambiamento così:
--------------------------------------------------------------------------------
Passate ora al resto del codice, dall'inizio...
Avete la definizione generale del corpoCODICEbody {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 potete decidere lo stile del testo, la grandezza, il tipo di font ed il colore. La skin ora è cosi'
Se volete colorare la scrollbar va aggiunto questo codice, modificando i colori esadecimali in base alla vostra skinCODICEbody {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}
=> Tabella codici HTML colori
--------------------------------------------------------------------------------
Ora avete questa stringa:CODICE/* SCRITTE ESTERNE */
.nav {font-weight: bold; font-size: 9pt}
in cui vengono modificate solo queste scritte, esterne ai forum
--------------------------------------------------------------------------------
In questa stringa cambiate la larghezza del forum rispetto allo schermo in cui viene visualizzato, va quindi inserito un valore percentualeCODICE/* DIMENSIONI FORUM */
.header_width, .skin_tbl_width, .skin_tbl {width: 75%}
.stats .border {width: 76%}
--------------------------------------------------------------------------------
Modificando questa parte:CODICE/* 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 avrà solo i primi 4 attivi
--------------------------------------------------------------------------------
In questa stringa:CODICE/* 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}
modificate la barra alta (barra del "benvenuto utente"), questa:
L'immagine creata da me è questa:
--------------------------------------------------------------------------------
Modificando questa:CODICE/* 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 può impostare anche un semplice colore di background, oppure, come in questo caso, un'altra barra fatta sullo stile di quelle create prima
--------------------------------------------------------------------------------
Ora avete la tabella delle statistiche forum:CODICE/* 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 tabella, quella del titolo, potete utilizzare 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 linkCODICE/* 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...CODICE/* 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 pò 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 vuole un pò 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 siete invece nel Messenger, praticamente l'editor in cui vengono inseriti i messaggi da inviareCODICE/* 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%}
--------------------------------------------------------------------------------
Avete quasi finito con gli stili, ora trovate questa stringa che corrisponde alla parte bassa della skin, dove c'è il form per l'inserimento delle risposte veloci, i pulsanti di moderazione e il riquadro che indica ciò che l'utente può o non può fare in quel forum, la legenda sulle discussioni nuove, già lette ecc....CODICE/* 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 fate da questa stringa:CODICE/* 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 avete finito, e questo è il forum con le modifiche apportate fino ad ora:
--------------------------------------------------------------------------------
A questo punto modificate lo sfondo, che qui è stato inserito con una barra laterale, ma che si può impostare con qualsiasi immagine o colore in tinta unica. Andate nel menu di Amministrazione e cliccate su Modifica sfondo
Io ho creato questa immagine con le due barre ai lati
e questo è il forum come appare ora:
--------------------------------------------------------------------------------
Ora dovete modificare le immagini...partite dal logo, cliccando in Modifica logo nel menù del pannello di Amministrazione
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, lo inserite e salvate la modifica; io ho creato questo (è brutto e semplice, ma è solo un esempio...
--------------------------------------------------------------------------------
Fatto il logo, passate 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 giò 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 cancellare un messaggio privato
M_UNREAD e M_READ sono le icone di "messaggio non letto" e "messaggio già 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 Nuova 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 può personalizzare la skin e il forum aggiungendo le varie sezioni e sottosezioni.
Usando il menu del pannello di controllo admin forum andate in Crea sezioni ed aggiungete quelle che volete
Se volete che le sezioni invece della semplice descrizione abbiano delle targhette dovete cliccare, dopo che la sezione è stata creata, in Gestione sezioni e da lì aprire ogni sezione con un click ed inserire la vostra targhetta (ricordo che qui va esclusivamente usato HTML), quindi le immagini avranno la formula:CODICE<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 controllo admin, potete aggiungere ciò che volete, tabelle, news, datari, link, riferimenti ecc...
Credit Tutorial giulyalbascura
fonte
. -
.
scusa l'introsione,vorrei farti una domanda.
come posso modificare i colori della risposta rapida,dell'edit dei topic(o della creazione di un nuovo topic o sondaggio)?
grazie della risposta ^^. -
•Ðark.
User deleted
sono questi
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. -
.
grazie,ma io nn intendevo i bottoni ^^"
volevo sapere come posso cambiare proprio la struttura di quelle parti, perchè del topic normale sono riuscita ma di quelli nn trovo la parte da modificare. -
•Ðark.
User deleted
è un altra parte della skin poi io non sono olto pratico quindi ti conviene chiedere alla nostra admin grafic *sunshine* . -
.
ok grazie =) . -
MissAlice93.
User deleted
Ciao! volevo ringraziarti x qst guida , mi ha aiutata molto ! Non ho ancora aperto il mio forum (dovrei farcela x la prima sett di Dicembre xd) ma appena lo finirò ti citerò subito nei credits 
byebye e thanks. -
$DarkMat$.
User deleted
salve, scusate se disturbo, ma se io provo a modificare la percentuale per la larghezza della skin nel mio forum non cambia niente! . -
R e a l l y ?.
User deleted
Posta il codice. . -
daniele.32.
User deleted
Scusami Una Domanda Ma Dopo Ritagliato i Bordi Di Una TAbbella Bisogna Caricarli Su Un Sito Per Immagini Ed incollare il Link? . -
.
si 
. -
daniele.32.
User deleted
Ma Devo Mettere Anche http://? . -
.
ovviamente . -
daniele.32.
User deleted
Posso Farti Una Domanda Sulla gestione Gruppi?
Perche nessuno Mi Ha Risposto Nella Topic Che o Aperto Io. -
~ ORTON & EDGE ~.
User deleted
Salve ho un problema ho appena messo una nuova skin ma ho problemi con i font piu' che altro con i colori, sono grigi e io vorrei cambiare il colore di tutti i font e metterli bianchi, della tag board, delle sezioni, dei topic, degli mp di tutto. So che devo andare in colori e stili ma non so proprio cosa cercare per cambiare il colore. .
Modifica colori e stili skin del forumpersonalizzazione della grafica |
