[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
Contact:

Re: [How to] colorize prosilver

Post by Raimon » Mon Jun 16, 2008 7:19 pm

achievehigh.org wrote: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.
Could you post a link to your board ?
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?
How did you made the image , did you just recolor it , or did you make a new one ?
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?
Try this topic ; http://www.phpbb.com/community/viewtopi ... 23&t=44873

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?"
You need to edit the image ; corners_left2.gif, you only edit the right corners image :)
szarin wrote: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.
You need to edit the next thing on colours.css

Code: Select all

#search-box a:hover, .navbg a:hover, .forumbg .header a:hover, .forabg .header a:hover, th a:hover {
   color: #A8D8FF;
}
:)
Need phpBB installation, extenstions, Styles or integrate phpBB with you website?
Contact me for fair prices and good service!

szarin
Registered User
Posts: 7
Joined: Mon Jun 16, 2008 4:40 pm

Re: [How to] colorize prosilver

Post by szarin » Mon Jun 16, 2008 7:38 pm

of course, now that you pointed that out, it makes complete sense. thank you once more!!

achievehigh.org
Registered User
Posts: 300
Joined: Sat Apr 01, 2006 3:08 am
Contact:

Re: [How to] colorize prosilver

Post by achievehigh.org » Tue Jun 17, 2008 7:41 am

Raimon, thanks.

Here is the forum link . The "active forumtitle" shows green now. Also thanks for the graphic request link.

I want to continue to edit all the blue words and boxes to match the forum main colors green and orange.

Question 1:
After I logged in and also after I posted a message, I see a light blue box. How do I change it to a shade of green? Which code do I need to edit?

Question 2:
At the bottom of this page, I see "forum permissions" in blue (all in capital lettters). Which code to edit to change the dark blue words to another color?

Please show me. Thanks.

Edit passed 3AM:
Question 3:
I followed the steps in the first post of this thread and checked my forum pages as I perform each step and also after I finished each step. When I clicked on the "Moderator Control Panel" from the main forum page, I only saw an offwhite tab with the word "Front page" in reddish pink on that tab. I did not see any other tabs above or below the "Front page" tab. Is this the way it appears? Or, did I miss something that is why only the "Front page" tab shows after editing the prosilver colors to my forum theme colors?

User avatar
Raimon
Former Team Member
Posts: 12088
Joined: Tue May 30, 2006 5:31 pm
Location: Netherlands
Name: Raimon Meuldijk
Contact:

Re: [How to] colorize prosilver

Post by Raimon » Tue Jun 17, 2008 4:28 pm

achievehigh.org wrote:
Question 1:
After I logged in and also after I posted a message, I see a light blue box. How do I change it to a shade of green? Which code do I need to edit?
On colours.css

Code: Select all

.panel {
	background-color: #ECF1F3;
	color: #28313F;
}
and change the background-color.
achievehigh.org wrote: Question 2:
At the bottom of this page, I see "forum permissions" in blue (all in capital lettters). Which code to edit to change the dark blue words to another color?

Please show me. Thanks.
on colours.css

search:

Code: Select all

h3 {
	border-bottom-color: #CCCCCC;
	color: #115098;
}
and change the color value.
achievehigh.org wrote: Edit passed 3AM:
Question 3:
I followed the steps in the first post of this thread and checked my forum pages as I perform each step and also after I finished each step. When I clicked on the "Moderator Control Panel" from the main forum page, I only saw an offwhite tab with the word "Front page" in reddish pink on that tab. I did not see any other tabs above or below the "Front page" tab. Is this the way it appears? Or, did I miss something that is why only the "Front page" tab shows after editing the prosilver colors to my forum theme colors?
Normally its is the right way, i assume you mean no other navigation <li> links.
The tabs are on the top of the page with the name ; "main" , "banning" etc etc :)
Need phpBB installation, extenstions, Styles or integrate phpBB with you website?
Contact me for fair prices and good service!

ftpz
Registered User
Posts: 27
Joined: Sun Mar 16, 2008 10:28 pm

Re: [How to] colorize prosilver

Post by ftpz » Tue Jun 17, 2008 5:45 pm

i've installed phpbb on localhost. i can modify colors in subsilver2 but i can't do any modifications in prosilver. what could be the problem? thanks

User avatar
Raimon
Former Team Member
Posts: 12088
Joined: Tue May 30, 2006 5:31 pm
Location: Netherlands
Name: Raimon Meuldijk
Contact:

Re: [How to] colorize prosilver

Post by Raimon » Tue Jun 17, 2008 5:51 pm

did you try to refresh the cache after you edit the stylesheet ( acp -> styles -> themes -> click on the right link of the style name on refresh ? )
Need phpBB installation, extenstions, Styles or integrate phpBB with you website?
Contact me for fair prices and good service!

ftpz
Registered User
Posts: 27
Joined: Sun Mar 16, 2008 10:28 pm

Re: [How to] colorize prosilver

Post by ftpz » Tue Jun 17, 2008 5:55 pm

yeah- i saved the colors file, purged cache at admin cp, and refreshed the link. it halts a bit as though it's gonna change but then it's the same after refresh!

User avatar
Raimon
Former Team Member
Posts: 12088
Joined: Tue May 30, 2006 5:31 pm
Location: Netherlands
Name: Raimon Meuldijk
Contact:

Re: [How to] colorize prosilver

Post by Raimon » Tue Jun 17, 2008 6:14 pm

Did you turn on the Recompile stale style components ?
It would save you alot time , because you don't have to refresh and prune the cache with every edit.
And what did you change on your colours.css?
Need phpBB installation, extenstions, Styles or integrate phpBB with you website?
Contact me for fair prices and good service!

ftpz
Registered User
Posts: 27
Joined: Sun Mar 16, 2008 10:28 pm

Re: [How to] colorize prosilver

Post by ftpz » Tue Jun 17, 2008 9:54 pm

hey thanks for the great tip raimon!

it worked-

dinopc
Registered User
Posts: 8
Joined: Wed May 28, 2008 10:21 pm

Re: [How to] colorize prosilver

Post by dinopc » Wed Jun 18, 2008 3:16 pm

This topic has been quite helpful.

I would also like to change the hovering background color of the topics, but I cannot seem to find this code in the colour.css. The default color is a light yellow of sorts. Might you be able to point me to exactly where that code is? - or perhaps it is an image file that I have to recolor?

Thanks.

User avatar
Raimon
Former Team Member
Posts: 12088
Joined: Tue May 30, 2006 5:31 pm
Location: Netherlands
Name: Raimon Meuldijk
Contact:

Re: [How to] colorize prosilver

Post by Raimon » Wed Jun 18, 2008 4:54 pm

on colours.css

search:

Code: Select all

li.row:hover {
	background-color: #F6F4D0;
}
and change the F6F4D0 :)
Need phpBB installation, extenstions, Styles or integrate phpBB with you website?
Contact me for fair prices and good service!

scottybt
Registered User
Posts: 130
Joined: Sun May 11, 2008 5:39 pm

Re: [How to] colorize prosilver

Post by scottybt » Wed Jun 18, 2008 6:48 pm

Thank you very much for this thread Raimon!

Just one thing left that I'm wondering..
On this picture: http://www.mitoforum.org/priv/bilder/forum4.PNG
How do I change the color of these boxes? It's basically the background boxes of the categories on the index page.

Thanks

User avatar
Raimon
Former Team Member
Posts: 12088
Joined: Tue May 30, 2006 5:31 pm
Location: Netherlands
Name: Raimon Meuldijk
Contact:

Re: [How to] colorize prosilver

Post by Raimon » Wed Jun 18, 2008 6:51 pm

On colours.css

Code: Select all

ul.forums {
	background-color: #eef5f9;
	background-image: url("{T_THEME_PATH}/images/gradient.gif");
}
change the background-color , and edit the image theme/images/gradient.gif to a other color , with photoshop or a other photo-editor program.
Need phpBB installation, extenstions, Styles or integrate phpBB with you website?
Contact me for fair prices and good service!

achievehigh.org
Registered User
Posts: 300
Joined: Sat Apr 01, 2006 3:08 am
Contact:

Re: [How to] colorize prosilver

Post by achievehigh.org » Sat Jul 19, 2008 4:32 pm

Raimon wrote:On colours.css

Code: Select all

ul.forums {
	background-color: #eef5f9;
	background-image: url("{T_THEME_PATH}/images/gradient.gif");
}
change the background-color , and edit the image theme/images/gradient.gif to a other color , with photoshop or a other photo-editor program.

Please look at the boxes under "Recent Topics" of my forum here, especially the first box which has this color f3eee2. Then please look at the first box under the category "RULES - Must Read!" which has a silverish color. I think it's this color F9F7F6.
I would like to change the silverish background color of each first box under each category "RULES - Must Read!" "Life Matters," "General," just to name a few categories so you know what I am talking about. I want to change that silverish color F9F7F6 to f3eee2 but how? Do I change the gradient.gif to f3eee2 ? Please assist and show me the code to edit. Thanks.

Note: I already tested by changing many codes in colours.css, but none of them would change that the background color of the first box under each category to the color I want.

szarin
Registered User
Posts: 7
Joined: Mon Jun 16, 2008 4:40 pm

Re: [How to] colorize prosilver

Post by szarin » Mon Jul 21, 2008 6:59 pm

interesting problem.

After spending several days coloring, modifying a profile that is based on prosilver i noticed a small glitch.
My tabs are not showing properly in the user control panel.

The profile i am working on is Swanky's Right profile, with a few modifications. I have used the tutorial to switch the profiles from the right to the left and i have also moved the padding down for the site logo to add the rounded corners of the bg image of the header. At the very top i added custom links using CSS formatting in the beginning of the overall_header.html

I know that the fix should be in one of the ucp templates. But not sure where to start. I thought everything was going just fine until i checked this last page out. If anyone has any ideas, i'd love to hear them. The following is the beginning code to the overall_header.html - i dont think this is the cause, but just incase you were wondering what i did heh.

Code: Select all

<!-- 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}" xml:lang="{S_USER_LANG}">
<head>  
-->



<!-- Custom header with added css text 
<style type="text/css">
globalNav {
         position: relative;
         width: 100%;
         min-width: 640px;
         height: 32px;
         color: #cccccc;
         padding: 0px;
         margin: 0px;
background-image:  url("glbnav_background.gif");
}
</style>

-->

<div id="mastheadforums">
<div class="style20" id="globalNav"> 
      <div align="left" class="usertitle style22">  
<div style="position:relative; left:0px; top: -30px; color : #cc0000;">
      <div align="center"><span class="style16">|<a href="http://www.scarreddreams.net/" class="glink"> ScArREd DrEAms.NeT </a><span class="style16">|<a href="http://www.scarreddreams.net/forums" class="glink"> Teh FoRuMS </a>|<a href="http://www.cafepress.com/scarreddreams" class="glink"> Teh St0Re </a>|<a href="http://www.scarreddreams.net/pics/album" class="glink"> Redneck Adventures </a>|<a href="http://www.mmmyeah.com" class="glink"> MmmYeah </a>|<a href="http://www.arcadiandelsol.com/" class="glink"> Acaidan Del Sol </a>|<a href="http://www.slashdot.org/" class="glink"> Slash Dot </a>|<a href="http://www.sinfest.net/" class="glink"> Sinfest </a>|<a href="http://www.penny-arcade.com/" class="glink"> Penny Arcade </a>|<a href="http://www.pvponline.com/" class="glink"> PvP Online </a>|<a href="http://www.gucomics.com/" class="glink"> GU Comics </a></span><span class="style16"><a href="http://www.gucomics.com/" class="glink"></a>|<a href="http://www.wtfcomics.com/" class="glink"> WTF Comics </a> |</span></div>
    </div>
  </div> 
  
  <div align="center">


Locked

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