Newbie Needing SOme Help With Colour Changing

Someone designed and built the website for me 2 years ago and now with him having a new job and being mega busy i'm having to do it but the problem is i don't have a clue.

I'm trying to firstly change all the headers to silver with a hairline black border and then the sideboxes to white with a hairline black border and black text.

Can anyone help please?

https://www.dpmautostyling.co.uk

Damian

DPM:

I'm trying to firstly change all the headers to silver with a hairline black border

Locate the override folders for the site

A. includes/ templates/ your_template/ templates/ stylesheet.css

Look for:

h3.leftBoxHeading, h3.leftBoxHeading a, h3.leftBoxHeading label, h3.rightBoxHeading, h3.rightBoxHeading a, h3.rightBoxHeading label {
font-size: 1em;
color: #ffffff;}

Delete and Add the following:

h3.leftBoxHeading, h3.leftBoxHeading a, h3.leftBoxHeading label, h3.rightBoxHeading, h3.rightBoxHeading a, h3.rightBoxHeading label {
font-size: 1em;
color: #FF0000;
border: solid 2px #000000;}

The red lettering you will edit to your needs. Like silver or any border color

Doesn't seem to be working, this is so confusing!

Damian

You will find that the heading and box colours are not actually controlled by the stylesheet, instead, whoever originally made the layout has actually used images:

http://www.dpmautostyling.co.uk/catalogue/includes/templates/future_zen/images/sidebox_header_bg.gif

http://www.dpmautostyling.co.uk/catalogue/includes/templates/future_zen/images/sidebox_content_bg.gif

So what should i do now? Is it best to change it and go to stylesheet or just ebit the images?

Thanks

Definitely scrap those images (they're nothing but rectangles of solid color anyway - silly way to do it) and use the stylesheet.

How do i go about doing this? Will it alter the size of thngs aswell?

The existing images have nothing to do with the size of boxes, so eliminating them won't hurt.

This is part of your existing stylesheet:```
/sideboxes/

.columnLeft, {
padding-left: 8px;
}

h3.leftBoxHeading, h3.leftBoxHeading a, h3.leftBoxHeading label, h3.rightBoxHeading, h3.rightBoxHeading a, h3.rightBoxHeading label {
font-size: 1em;
color: #ffffff;
}

h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover{
color: #FFFFFF;
text-decoration: none;
}

.leftBoxHeading, .rightBoxHeading {
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 2px;
background-image:url(../images/sidebox_header_bg.gif);
background-repeat:no-repeat;
padding: 0.5em 0.2em;
}

.centerBoxWrapper {
margin: 0;
background-image:url(../images/title_cap_left.gif);
background-repeat:no-repeat;
background-position:top left;
}

.centerBoxHeading {
margin: 0;
height:32px;
background-image:url(../images/title_cap_right.gif);
background-repeat:no-repeat;
background-position:top right;
padding: 0.5em 0.2em;
}

.leftBoxContainer {
margin-top: 1em;
}

.leftBoxContainer a:link, .rightBoxContainer a:link {
color: #18089c;
}

.leftBoxContainer a:visited, .rightBoxContainer a:visited {
color: #18089c;
}

.leftBoxContainer a:hover, .rightBoxContainer a:hover {
color: #18089c;
}

.sideBoxContent {
background-image:url(../images/sidebox_content_bg.gif);
background-repeat:no-repeat;
background-position:bottom;
padding: 0.4em;
}

.sideBoxContentB {
margin-left: -2px;
background-image:url(../images/sidebox_content_bg.gif);
background-repeat:no-repeat;
background-position:bottom;
padding: 0.4em;
}

What you describe does not sound like it will require any images, so you can delete every line in this section with background-image:, background-repeat:, or background-position:, and insert

background-color: #abcdef;

wherever it is needed (adjust color as desired). Try this ```
/*sideboxes*/

.columnLeft, {
padding-left: 8px;
}

.leftBoxContainer {
margin-top: 1em;
background-color: #ffffff;/*white sideboxes*/
}

h3.leftBoxHeading, h3.leftBoxHeading a, h3.leftBoxHeading label, h3.rightBoxHeading, h3.rightBoxHeading a, h3.rightBoxHeading label {
font-size: 1em;
color: #000000;/*black text*/
}

h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover{
color: #333333;/*gray hover text*/
}

.leftBoxHeading, .rightBoxHeading {
margin: 0 0 2px 0;
border: 1px solid #000000;
padding: 0.5em 0.2em;
}

.centerBoxWrapper {
margin: 0;
}

.centerBoxHeading {
margin: 0;
height:32px;
padding: 0.5em 0.2em;
}

.leftBoxContainer {
margin-top: 1em;
}

.leftBoxContainer a:link, .rightBoxContainer a:link {
color: #000000;
}

.leftBoxContainer a:visited, .rightBoxContainer a:visited {
color: #000000;
}

.leftBoxContainer a:hover, .rightBoxContainer a:hover {	
color: #333333;
}

.sideBoxContent {
padding: 0.4em;
}

.sideBoxContentB {
margin-left: -2px;
padding: 0.4em;
}
```I leave the rest to you, as your description is open to interpretation and you know exactly how you want it to look. You can apply styling to a combination of container, heading and content elements as required.

Thanks for your reply. I've done the changes as above but it doesn't seem to have altered anything?

Ahhh, got it working but when i do it loses the bits down the side. Anyone know how i can keep them whilst still doing the change as above?

Thanks

Here is a start.

body {
    background-color: #000000;
    ...
    }

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
border: 1px solid #000000;
background-color: silver;
font-weight: bold;
color: #000000;
height: 1%;
width: 99.8%;
}

#navMain ul, #navSupp ul, #navCatTabs ul  {
margin: 0;	
padding:  0.1em 0.4em;
list-style-type: none;
text-align: center;
line-height: 1.5em;
}

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
display: inline;
white-space: nowrap;
}

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
text-decoration: none;
padding: 0em;
padding-left: 1em;
margin-left: 0.3em;	
}
/*sideboxes*/

.columnLeft, {
padding-left: 8px;
}

h3.leftBoxHeading, h3.leftBoxHeading a, h3.leftBoxHeading label, h3.rightBoxHeading, h3.rightBoxHeading a, h3.rightBoxHeading label {
font-size: 1em;
color: #000000;
}

h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover{
color: #333333;
text-decoration: none;
}

.leftBoxHeading, .rightBoxHeading {
margin: 0 0 2px 0;
background-color: silver;
border: 1px solid #000000;
padding: 0.5em 0.2em;
}

.centerBoxWrapper {
margin: 0;
background-image:url(../images/title_cap_left.gif);
background-repeat:no-repeat;
background-position:top left;
}

.centerBoxHeading {
margin: 0;
height:32px;
background-image:url(../images/title_cap_right.gif);	
background-repeat:no-repeat;
background-position:top right;
padding: 0.5em 0.2em;
}

.leftBoxContainer {
margin-top: 1em;
}

.leftBoxContainer a:link, .rightBoxContainer a:link {
color: #18089c;
}

.leftBoxContainer a:visited, .rightBoxContainer a:visited {
color: #18089c;
}

.leftBoxContainer a:hover, .rightBoxContainer a:hover {	
color: #18089c;
}

.sideBoxContent {border: 1px solid #000000;
padding: 0.4em;
}

Thanks again mate, tried those but seems to send things a bit wierd. Changes the 3 left sidebox banners to how i want them but keeps the boxes underneather them the same colour as now. What i'm trying to do on the homepage is keep the layout exactly the same but change all the left sideboxes and box headers to black borders, white backround and black text but keep that small gap inbetween the banner and the box underneath it. It's driving me crazy! :frusty:

The previous list I posted was somehow missing some of the required properties. This will do it for the sideboxes:

/*sideboxes*/

.columnLeft {
padding-left: 8px;
}

.leftBoxContainer {
margin-top: 1em;
}

h3.leftBoxHeading, h3.leftBoxHeading a, h3.leftBoxHeading label, h3.rightBoxHeading, h3.rightBoxHeading a, h3.rightBoxHeading label {
font-size: 1em;
color: #000000;/*black text*/
}

h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover{
color: #333333;/*gray hover text*/
}

.leftBoxHeading, .rightBoxHeading {
margin: 0 0 2px 0;
border: 1px solid #000000;
background-color: silver;
padding: 0.5em 0.2em;
}

.centerBoxWrapper {
margin: 0;
}

.centerBoxHeading {
margin: 0;
height:32px;
padding: 0.5em 0.2em;
}

.leftBoxContainer {
margin-top: 1em;
}

.leftBoxContainer a:link, .rightBoxContainer a:link {
color: #000000;
}

.leftBoxContainer a:visited, .rightBoxContainer a:visited {
color: #000000;
}

.leftBoxContainer a:hover, .rightBoxContainer a:hover {	
color: #333333;
}

.sideBoxContent {
border: 1px solid #000000;
background-color: #ffffff;/*white sideboxes*/
padding: 0.4em;
}

.sideBoxContentB {
margin-left: -2px;
padding: 0.4em;
}

Perfect, thanks bud!

Now i'm trying to get the white part at the top where my logo is to match the side and be black but when i change it it makes the whole middle section black, why is that?

Also trying to get the top bar to match the silver with black text and border instead of the blue and white how it is now but can't find that anywhere!

I don't know how you guys get so good at this, everything i try to do beats me!

Right i've managed to change the colour of the nav main but it's slightly to the right by 1px, i can't figure out why this is?

Still trying to get the white part at the top of the page where my logo is to match the side and be black but when i change it it makes the whole middle section black, why is that?

You need to learn the method we use to find things so easily.

Install Firefox and get its extensions Web Developer and Firebug (some prefer one, some prefer the other).

Use the Web Developer's Information > Display Element Information button, and click on any item you want to know about. The yellow box will show the element's identity and all of its ancestors and children, among other things. You can take this to the stylesheet and apply styling as you wish.

Now i'm even more confused, i've downloaded it and tried to register with no joy.

That's odd... unfortunately I can't offer any suggestions as to why Firefox would not be installing on your computer. It would require a FF expert with full access to your system to say for sure.
If you give more details about what you have done and error messages you have gotten, someone may have an idea.

I'm in Firefox but unregistered and when i bring up my website the layout is slightly different to when i bring it up in Internet Explorer.

That's no surprise, especially if you have IE6. IE has many CSS bugs and oddities that make it not work the way CSS standards would indicate. It also often tries to compensate for HTML/CSS errors by displaying what it thinks you meant instead of what you actually told it; thus, incorrect code that gives the intended result in IE can break in Firefox, which displays what you tell it.