CSS 'virgin' modifying Product Category text

Good evening zenners,

I have only touched a css file since zenning, and it was only the colors.css in my custom template, which was easy enough.

I added some products that (eventually) will be showcased, and other items that will be 'add to cart'. So - my new Document-General box title is showing funky colors. I want it to be white against plum background and similar font as my other boxes.

I found a file in my custom template folder called stylesheet_categories_menu.css containing the following:

body { behavior: url(includes/csshover.htc);} /* WinIE behavior call /
div#nav-cat {float: left; width: 140px; margin: -1px 0 0 -1px;
background-color: #CE318C; font-weight:bold;}
div#nav-cat ul {margin: 0; padding: 0; width: 140px; background-color: #3C097A;
/ border: 1px solid #AAA;/}
div#nav-cat ul.level2 {background-color: #3C097A;}
div#nav-cat ul.level3 {background-color: #3c097A;}
div#nav-cat ul.level4 {background-color: #3C097A;}
div#nav-cat ul.level5 {background-color: #3C097A;}
div#nav-cat ul.level6 {background-color: #3C097A;}
div#nav-cat li {position: relative; list-style: none; margin: 0;
margin-top: 5px; / change it to whatever space you want to put space between buttons*/
border-bottom: 1px solid #CCC; /* <---this line may help or hinder IE menu shifting issues /
}
div#nav-cat li li {
margin: 0; / this overrides the margin-top in the declaration above */
}
div#nav-cat li:hover {background-color: #CE318C;}
div#nav-cat li.submenu {
background: url(../images/submenu.gif) 95% 50% no-repeat;
background-color: #3c097A;}
div#nav-cat li.submenu:hover {background-color: #CE318C;}
div#nav-cat li a {display: block; padding: 0.25em 0 0.25em 0.5em;
text-decoration: none; width: 140px; color: white;}
/border-left: 0.5em solid #BBB;}
div#nav li a:hover {border-left-color: red;}/
div#nav-cat>ul a {width: auto;}
div#nav-cat ul ul {position: absolute; top: 0; left: 140px;
display: none;}
div#nav-cat ul.level1 li.submenu:hover ul.level2,
div#nav-cat ul.level2 li.submenu:hover ul.level3,
div#nav-cat ul.level3 li.submenu:hover ul.level4,
div#nav-cat ul.level4 li.submenu:hover ul.level5,
div#nav-cat ul.level5 li.submenu:hover ul.level6 {display:block;}

Is somewhere in here where I'd make the change. You can see what's going on by clicking on my site link below. Its the first box entitled "Invitations."

Thank you eveyone, in advance.

Laura

Did you get it figured out? Looks like the category box in FireFox.

Not a clue, Kim. I need some hand holding on this until I get more CSS literate.

If anyone knows a good online flash-type tutorial (my learning modality is more experiental and auditory - I fall asleep 2 pages into a book), I'd appreciate it. I'm in a semi-rural area and finding an instructor, private or otherwise is a challenge.

Thanks,
Laura

FYI ... the "stylesheet_categories_menu.css" is from the CSS flyout menu contribution.... which I don't think you're using anymore...

Ohhh, I think I know what you mean.

You want the word 'Invitations' to be white instead of plum? The reason it's plum is because it's a link, and all your links are styled that colour. If you want to change all the links that show up in the sidebox headings, then add the following lines to your main stylesheet.

.leftBoxHeading a, leftBoxHeading a:visted {
   color: #fff !important;
}

Thanks - like I said - I have zero knowledge of navigating these css files. I installed the flyout mod and have a prob with that (which I posted in another thread in a different forum category to no avail),

but,

any assistance on this issue would be greatly appreciated.

~Laura

Find the file named 'colors.css', open it up in a text editor. At the very bottom of the file, paste in the code I provided in my first post, then save the file.

Rowan:

Find the file named 'colors.css', open it up in a text editor. At the very bottom of the file, paste in the code I provided in my first post, then save the file.

Thank you so much for your input. I did as you asked and it doesn't seem to be effecting a change.

Any ideas?

I'm curious as to why this box (which is actually is the Document-General box), shows its heading as a link as opposed to the other headers.

Rowan:

.leftBoxHeading a, leftBoxHeading a:visted {
color: #fff !important;
}

Whoo-hoo - its worked - I just fixed the typo in the code (visted to visited)

You are a rock star! Thank you.

(By the way I love you signature - is that from Michelangelo?)

Yeah.

I made some mistakes in the first post.

Try pasting this over the top:

.leftBoxHeading a, .leftBoxHeading a:visited {
   color: #fff !important;
}

Edit: I have no idea where my signature is from.