Recolor prosilver template tutorial

Read the manuals , act by the book..
Bookmark and Share

Recolor prosilver template tutorial

Postby mallix on Sat May 09, 2009 10:13 pm

This is a tutorial on how to customize the prosilver skin with your prefered colors.

Table of Contents
1) Starting..
2) change the white background
3) recolor the header image
4) recolor the links
5) recolor the forum links
6) recolor the navbar



1) Starting..
First step is to go to your ACP -> Styles -> Themes and then select edit from prosilver OPTIONS.

Screenshot below:

Image

Then a theme editor will appear with the full css code of prosilver.
Please before you make any changes, copy and paste the whole code in a notepad in case you mess things up.


2) Change the white background

search:
Code: Select all
html, body {
   color: #536482;
   background-color: #FFFFFF;
}   


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


3) 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.

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


replace background color to a color of your choice or the background-image url with your own image like:
Code: Select all
.headerbar {
    background-color: #FFFFFF;
    background-image: url("http://www.bandshoppe.com/images/prd/headwear/plumes_red_color.jpg");
    color: #FFFFFF;
}



4) recolor the links

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

Find:
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.


5) recolor the forum links

Find:
Code: Select all
a.forumtitle {
   color: #105289;
}   


In-line find:
Code: Select all
105289


change it to the right colour.

Find:
Code: Select all
a.forumtitle:hover {
   color: #BC2A4D;
}       


inline find:
Code: Select all
BC2A4D


and change it to the right colour.

Find:
Code: Select all
a.topictitle {
   color: #105289;
}

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

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

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


and change the colors as you like.


5) recolor the navbar

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

Find:
Code: Select all
.navbar {
   background-color: #cadceb; /*narbar background color*/
}   


and change the cadceb to the colour that you want.

Table of Contents
1) Starting..
2) change the white background
3) recolor the header image
4) recolor the links
5) recolor the forum links
6) recolor the navbar


END OF TUTORIAL
foroomy.com Support Team
User avatar
mallix
Foroomy Super User
Foroomy Super User

Status: like.no.other

 
Posts: 996
Joined: Sat Apr 04, 2009 11:34 am

Return to Tutorials / Faq - Info sull' uso / Domande frequenti

Who is online

Users browsing this forum: No registered users and 2 guests

cron