[How to] colorize prosilver

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Get Involved
User avatar
Raimon
Former Team Member
Posts: 12088
Joined: Tue May 30, 2006 5:31 pm
Location: Netherlands
Name: Raimon Meuldijk

[How to] colorize prosilver

Post by 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

[/size]

Lets begin :-)
First we go to the stylesheet directory, the will be the ground work 8-)
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 :D
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 :D

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

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

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

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 :lol:
Last edited by Raimon on Fri Jun 13, 2008 9:33 pm, edited 1 time in total.
Need phpBB installation, extenstions, Styles or integrate phpBB with you website?
Contact me @ www.raimon.nl for fair prices and good service!
User avatar
*Christian*
I've Been Banned!
Posts: 884
Joined: Sat Nov 03, 2007 1:35 pm
Location: Location, Location.

Re: [How to] colorize prosilver

Post by *Christian* »

Great Topic Raimon! *Request for a sticky :lol: *

Although i've learned almost everything in this topic by now, i think this guide will really help new stylists. :)
Proud owner of Bertie 3.0
:: No support via PM or IM ::
Mr. Bond
Registered User
Posts: 54
Joined: Mon Feb 04, 2008 1:11 pm

Re: [How to] colorize prosilver

Post by 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 ;)
User avatar
jtryptophan
Registered User
Posts: 299
Joined: Wed Apr 09, 2008 5:38 pm
Location: Baltimore, MD

Re: [How to] colorize prosilver

Post by jtryptophan »

Ah, Eureka! Thanks. :D
But you don't like the yellow mouse over on that row :mrgreen:
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! :mrgreen:
User avatar
prototech
Former Team Member
Posts: 5406
Joined: Mon Mar 19, 2007 2:04 pm
Location: Southern California

Re: [How to] colorize prosilver

Post by prototech »

jtryptophan wrote: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;
}
jtryptophan wrote:And do you have the color code for the gray in this forum?
Which gray are you referring to?
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.
User avatar
jtryptophan
Registered User
Posts: 299
Joined: Wed Apr 09, 2008 5:38 pm
Location: Baltimore, MD

Re: [How to] colorize prosilver

Post by 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?
Last edited by jtryptophan on Sun May 04, 2008 4:32 am, edited 1 time in total.
User avatar
prototech
Former Team Member
Posts: 5406
Joined: Mon Mar 19, 2007 2:04 pm
Location: Southern California

Re: [How to] colorize prosilver

Post by prototech »

"Background of topics" is an image at the top... the rest is #505C65. The navigation bar is #DBDFE2.
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.
User avatar
jtryptophan
Registered User
Posts: 299
Joined: Wed Apr 09, 2008 5:38 pm
Location: Baltimore, MD

Re: [How to] colorize prosilver

Post by 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. :oops:
User avatar
jtryptophan
Registered User
Posts: 299
Joined: Wed Apr 09, 2008 5:38 pm
Location: Baltimore, MD

Re: [How to] colorize prosilver

Post by jtryptophan »

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

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?
User avatar
Raimon
Former Team Member
Posts: 12088
Joined: Tue May 30, 2006 5:31 pm
Location: Netherlands
Name: Raimon Meuldijk

Re: [How to] colorize prosilver

Post by 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 :)
Need phpBB installation, extenstions, Styles or integrate phpBB with you website?
Contact me @ www.raimon.nl for fair prices and good service!
babylittlekelvin
Registered User
Posts: 52
Joined: Fri May 02, 2008 7:32 pm

Re: [How to] colorize prosilver

Post by babylittlekelvin »

I'm a complete beginner with phpBB3 and i don't really understand when you say:
Raimon wrote: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 :cry: I'm so confused!
want to learn everything!
User avatar
Raimon
Former Team Member
Posts: 12088
Joined: Tue May 30, 2006 5:31 pm
Location: Netherlands
Name: Raimon Meuldijk

Re: [How to] colorize prosilver

Post by Raimon »

babylittlekelvin wrote: >>What do i change(recolour) the bg_list.gif into?
To the colour that you like.
babylittlekelvin wrote: 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 :cry: I'm so confused!
Otherwise the bottom of the (blue) border is a other colour to compare with the top of the border.

:)
Need phpBB installation, extenstions, Styles or integrate phpBB with you website?
Contact me @ www.raimon.nl for fair prices and good service!
User avatar
jtryptophan
Registered User
Posts: 299
Joined: Wed Apr 09, 2008 5:38 pm
Location: Baltimore, MD

Re: [How to] colorize prosilver

Post by jtryptophan »

Any tips on how to colorize the NEWTOPIC and POSTREPLY buttons. The magenta and the baby blue in particular. Gracias!
User avatar
prototech
Former Team Member
Posts: 5406
Joined: Mon Mar 19, 2007 2:04 pm
Location: Southern California

Re: [How to] colorize prosilver

Post by prototech »

jtryptophan wrote: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
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.
marian0810
Former Team Member
Posts: 3011
Joined: Mon May 21, 2007 9:17 pm
Location: The Netherlands
Name: Marian

Re: [How to] colorize prosilver

Post by marian0810 »

Raimon wrote: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! :idea: 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 :D
You and me, time and space. You watch us run!

Return to “[3.0.x] Styles Support & Discussion”