Customize Color of Sidebox Name (Link)

My concern is about the color of the 'Shopping Cart' name on my sidebox. Unlike the other sidebox names (categories, search, more information, etc), the color of the 'shopping cart' sidebox name is different because it is a link. When you hover over it, it changes to another color. I want to be able to change the color (before & after hovering) of this sidebox name. Where do I change this and how?

Also, how can I disable or turn-off this link function of sidebox names?

Thank you so much for your help. :sadwalk:

In your stylesheet, find or add

#shoppingcartHeading a

and give it a color

#shoppingcartHeading a {
color: #aaccee;
}

and then style the hover

#shoppingcartHeading a:hover {
color: #bbddff;
}

Thank you so much for your time and effort.

I tried to look for '#shoppingcartHeading a' in stylesheet.css and I couldn't find it. If I'm gonna make one, I don't know the exact spot where I should incorporate it. I don't want to mess up with the stylesheet. I saw h1, h2... codes in it and I wonder if they have something to do with the color of the sidebox name link.

Guess I need to learn more about the stylesheet.

Thank you for helping me.

There is a /sideboxes/ section near the bottom of stylesheet.css - that would be a sensible place to put the info.

Just add the whole block

#shoppingcartHeading a {
    color: #aaccee;
    }

#shoppingcartHeading a:hover {
    color: #bbddff;
    }

there and adjust to your liking.

Thank you so much for your help. Below is a chunk of my stylesheet.css where I made the changes.

/sideboxes/
.columnLeft {}

h3.leftBoxHeading, h3.leftBoxHeading a {
font-size: 1em;
height: 22px;
color: #FFFFFF;
}

.leftBoxHeading, .centerBoxHeading {
margin: 0em;
background-color: transparent;
padding: 0.5em 0.2em;
}

.leftBoxHeading {
margin: 0em;
background-color: transparent;
padding: 5px 0px;
background-image: url(../images/menu_bg.gif);
background-repeat: no-repeat;
}

.leftBoxContainer {
border: none;
}

.sideBoxContent {
background-color: transparent;
padding: 0.4em;
}

h3.rightBoxHeading, h3.rightBoxHeading a {
font-size: 1em;
height: 22px;
color: #FFFFFF;
}

.rightBoxHeading {
margin: 0em;
background-color: transparent;
padding: 5px 0px;
background-image: url(../images/menu_right_bg.gif);
background-repeat: no-repeat;
}

.rightBoxContainer {
border: none;
}


h3.leftBoxHeading a:hover {
color: #FFFF33;
text-decoration: none;
}

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

.rightBoxContent {
background-color: #000000;
margin-bottom: 1em;

The red text is the one I tweaked to change the color of the text PRIOR TO HOVERING and it failed. There wasn't any effect at all.

The blue text is the one I tweaked to change the color of the text WHEN YOU HOVER over it and it was successful.

Can you please help me on how I could change the color of it PRIOR TO HOVERING?

Thank you so much for your time.

Do you know how to turn the style off for a sidebox? If i use the blank side box module to insert an image in my sidebox it still has the header and background colour which kinda messes up the image!

Cheers

Something like

#blankSideBoxName .sideBoxContent {
    background-color: transparent;
    }

#blankSideBoxName h3 { display: none;}
```may work.
I would have to see it live to give the exact selectors to use, especially as you have a Template Monster template. They typically discard many of the standard Zen Cart identifying tags, and this may even affect your new blank sidebox.