[How to] colorize prosilver

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Anti-Spam Guide
koutimanou
Registered User
Posts: 17
Joined: Tue Feb 05, 2008 11:47 pm

Re: [How to] colorize prosilver

Post by koutimanou »

Salut Raimon,
first of all, A BIG THANK YOU!!!!! In less than 30 minutes, I have learned more than several months of fruitless research on that topic.

I do have a question however. I did everything right (I hope) until I decided to change that gradient.gif and its color CSS background color. Hmmm, i didn't find the result so pretty, so i decided to return to the previous colors for the index (light blue) rows. Things are fine BUT, there is this wide brown banner in the middle of my index page. Is it because i also changed the viewtopic color bg1 and bg2?
Also, should the color of the gradient.gif necessarily match that of the CSS background color?
Thank you sooo much in advance!

Oh by the way, this is my forum address www . frenchtasticpeople . com /phpbb3

Herman
David Sims
Registered User
Posts: 112
Joined: Fri Apr 25, 2008 12:26 am

Re: [How to] colorize prosilver

Post by David Sims »

Raimon wrote: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.
Hi Raimon - can you tell me how to change the background colour of this quote box please? I don't like the light grey, and want to use white (#ffffff) instead.
David
My board > http://www.mgs2000.co.uk < many thanks for all of your help & assistance!
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 »

On styles/prosilver/theme/colours.css

search:

Code: Select all

blockquote {
	background-color: #EBEADD;
	background-image: url("{T_THEME_PATH}/images/quote.gif");
	border-color:#DBDBCE;
}
and change the EBEADD :)
Need phpBB installation, extenstions, Styles or integrate phpBB with you website?
Contact me @ www.raimon.nl for fair prices and good service!
David Sims
Registered User
Posts: 112
Joined: Fri Apr 25, 2008 12:26 am

Re: [How to] colorize prosilver

Post by David Sims »

Perfect Raimon - many thanks! Another one for you now...

When I hover over my forum and topic tiles, the colour is a dark red. I would like to change this to something more suitable for my orange forum. Can you tell me where this is please in colours.css ?
David
My board > http://www.mgs2000.co.uk < many thanks for all of your help & assistance!
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 »

on colours.css

search:

Code: Select all

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

search:

Code: Select all

a.topictitle:hover {
	color: #BC2A4D;
}
change BC2A4D
Need phpBB installation, extenstions, Styles or integrate phpBB with you website?
Contact me @ www.raimon.nl for fair prices and good service!
David Sims
Registered User
Posts: 112
Joined: Fri Apr 25, 2008 12:26 am

Re: [How to] colorize prosilver

Post by David Sims »

Thanks Raimon - what about individual post titles within a topic, how can I change the colour of those?

Sorry for all the questions - you have been very patient and very helpful! ;)
David
My board > http://www.mgs2000.co.uk < many thanks for all of your help & assistance!
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 »

You could change the links general , or you can add your own class for it.

For the links you need to change this on colours.css :

Code: Select all

/*  	
--------------------------------------------------------------
Colours and backgrounds for links.css
-------------------------------------------------------------- */

a:link	{ color: #105289; }
a:visited	{ color: #105289; }
a:hover	{ color: #D31141; }
a:active	{ color: #368AD2; }
if you want to change only the h3 on postings:

open content.css

search:

Code: Select all

.postbody h3 img {
	/* Also see tweaks.css */
	vertical-align: bottom;
}
add before:

Code: Select all

.postbody h3 a:link {
color: #FF0000;
}
:)
Need phpBB installation, extenstions, Styles or integrate phpBB with you website?
Contact me @ www.raimon.nl for fair prices and good service!
David Sims
Registered User
Posts: 112
Joined: Fri Apr 25, 2008 12:26 am

Re: [How to] colorize prosilver

Post by David Sims »

Raimon wrote:if you want to change only the h3 on postings:

open content.css

search:

Code: Select all

.postbody h3 img {
	/* Also see tweaks.css */
	vertical-align: bottom;
}
add before:

Code: Select all

.postbody h3 a:link {
color: #FF0000;
}
:)
Yes but that changes both colours. All I want to do is change the hover colour.

On this topic 'Re: [How to] colorize prosilver' is dark blue at the top of each user's post, but then switches to dark red when you hover the cursor over it. It is that red I want to change, but also leave the dark blue in place.

I also want to change the '[How to] colorize prosilver' at the top of each page of each topic, just above the Post Reply and Search buttons.
David
My board > http://www.mgs2000.co.uk < many thanks for all of your help & assistance!
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 »

David Sims wrote:
Yes but that changes both colours. All I want to do is change the hover colour.

On this topic 'Re: [How to] colorize prosilver' is dark blue at the top of each user's post, but then switches to dark red when you hover the cursor over it. It is that red I want to change, but also leave the dark blue in place.
Just use this code:

Code: Select all

.postbody h3 a:hover {
color: #FF0000;
}
I also want to change the '[How to] colorize prosilver' at the top of each page of each topic, just above the Post Reply and Search buttons.
open styles/prosilver/template/viewtopic_body.html

search:

Code: Select all

<h2><a href="{U_VIEW_TOPIC}">{TOPIC_TITLE}</a></h2>
replace with:

Code: Select all

<h2><a href="{U_VIEW_TOPIC}"  style="color: #FF0000;">{TOPIC_TITLE}</a></h2>
Need phpBB installation, extenstions, Styles or integrate phpBB with you website?
Contact me @ www.raimon.nl for fair prices and good service!
achievehigh.org
Registered User
Posts: 300
Joined: Sat Apr 01, 2006 3:08 am

Re: [How to] colorize prosilver

Post by achievehigh.org »

Hi,

I read the tutorial in the first post of this thread many times and would like to ask some questions. on the forum main page, the forum names still showed in blue after I clicked on the link. I want to change it to another color. Please show me which code to edit.

Question 1:
How do I change the blue color of the words "Rules and Guidelines" in this printscreen? Please take a look at the printscreen here . Situation: When I clicked on the forum name "Rules and Guideslines," it changes from green to blue. I want it to change to another color, not the original blue of the prosilver. How to change that particular color? I checked the visited link in the forum/styles/prosilver/theme/colours.css , but it did not seem to be the place that I needed to edit the color.

2nd Edit: Is it this code? I tried to change it, but it did not seem to be the right code to edit.

Code: Select all

/* a.forumtitle:visited { color: #105289; } */
Question 2:
How do I change the color from blue to other colors for the "online" diagonal display on the right of the avatar (where it tells you whether a particular member is online at that moment).

Please reply soon. I'll be waiting for your answers to my 2 questions. Thanks.


Aside note:
If you're wondering, I purposely made the borders green on the top and orange on the bottom so sort of half green and half orange for the border. I thought it was creative and very different so I left it like that. It was not because I didn't understand the instructions of the tutorial.
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 »

achievehigh.org wrote:Hi,


Question 1:
How do I change the blue color of the words "Rules and Guidelines" in this printscreen? Please take a look at the printscreen here . Situation: When I clicked on the forum name "Rules and Guideslines," it changes from green to blue. I want it to change to another color, not the original blue of the prosilver. How to change that particular color? I checked the visited link in the forum/styles/prosilver/theme/colours.css , but it did not seem to be the place that I needed to edit the color.

2nd Edit: Is it this code? I tried to change it, but it did not seem to be the right code to edit.

Code: Select all

/* a.forumtitle:visited { color: #105289; } */
No you need this code on colours.css ;

Code: Select all

a.forumtitle:active {
	color: #105289;
}
Question 2:
How do I change the color from blue to other colors for the "online" diagonal display on the right of the avatar (where it tells you whether a particular member is online at that moment).
You need to edit the image /styles/prosilver/imageset/en/icon_user_online.gif , and recolor it to o other color , with a program like photo-shop.
Aside note:
If you're wondering, I purposely made the borders green on the top and orange on the bottom so sort of half green and half orange for the border. I thought it was creative and very different so I left it like that. It was not because I didn't understand the instructions of the tutorial.
Its a funny , but creative idea :D
Need phpBB installation, extenstions, Styles or integrate phpBB with you website?
Contact me @ www.raimon.nl for fair prices and good service!
achievehigh.org
Registered User
Posts: 300
Joined: Sat Apr 01, 2006 3:08 am

Re: [How to] colorize prosilver

Post by achievehigh.org »

Thanks, Raimon.

Regarding yesterday's questions:
I already changed the color for active forumtitle before posting my message above, but it didn't work. This was the code that showed I changed the original bluish color to dark green.

Code: Select all

a.forumtitle:active {
	color: #408D0E;
}

The color still showed bluish and not the dark green I changed it to. Please see my printscreen here again where I put a blue box around the words "Rules and Guideslines" to see that it did not change to the color I wanted. Where to change now? I'll check back for your reply.
Last edited by achievehigh.org on Mon Jun 16, 2008 7:49 am, edited 3 times in total.
User avatar
topdown
Registered User
Posts: 635
Joined: Wed Sep 19, 2007 5:16 pm
Location: NE Wisconsin
Name: Jeff Behnke

Re: [How to] colorize prosilver

Post by topdown »

Try refreshing your theme, and clear your browsers cache (press the Ctrl + F5 keys at the same time).
achievehigh.org
Registered User
Posts: 300
Joined: Sat Apr 01, 2006 3:08 am

Re: [How to] colorize prosilver

Post by achievehigh.org »

Thanks, topdown. I logged on the forum and the "active forumtitle" suddenly showed green. After I changed it yesterday, I refreshed many times, but it still showed that original bluish color.

Raimon wrote:You need to edit the image /styles/prosilver/imageset/en/icon_user_online.gif , and recolor it to o other color , with a program like photo-shop.
I recolored the "online" icon but when I put the text on that diagonal background, the text is underneath, not above it. How do I put the text "online" above the background instead? Also, can I request for the original photoshop image of this /styles/prosilver/imageset/en/icon_user_online.gif at phpbb.com forum to edit?


Today's question:
I clicked on "0 new messages" then clicked on a pm title to read a message in my pm inbox, but I saw light blue corners around the box right under "Previous PM in history." Next, I downloaded the image corners_right2.gif, then colored the corners on the top right and bottom right of that box and reuploaded the image, but it only removed the light blue corners on the top right and top bottom of that private message box. It still did not remove the corners on the top left and bottom left of that box. How do I remove that light blue corners around the box that is right below the words "Previous PM in history?"
szarin
Registered User
Posts: 7
Joined: Mon Jun 16, 2008 4:40 pm

Re: [How to] colorize prosilver

Post by szarin »

i read raimon's post several times, it was a great help thank you very much. I am new to php, less than 24 hours hehe. I have been able to change every color and image with the exception of one. I think the biggest reason i haven't been able to change it , i dont know what it's actually called in the code heheh.

In the link below is a screen pic of "Important information and rules". I like the white font, but when i roll over it, its a light blue and it hurts the eyes to look at it. I am trying to find the roll over code that underlines it and changes it to a light blue.

http://www.scarreddreams.net/pics/forumpic.png

So far i haven't screwed up the forum by messing around with colors, and i'm hoping to keep it that way. Any help would be greatly appreciative. thanks in advance.

szarin.

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