How to change colors of boxes?

[Guest elmbrook]

Can anyone direct me to info on how to change everything that is blue in the install home page to another color? I have changed the background color but all the boxes are still blue.

Rich

[Guest vrakas]

Hi Rich

To change the look of your Cube Cart even more you basically will need to alter style.css and layout.css both are found in the skin's folder, inside a folder called stylesSheets.

Look at the top of this forum a pinned post

Try the search button if this does not help you. :)

[Guest elmbrook]

OK. I can change the surround background color and the background color in the various boxes on the home page. What I need is detail about where and how to change the current blue color in the heading for each of the various boxes to another color. For example, the first box on the left is "Shop by Category." How do I change that from blue to another color?

Rich

[roban]

As vrakas stated, you'll find all this in layout.css:

.boxContent {

border-top: 3px solid #CFE3F5;

border-right: 1px solid #cccccc;

border-bottom: 1px solid #cccccc;

border-left: 1px solid #cccccc;

padding: 3px;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 75%;

color: #333333;

margin-bottom: 5px;

Please do a search as this has all been posted many times.

This might also help and has been posted.

css.txt

[markscarts]

@ elmbrook, look in layout.css, change the properties of .boxTitleLeft, .boxTitleRight

B)

[Guest]

The background for the titles is an image and not a solid color. The image is called boxTitleBg.gif and is in the styleImages/backgrounds folder. Open that up in a program like photoshop and change it's color. Or you can delete the line of code in the layout.css file that calls for the image and then change the background color to what ever color you like.

Like this:

.boxTitleLeft, .boxTitleRight {

	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size: 75%;

	color: #FFFFFF;

	background-color: #031074;

	background-image: url(../styleImages/backgrounds/boxTitleBg.gif);

	height: 15px;

	border-top: 1px solid #000000;

	border-left: 1px solid #000000;

	border-right: 1px solid #000000;

	padding-left: 5px;

}

delete this: 

	

background-image: url(../styleImages/backgrounds/boxTitleBg.gif);

and change this to the color you want:

  

background-color: #031074;

I have a Tips page on my site that you might find useful.

Have fun!

Jen

[markscarts]

The full monte, courtesy of Jen! Good show B)

[Guest elmbrook]

Thanks Jen! That's what I needed. I was starting to think I would need to do something with that image. I'm glad you confirmed it and detailed how to make the changes.

Rich