NavCatTabs Color clash

[BenLit2009]

Hi,

Im having problems changing the colour of my navcatTabs products list text as it clashes with other items on my websites colors.

http://www.westwalesfibreglass.co.uk/

As the background is black on the menu I would like to see the text in white. But for the rest of my text on the new products photo items to be black I need to change the navcatTabs.

Hope that makes sense. Can anybody help please. Thanks.

[stevesh]

Not exactly sure what you mean, but you can separate items from rules in the stylesheet, like this (for example):

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
color: #FFFFff;
white-space: nowrap;
}

can be:

#navMain ul li a, #navSupp ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
color: #FFFFff;
white-space: nowrap;
}

and:

#navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
color: #000000;
white-space: nowrap;
}

[BenLit2009]

Hi,
Thanks for the reply.

If you visit my website now. www.westwalesfibreglass.co.uk you will see that the problem I have is highlighted in pink. navcatTabs seems to control both of these elements. Is there any way of seperating them so that they can be two different colours.

Thanks.

Ben.

[leest35]

It looks like your links are the same colours, for example try adding

a.category-top
{
color:#Your Color
}

to see if that changes the colour of your menu links and then adjust the other links to the colour you want.

The easiest way is to at the moment they all seem pink, to make your life easier try adding the web developers plugin for fire fox it allows you to highlight areas of your website and identify the element id or class which makes making changes a lot easier.

Hope it helps

[BenLit2009]

Hi,

Ive changed the website link colours to how they should be and the Category.Top to yellow.

Its not changed it.

This is the information showing on google chrome.

element.style {
}
Matched CSS Rules
a:link, #navEZPagesTOC ul li a {
color: black;
text-decoration: none;
}
a.category-top {
color: #FFF333;
}
a:-webkit-any-link {
color: -webkit-link;
cursor: auto;
text-decoration: underline;

the underlined phrases were crossed.


Is it possible to remove the matched link rule from the a.category-top . Would that work.

Thanks, new to all this so figuring it all out as I go.

:)

[stevesh]

Two things, now that I know you're talking about the Categories sidebox links:

Zencart loads all stylesheets with the css extension that are in the current template's css folder, so you have two sheets fighting each other. Rename stylesheetlast.css (or stylesheet.css) to stylesheet.old or move it to a different folder.

Stylesheets are applied top to bottom, so your a.category-top rule is being overridden by subsequent a rule(s). Place that rule at the bottom of the sheet, and it should work.