View Full Version : Editing Menu Bar Colour
sarcasticsheep
19-04-07, 16:16
I would like to change the colour used in the menu bars, I have looked at the other templates but there is no flexibility to amend the colours used.
Here is an example of what I mean, I would like the light blue used in the template to be the same colour as the dark navy at the top:
http://img83.imageshack.us/img83/6076/mdnnp6.jpg (http://imageshack.us)
I have looked at the CSS styles file (and almost all of the others) but I can't see where or if I can change this.
Thanks for any help you can give.
sarcasticsheep
20-04-07, 13:56
I don't mean to seem impatient but this is the only thing left to do, and is preventing me from going live with the website.
Can somebody from AW can please advise how to change the colour of the light blue category headers, to the dark blue used in the header?
Website: http://www.mobiledealsnow.com
Confuscius
20-04-07, 14:48
Use your browser to view the source code of your page and find the approriate CSS reference that is controlling the layout of the text. Find this in your CSS and edit it to suit your needs. The design you have uses small graphics to create the rounded corners - you will see them in the CSS file - if you want to keep the rounded corners you may have to create some custom graphics.
N.B. You also need to check your source code as you do not appear to have an opening <html> tag and your bottom td's are outside of your main html body.
sarcasticsheep
20-04-07, 15:14
I have search through the CSS file but I cannot see where it relates to the colour that I need changed. I tried searching by the light blue colour used, which is #0099FF but this is not found.
Here is a snippit of the style sheet I am using.
* Shared elements. All main components use this formatting*/
.sw_searchbox, .sw_hotpicks, .sw_featuredmerch, .sw_cats {
clear: both;
background: #cef url(../images/rounded_bg_bl.gif) no-repeat bottom left;
border: none;
padding: 0;
margin-bottom: 10px;
position: relative;
}
.sw_boxheader {
clear: both;
background: #09f url(../images/rounded_bg_tl.gif) no-repeat top left;
border-bottom: 1px solid #fff;
padding: 0 0 0 10px;
position: relative;
margin-bottom: 0;
}
.sw_boxheader h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
background: transparent url(../images/rounded_bg_tr.gif) no-repeat top right;
color: #fff;
padding-top: 8px;
margin-top: 0;
margin-bottom: 6px;
}
.sw_hotpicks ul, .sw_featuredmerch ul, .sw_cats ul {
list-style-type: none;
margin: 0;
margin-left: 0;
padding: 10px 6px 0 10px;
}
.sw_productdivider {
clear: both;
display: block;
height: 8px;
background: transparent url(../images/rounded_bg_br.gif) no-repeat bottom right;
It seems to use hex colours such as #fff but is this valid hex colour as I thought they had to be 6-digit?
I don't mind if the border edges aren't curved, I would just like the SW box headers to use the same dark blue colour #2A1570
BTW The <TD>'s are outside the </Body> tag because that is a footer.php page that I am using, though I have now added the opening <html> so thanks for pointing that out.
sarcasticsheep
20-04-07, 15:29
Well I have managed to solve the issue, thanks for the advice Confuscius.
The 3 digit hex codes used in the CSS style sheet are an abbreviation of a 6 digit hex code, e.g. #0099ff = #09f
Hope this proves useful to other people, BTW the program I used to find out the hex codes of anything on screen is called Color Picker - invaluable in my opinion :D
Confuscius
20-04-07, 15:46
Glad to hear you got there! If you need some instant new buttons to further mesh in your colour scheme then try www.cooltext.com - nice and easy!
Paul
The 3 digit hex codes used in the CSS style sheet are an abbreviation of a 6 digit hex code, e.g. #0099ff = #09f
Yes this is valid, but you don't see it often. It does tend to get used by people trying to optimise their CSS code so it is as small as possible.