[Come] colorare prosilver

Area dedicata alle Guide
Regole del forum
Immagine
Rispondi

Vota questa Guida creata dall'utente Raimon

Eccellente
0
Nessun voto
Ottima
1
33%
Buona
1
33%
Discreta
0
Nessun voto
Scarsa
1
33%
 
Voti totali: 3

Avatar utente
phpBB3
News PhpBB3
News PhpBB3
Messaggi: 81
Iscritto il: 6 lug 2013, 14:01

[Come] colorare prosilver

Messaggio da phpBB3 » 15 ott 2013, 13:34

Autore: Raimon
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
Cominciamo :-)
Per prima cosa andiamo nella directory del foglio di stile, li sara fatto il lavoro 8-)
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 :D
Apri: styles/prosilver/theme/colours.css

Trova:

Codice: Seleziona tutto

html, body {
   color: #536482;
   background-color: #FFFFFF;
}    
e cambiare il FFFFFF ad un altro colore che ti piace!

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;
}    
Quando si vuole cambiare colore si possono fare le seguenti cose:
È 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 :D

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");
}    
Che controlla il forumlist, in modo da sapere credo che è necessario modificare (ricolorare) il bg_list.gif che si trova in: /styles/prosilver/theme/images/
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");
}    
solo il background-color

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; }
e cambiare i colori che ti piace.
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");
    }
il colore di sfondo: #B2C2CF;

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");
}    
così quando si cambia l'immagine non dimenticare di cambiare anche il colore di sfondo.

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;
}    
Cerca:

Codice: Seleziona tutto

border-bottom-color: #00608F;
e cambiare il colore giusto.

Ma non ti piace il colore giallo quando passi sopra con il mouse su quella riga :mrgreen:
La possiamo cambiare
Aprire di nuovo: /styles/prosilver/theme/colours.css

Cerca:

Codice: Seleziona tutto

li.row:hover {
   background-color: #F6F4D0;
}
E cambiare il F6F4D0 con il colore che ti piace :)
E' anche possibile cambiare con un immagine, basta caricare la vostra immagine nella directory:
E si sostituisce

Codice: Seleziona tutto

background-color: #F6F4D0;
con

Codice: Seleziona tutto

background-image: url("{T_THEME_PATH}/images/yourimage.gif");
5) Ricolorare i link


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; }
e cambiare i colori giusti che ti piacciono.

6) Ricolorare i link del forum


Adesso cambiamo i colori link forum :mrgreen:

Apri: styles/prosilver/theme/colours.css

Cerca:

Codice: Seleziona tutto

a.forumtitle {
   color: #105289;
}
In linea cerca:

Codice: Seleziona tutto

105289
E cambiare il colore giusto.

Cerca:

Codice: Seleziona tutto

a.forumtitle:hover {
   color: #BC2A4D;
}
In linea cerca

Codice: Seleziona tutto

BC2A4D
e cambiare il colore giusto.

Cerca:

Codice: Seleziona tutto

a.topictitle {
   color: #105289;
}

/* a.topictitle:visited { color: #368AD2; } */

a.topictitle:hover {
   color: #BC2A4D;
}

a.topictitle:active {
   color: #105289;
}    
E cambiare con i colori che ti piace :D

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*/
}    
E cambiare il cadceb con il colore che si desidera.

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 :lol:

Attenzione La Traduzione verrà migliorata! Attenzione

Rispondi

Torna a “[3.0.x] Guide”

Chi c’è in linea

Visitano il forum: Nessuno e 4 ospiti