[How to] colorize prosilver

[Raimon]

Hello,

Since i noticed a lot of topics about how to recolour prosilver , i though a topic like this would be useful.
Before we begin we turn the cache of , so it will prevent that you always must refresh your theme or prune your cache.
It can be done very easily, just go to your Administration Control Panel -> Load settings ( you will find that link on the left bottom side of the begin page of your Administration Control Panel index page ) -> Recompile stale style components: -> and set that option to Yes.

That's all , are you ready with styling just turn the option to no

Table of Contents

• 1) change the white background
• 2) Recolor the header image
• 3) Recolor the forum pages
• 4) Recolor the forum list pages
• 5) Recolor the links
• 6) Recolor the forum links
• 7) Recolor the navbar
• Glossary for other useful links to customise your prosilver.

[/size]

Lets begin
First we go to the stylesheet directory, the will be the ground work
The directory /styles/prosilver/theme/ are heading for, you will notice the next files:

• 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) change the white background

Let change the withe background
Open: styles/prosilver/theme/colours.css

search:

Code: Select all

html, body {
   color: #536482;
   background-color: #FFFFFF;
}              

and change the FFFFFF to a other colour that you like!

2) Recolor the header image


You will see at the top of your board a blue header , where you see the site name, description and on the left your board logo.
That is controlled by the colours.css, when you open it you will find the next thing:

Code: Select all

.headerbar {
    background-color: #12A3EB;
    background-image: url("{T_THEME_PATH}/images/bg_header.gif");
    color: #FFFFFF;
}                       

When you want to recolour it you can do the next things:
You can recolour the image bg_header.gif , that you will find on the directory /styles/prosilver/theme/images/, but keep on mind, when you change (recolour) that image the viewforum.php page will also be a different colour, the blue is also controlled by that image.

Second way you can create a own image , and upload it to the /styles/prosilver/theme/images/ directory , the only thing that you must change is the css code that i posted above.

After you change/recolour the image , you will notice on the bottom that it is still blue! no problem, just change the background-color on the css , what is written above to the right colour (" the next code i mean background-color: #12A3EB; ").

Save the files and upload it , on some cases you must enter CTRL + F5 on your web browser to see the difference.
3) Recolor the forum pages


New you on the index page and you will notice the blue rounding by the forums.
Lets going to change that

Again we open the file : /styles/prosilver/theme/colours.css

you will search for the next code:

Code: Select all

.forabg {
    background-color: #0076b1;
    background-image: url("{T_THEME_PATH}/images/bg_list.gif");
}                 

That controls the forumlist , so you will know i guess that you must change(recolour) the bg_list.gif that is located at: /styles/prosilver/theme/images/
When you have done that , don't forget to change the "background-color: #0076b1;" to the right colour of your images.

When you are looking at the viewforum.php, you will notice a blue line , that right you must again change on colours.css the next thing:

Code: Select all

.forumbg {
    background-color: #12A3EB;
    background-image: url("{T_THEME_PATH}/images/bg_header.gif");
}                 

only the background-color

New you also see that that on the viewtopic.php pages some blue , light blue.
That are the bg colours, on colours.css you will find this:

Code: Select all

.bg1   { background-color: #ECF3F7; }
.bg2   { background-color: #e1ebf2;  }
.bg3   { background-color: #cadceb; }                   

and change it to the colours that you like.
A little site note here: when you change the bg3 header, you much change the tab images that are located on /styles/prosilver/theme/images/ since otherwise you will have a other colour of the tabs. (the images are bg_menu.gif , bg_tabs1.gif, bg_tabs2.gif).
And after that you must change for the ucp panel the next value on the colours.css

Code: Select all

    #navigation a {
       color: #333;
       background-color: #B2C2CF;
       background-image: url("{T_THEME_PATH}/images/bg_menu.gif");
    }                

the background-color: #B2C2CF;

4) Recolor the forum list pages


You will noticed the blue row, on the forum list page, lets change that image
That image on the index page, where you see the forum name, description etc etc.
Is also controlled by a image , only that images is calling gradient.gif and that you can find on /styles/prosilver/theme/images/
On the colours.css you will find the next value that controls that row.

Code: Select all

ul.forums {
    background-color: #eef5f9;
    background-image: url("{T_THEME_PATH}/images/gradient.gif");
}                 

so when you change the image don't forget to also change the background-color.

When you are have changed the images , and the background-colour , you will notice that the border bottom a blue line, lets change that

Open again /styles/prosilver/theme/colours.css

search

Code: Select all

li.row {
   border-top-color:  #FFFFFF;
   border-bottom-color: #00608F;
}                

search:

Code: Select all

border-bottom-color: #00608F;                   

and change it to the right colour.

But you don't like the yellow mouse over on that row
That whe can change open again: /styles/prosilver/theme/colours.css

search:

Code: Select all

li.row:hover {
   background-color: #F6F4D0;
}

and change the F6F4D0 to the colour that you like
It is also possible to change it with a image, you upload your image to the directory:
And you replace

Code: Select all

background-color: #F6F4D0;                   

with

Code: Select all

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

5) Recolor the links


Let's change the links colours (this is not for the forum links) !

open: styles/prosilver/theme/colours.css

search:

Code: Select all

    a:link   { color: #105289; }
    a:visited   { color: #105289; }
    a:hover   { color: #D31141; }
    a:active   { color: #368AD2; }                   

and change it to the right colours that you like.

6) Recolor the forum links


Let change the forum_links colours

open: styles/prosilver/theme/colours.css

search:

Code: Select all

a.forumtitle {
   color: #105289;
}                

inline find:

Code: Select all

105289

change it to the right colour.

search:

Code: Select all

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

inline find

Code: Select all

BC2A4D

and change it to the right colour.

search:

Code: Select all

a.topictitle {
   color: #105289;
}

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

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

a.topictitle:active {
   color: #105289;
}                

and change it to the colours that you like

7) Recolor the navbar


The navbar is the bar where you see board index , FAQ , etc etc.

open: styles/prosilver/theme/colours.css

search:

Code: Select all

.navbar {
   background-color: #cadceb; /*narbar background color*/
}                

and change the cadceb to the colour that you want.

Glossary

Knowledge Base - Fixed width prosilver
Knowledge Base - Prosilver: Profiles on Left
Knowledge Base - Tools needed to set up and customise phpBB
[HOW TO] Add Liquid/Dynamic Rounded corners to your style
[How To] Modify prosilver's header
Get the phpBB.com style
colorize your own prosilver without editing the files!
Enjoy phpBB

[*Christian*]

Great Topic Raimon! *Request for a sticky *

Although i've learned almost everything in this topic by now, i think this guide will really help new stylists.

[Mr. Bond]

Fantastic tut Raimon, like *Christian* though, I've learned most of this already but a great tut for people looking for a place to start

[jtryptophan]

Ah, Eureka! Thanks.

But you don't like the yellow mouse over on that row
That whe can change open again: /styles/prosilver/theme/colours.css

How can I make this transparent like it is on this forum?
And do you have the color code for the gray in this forum?
Thanks!

[prototech]

How can I make this transparent like it is on this forum?

Remove the following..
In content.css:

Code: Select all

li.row:hover {
	background-color: #f6f6f6;
}

In colours.css:

Code: Select all

li.row:hover {
	background-color: #F6F4D0;
}

And do you have the color code for the gray in this forum?

Which gray are you referring to?

[jtryptophan]

Ugh, I have dueling threads. Sorry.

The gray here : http://www.phpbb.com/community/viewforum.php?f=74
Background of the topics and the gray above that is slightly darker where FAQ, Search, Members is.

Also, if I remove the hover colour completely, will I lose that gleam over the bars, or will I still be able to detect
which topic I am over?

[prototech]

"Background of topics" is an image at the top... the rest is #505C65. The navigation bar is #DBDFE2.

[jtryptophan]

Also, if I remove the hover colour completely, will I lose that gleam over the bars, or will I still be able to detect which topic I am over?

Nope. It work just perfectly! Thanks! You can split me off if you'd like to make this sticky...apologies.

[jtryptophan]

New you on the index page and you will notice the blue rounding by the forums.
Lets going to change that

Again we open the file : /styles/prosilver/theme/colours.css

you will search for the next code:

Can this be done with not only Forums, but Announcements and Topics borders as well?

[Raimon]

If you change the forabg and forumbg, like its written above, then the blue borders are gone, even on the viewtopic page, since forumbg is used for that

[babylittlekelvin]

I'm a complete beginner with phpBB3 and i don't really understand when you say:

That controls the forumlist , so you will know i guess that you must change(recolour) the bg_list.gif that is located at: /styles/prosilver/theme/images/
When you have done that , don't forget to change the "background-color: #0076b1;" to the right colour of your images.

>>What do i change(recolour) the bg_list.gif into? How big would the image be? And why does the background colour have to be the right colour for my image if my image is going to overlap it anyway?
eeeeekkkk I'm so confused!

[Raimon]

>>What do i change(recolour) the bg_list.gif into?

To the colour that you like.

How big would the image be?

A size like 5 x 92 would be fine.

And why does the background colour have to be the right colour for my image if my image is going to overlap it anyway?
eeeeekkkk I'm so confused!

Otherwise the bottom of the (blue) border is a other colour to compare with the top of the border.

[jtryptophan]

Any tips on how to colorize the NEWTOPIC and POSTREPLY buttons. The magenta and the baby blue in particular. Gracias!

[prototech]

Any tips on how to colorize the NEWTOPIC and POSTREPLY buttons. The magenta and the baby blue in particular. Gracias!

Patience is a virtue.
You should bump your topic instead of cross-posting in several topics... http://www.phpbb.com/community/viewtopi ... 4&t=937905

[marian0810]

It can be done very easily, just go to your Administration Control Panel -> Load settings ( you will find that link on the left bottom side of the begin page of your Administration Control Panel index page ) -> Recompile stale style components: -> and set that option to Yes.

Thank you for this info! The buffer-thing was driving me crazy.

are you ready whit styling just turn the option to no

Why? I like it so much better this way