Forums / Templates, Stylesheets, Page Layout / Changing color of Text Boxes / Background

Changing color of Text Boxes / Background

Locked

Views: 950

Results 1 to 4 of 4
This thread is locked. New replies are disabled.
30 May 2010, 9:54 PM
#1
glittergirljo avatar

glittergirljo

New Zenner

Join Date:
May 2010
Posts:
20
Plugin Contributions:
0

Changing color of Text Boxes / Background

Hello:

I would like to change the default green color of my header boxes (the ones that say CATEGORIES, CURRENCIES, IMPORTANT LINKS, etc.). I also want to change the background from white to another color.

I know its in the stylesheet, but where?

Thank you!:blink:

30 May 2010, 11:52 PM
#2
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: Changing color of Text Boxes / Background

The sidebox header backgrounds are images called tile_back.gif.

If you want to remove that image for all sideboxes (and centerboxes), remove the red part:

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
margin: 0em;
background-color: #abbbd3;
background-image: url(../images/tile_back.gif);
padding: 0.5em 0.2em;
}

Then you can change the green part to the color you want.

To change the sidebox background:

.sideBoxContent {
background-color: #ffffff;
padding: 0.4em;
}
If you want to change the boxes individually, you'll need to add statements to the stylesheet, using the proper class and id names, like #categories, #categoriesHeading, etc.

The easiest way to figure out what is where is by installing the Firefox browser and the Web Developer plugin for Firefox. You can use those to see where in the stylesheet you change the styling of the various page elements.

Ctrl-Shift-Y will allow you to hover over a section of the page and see the class and id names for that section in the box at the top. The statements in the stylesheet that begin with # are id's and the ones that begin with dots are classes.

Ctrl-Shift-E will open the CSS editor and allow you to edit the stylesheet and see the changes in real time without changing anything permanently. A very handy tool.

7 Jul 2010, 1:40 AM
#3
glittergirljo avatar

glittergirljo

New Zenner

Join Date:
May 2010
Posts:
20
Plugin Contributions:
0

Re: Changing color of Text Boxes / Background

Thank you!

I have found Firebug to be priceless !

However, I am still having 2 color changing issues:

  1. How do I get rid of the WHITE background that's still showing

  2. How do I change the background color of the boxes that have headings "Product image" "Item name" and "Price"

Relevant URL (it is an adult site, so if you dont want to see a chic in panties, you might not want to click).

https://www.coderedhead.net/shop

Thank you in advance.

7 Jul 2010, 9:51 AM
#4
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: Changing color of Text Boxes / Background

  1. Which white part?

  2. Same as the sideboxes:

.productListing-rowheading {
background-color: #abbbd3;
background-image: url(../images/tile_back.gif);
height: 2em;
color: #FFFFFF;
}

Since Item Name and Price are links, you'll need to add this (adjust color as needed):

.productListing-rowheading a {color:#ffffff;}