Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Colour of the top bar

Colour of the top bar

Views: 709

Results 1 to 4 of 4
24 Jan 2011, 7:21 PM
#1
gizzy avatar

gizzy

New Zenner

Join Date:
Jan 2011
Posts:
9
Plugin Contributions:
0

Colour of the top bar

Hey guys

Ive a problem, i am new to this to bare with me.

Ive changed the colours of nearly all the bars on my page

But i cannot find were to change the colour for the bar below header and also the very bottom bar of the page(footer)

Website: http://vuegame.com

You will notice how there is a blue bar there.

24 Jan 2011, 7:59 PM
#2
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: Colour of the top bar

Install the Firefox browser and the Web Developer plugin for Firefox. You can use those to see where in the stylesheet you change the styling of the various page elements.

Ctrl-Shift-Y will allow you to hover over a section of the page and see the class and id names for that section in the box at the top. The statements in the stylesheet that begin with # are id's and the ones that begin with dots are classes.

Ctrl-Shift-E will open the CSS editor and allow you to edit the stylesheet and see the changes in real time without changing anything permanently. An essential tool.

Some prefer Firebug, which does much the same thing.

24 Jan 2011, 8:08 PM
#3
gizzy avatar

gizzy

New Zenner

Join Date:
Jan 2011
Posts:
9
Plugin Contributions:
0

Re: Colour of the top bar

Ok i will but for the time being and for other peoples benifit does anyone else know?

25 Jan 2011, 4:22 PM
#4
keneso avatar

keneso

Totally Zenned

Join Date:
May 2009
Posts:
1,273
Plugin Contributions:
3

Re: Colour of the top bar

If I understand correctly which bars you are referring to try these:

in your stylesheet line 859
change the CCCCCC
#navCatTabs {
background-color: #CCCCCC;
}

in your stylesheet line 420
remove border-top
#footerhsy {
background-color: #000000;
border-top: 7px solid #C4CDE0;
color: #DFD9C7;
padding-bottom: 10px;
}