Newbie Needing SOme Help With Colour Changing

[DPM]

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?

www.dpmautostyling.co.uk

Damian

[haredo]

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

[DPM]

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

Damian

[Fastcar]

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/cata..._header_bg.gif

http://www.dpmautostyling.co.uk/cata...content_bg.gif

[DPM]

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

Thanks

[gjh42]

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

[DPM]

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

[gjh42]

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;
}

It uses background images reasonably, except that the actual images are just blocks of color, and the identical effect could be gotten more easily by using background-color instead.

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.

[DPM]

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

[DPM]

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