Descrizione: Ciao, Dal momento che ho notato un sacco di argomenti su come ricolorare il prosilver, ho pensato che anche un topic come questo sarebbe utile.
Indice dei contenuti
- 1) cambiare lo sfondo bianco
- 2) Ricolorare l'immagine header
- 3) Ricolorare le pagine del forum
- 4) Ricolorare le pagine lista forum
- 5) Ricolorare i link
- 6) Ricolorare i link del forum
- 7) Ricolorare la barra di navigazione
- Glossario per altri link utili per personalizzare il prosilver.
Per prima cosa andiamo nella directory del foglio di stile, li sara fatto il lavoro
La directory /styles/prosilver/theme/ questa è la direzione dove si trovano i file, di seguito i file:
- bidi.css
- buttons.css
- colours.css
- common.css
- content.css
- cp.css
- forms.css
- index.htm
- large.css
- links.css
- medium.css
- normal.css
- print.css
- stylesheet.css
- theme.cfg
- tweaks.css
1) cambiare lo sfondo bianco
Lasciate che cambia lo sfondo bianco
Apri: styles/prosilver/theme/colours.css
Trova:
Codice: Seleziona tutto
html, body {
color: #536482;
background-color: #FFFFFF;
}
2) Ricolorare l'immagine header
Si vedrà in cima alla vostra board un header blu, dove si vede il nome del sito, descrizione e sulla sinistra il logo della board.
Che è controllato dal colours.css, quando lo si apre si trova la cosa seguente:
Codice: Seleziona tutto
.headerbar {
background-color: #12A3EB;
background-image: url("{T_THEME_PATH}/images/bg_header.gif");
color: #FFFFFF;
}
È possibile ricolorare la bg_header.gif immagine, che si trova nella directory/styles/prosilver/theme/images/, ma da notare, quando si cambia il colore dell'immagine nella pagina viewforum.php sarà anche di colore diverso, il blu è controllata anche da quella immagine.
Secondo metodo è possibile creare una propria immagine, e caricarla in /styles/prosilver/theme/images/ directory, l'unica cosa che è necessario modificare il codice CSS che ho postato sopra.
Dopo aver ricolorato/modificato l'immagine, noterete sul fondo che è ancora azzurro! nessun problema, basta cambiare il colore di sfondo del css, ciò che è scritto qui sopra per il colore giusto ("il codice seguente intendo background-color: #12A3EB; ").
Salvare il file e caricarlo, in alcuni casi, è necessario immettere CTRL+F5 sul tuo browser per vedere la differenza.
3) Ricolorare le pagine del forum
Nuovo è nella pagina indice e si noterà l'arrotondamento blu dal forum.
Cerchiamo di andare a cambiare la situazione
Ancora una volta apriamo il file : /styles/prosilver/theme/colours.css
Cercare il codice seguente:
Codice: Seleziona tutto
.forabg {
background-color: #0076b1;
background-image: url("{T_THEME_PATH}/images/bg_list.gif");
}
Una volta fatto questo, non dimenticate di cambiare il "background-color: #0076b1;" colore alla destra delle immagini.
Quando si sta guardando il viewforum.php, noterete una linea blu, che a destra si deve ancora modificare il colours.css la cosa seguente:
Codice: Seleziona tutto
.forumbg {
background-color: #12A3EB;
background-image: url("{T_THEME_PATH}/images/bg_header.gif");
}
Nuovo è anche vedere che sulle pagine viewtopic.php alcuni blu, azzurro.
Che sono i colori bg, su colours.css troverete questo:
Codice: Seleziona tutto
.bg1 { background-color: #ECF3F7; }
.bg2 { background-color: #e1ebf2; }
.bg3 { background-color: #cadceb; }
Una piccola nota sito qui: quando si cambia bg3 header, è molto di modificare le immagini sulla board che si trovano in /styles/prosilver/theme/images/ poiché in caso contrario si avrà un altro colore delle schede. (le immagini sono bg_menu.gif , bg_tabs1.gif, bg_tabs2.gif).
E dopo che è necessario modificare per il pannello UCP il valore successivo sulla colours.css
Codice: Seleziona tutto
#navigation a {
color: #333;
background-color: #B2C2CF;
background-image: url("{T_THEME_PATH}/images/bg_menu.gif");
}
4) Ricolorare le pagine lista forum
Avrete notato la riga blu sulla pagina lista dei forum, consente di cambiare l'immagine
L'immagine sulla pagina indice dove si vede il nome del forum, descrizione ecc ecc
Viene inoltre controllato da un immagine, solo che le immagini sono un vero invito gradient.gif e che si possono trovare in /styles/prosilver/theme/images/
Sul colours.css troverete il valore successivo che controlla quella riga.
Codice: Seleziona tutto
ul.forums {
background-color: #eef5f9;
background-image: url("{T_THEME_PATH}/images/gradient.gif");
}
Quando si sono modificate le immagini, e il colore di sfondo, si noterà il bordo inferiore di una linea blu, andiamo a cambiare quella:-D
Aprire di nuovo /styles/prosilver/theme/colours.css
Cerca:
Codice: Seleziona tutto
li.row {
border-top-color: #FFFFFF;
border-bottom-color: #00608F;
}
Codice: Seleziona tutto
border-bottom-color: #00608F;
Ma non ti piace il colore giallo quando passi sopra con il mouse su quella riga
La possiamo cambiare
Aprire di nuovo: /styles/prosilver/theme/colours.css
Cerca:
Codice: Seleziona tutto
li.row:hover {
background-color: #F6F4D0;
}
E' anche possibile cambiare con un immagine, basta caricare la vostra immagine nella directory:
E si sostituisce
Codice: Seleziona tutto
background-color: #F6F4D0;
Codice: Seleziona tutto
background-image: url("{T_THEME_PATH}/images/yourimage.gif");
Adesso cambiamo i colori dei link (questo non è per i link del forum)!
Aprire: styles/prosilver/theme/colours.css
Cerca:
Codice: Seleziona tutto
a:link { color: #105289; }
a:visited { color: #105289; }
a:hover { color: #D31141; }
a:active { color: #368AD2; }
6) Ricolorare i link del forum
Adesso cambiamo i colori link forum
Apri: styles/prosilver/theme/colours.css
Cerca:
Codice: Seleziona tutto
a.forumtitle {
color: #105289;
}
Codice: Seleziona tutto
105289
Cerca:
Codice: Seleziona tutto
a.forumtitle:hover {
color: #BC2A4D;
}
Codice: Seleziona tutto
BC2A4D
Cerca:
Codice: Seleziona tutto
a.topictitle {
color: #105289;
}
/* a.topictitle:visited { color: #368AD2; } */
a.topictitle:hover {
color: #BC2A4D;
}
a.topictitle:active {
color: #105289;
}
7) Ricolorare la barra di navigazione
La barra di navigazione è dove si vede Indice, FAQ, ecc ecc
Aprire: styles/prosilver/theme/colours.css
Cerca:
Codice: Seleziona tutto
.navbar {
background-color: #cadceb; /*narbar background color*/
}
Glossario
Prosilver: Larghezza fissa
Prosilver: profili a sinistra
Strumenti necessari per impostare e personalizzare phpBB
[COME] Aggiungere Angoli arrotondati Liquid/Dynamic sul vostro stile
[COME] Modificare l'header del prosilver
Ottenere lo stile di phpBB.com
colorare il proprio prosilver senza modificare i file!
Enjoy phpBB
La Traduzione verrà migliorata!