Changing a NavCat Tab's color on selection.

Hi,

I am a Zen Cart newbie and this is my first post on this forum.

I am trying to set a style for the currently selected navCatTab. I would like to set the background color and borders of the selected tab so that it stands out from the others.

Zen Cart seems to give the anchor's text in the currently selected tab a class called 'category-subs-selected'.

e.g.

I can use this to CSS select the anchor text of selected tabs. But I want to be able to select the entire list item (so I can change the tab's color). Is there a way to do this using CSS? I want to be able to select the parent of something I can select in CSS.

The only other way I can see to do this is to hack the PHP code to assign a class attribute to <li> itself when it is selected.

e.g.

Any thoughts on this would be greatly appreciated.

You can invoke the css inline as you have outlined, or just place it in the stylesheet.css file.

To check, try this (make a copy first) edit this & test in the css file

a:visited {
	color: #005837;
	text-decoration: none;
	}

add this and a color of your choice and see the effect on a visited link.

a:visited {
	color: #005837;
	text-decoration: none;
	background-color: #ffffff;
	}

You can also add border and other styling items.
Now try adding the class that you want to control.

I probably did not express the problem very clearly because I used the word "select" for two different things:

1. Select is used in the CSS sense i.e. to select an HTML element.
2. When a NavCat tab is the last one visited it is said to be "selected".

I would like to change the color of a selected tab, not a visited one. There is no CSS pseudo class selector for 'selected' as there is for 'visited'. Therefore Zen Cart gives the last visited tab (i.e. the 'selected' one) a class attribute called "category-subs-selected". In theory I could use this to select the tab in the style sheet and style it in any way I wished. However the class is actually just wrapped around the text in the link, not the entire <li> element. This means I can change the look of the text but not the actual tab itself.

I am not an expert on CSS so I was wondering if it is possible to select an element that is the parent of a selectable element. If not then it might be more flexible if Zen Cart gave the <li></li> element the class "category-subs-selected" rather than one of its children.

I hope that is a bit clearer (although it make not be :unsure: )

I provided tis as an example only...I avoid hacking the code where ever possible and therefore recommended that you use the css for this. I think that the function you seek is the a: active statement in the css but am not sure as your references to code confuse me straight away.

Thanks kobra. The :active pseudo-class selector almost does what I want - but not quite. It only selects the element whilst it is being clicked. As soon as the mouse button is released it goes back to its original state :( .

I think I probably have to select the element by using the "category-subs-selected" class. I guess that is why it is already generated by Zen Cart anyway. My problem with it though is that it would be better if it was used to classify the whole tab element rather than just the text in it. The way it is it seems to limit a lot of the really cool things that could be done with the NavCat Tabs.

I will probably have to change the PHP so that it inserts this class into the tab element as well. That way it will be possible to style the selected tab from the style sheet.

And yes. I totally agree that it is a much better idea to use the style sheet rather than hack the code whenever possible!