Change box colours

[Guest]

Hi all,

 

How do I change the colour of the boxes (Categories, Manufacturer, Quick Find, Shopping Cart etc)? Not sure which file to look for.

 

Thanks!

[NodsDorf]

Hi all,

 

How do I change the colour of the boxes (Categories, Manufacturer, Quick Find, Shopping Cart etc)? Not sure which file to look for.

 

Thanks!

 

Open your stylesheet.css

 

Located in your catalog directory.

 

To change your color for exaple to black heads with white text it would look like this:

 

TD.infoBoxHeading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 font-weight: bold;
 background: #000000; 
 color: #ffffff
}

 

Or if you wanted to you could make a small repeating image and drop it into your catalog/images folder and use the code like this.

As seen on this website: http://www.onlinecdkey.com

 

TD.infoBoxHeading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px
 font-weight: bold;
 background-image: url('images/infoboxM.gif'); 
 background-repeat: repeat;
 color: #ffffff
}

 

 

The code varies slightly for different versions and some templates use heavily modified .css files.

 

The tags however should be fairly eye catching as you can see from above TD.infoBoxHeading which translates to Table Data for heading of info boxes. There is also another tag for infoContents (ie the stuff inside the boxes) and possibly another for the border color.

[Guest]

Awesome. Thanks very much for this.

 

Just one issue. For some weird reason, the boxes have a part of their original colour on the left side of the box (a tiny square).

Any idea why it does this?

[NodsDorf]

Awesome. Thanks very much for this.

 

Just one issue. For some weird reason, the boxes have a part of their original colour on the left side of the box (a tiny square).

Any idea why it does this?

 

 

Boxes use corner_left, corner_right, corner_left_right images to space the text and/or give them rounded corner effects. You can find them in your catalog/images/infobox folder.

 

 

You can turn them off by going into each boxes .php page but I found it best to replace them with better graphics. If you don't want to use a repeating image like the website I shown above, then you can simply copy the corners and edit them in your photoshop program to be the same color as your header background. then overwrite the ones you have in that location.

 

If you are using a better graphic like I did just use that same pattern to make the corners, then replace the old files with the better graphics.

[Guest]

You can turn them off by going into each boxes .php page but I found it best to replace them with better graphics. If you don't want to use a repeating image like the website I shown above, then you can simply copy the corners and edit them in your photoshop program to be the same color as your header background. then overwrite the ones you have in that location.

 

If you are using a better graphic like I did just use that same pattern to make the corners, then replace the old files with the better graphics.

 

Cool thanks for that. I think I will actually change the graphics, but I just want to understand where things are at the moment.

 

Just wondering, how do you turn off the corner images? I assume I need to go into catalog/includes/boxes/categories.php if I want to edit the Categories box. Which line calls the corner image?

 

Thanks again.

[Guest]

Cool don't worry I've figured it out. I went to boxes class and commented out the line:

$left_corner = tep_image(DIR_WS_IMAGES . 'infobox/corner_right_left.gif');

 

Hopefully this won't cause too many undesirable consequences :)

 

Thanks very much for your help.

[germ]

One way to do it