Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / tweaking category sub styles

tweaking category sub styles

Locked

Views: 1,181

Results 1 to 4 of 4
This thread is locked. New replies are disabled.
10 Jul 2009, 8:07 PM
#1
ktomas avatar

ktomas

New Zenner

Join Date:
Nov 2008
Posts:
71
Plugin Contributions:
0

tweaking category sub styles

I'm working on my navigation (using the categories sidebox), and want to switch the way the SPAN.category-subs-parent classes are marked up.

To avoid being incredibly confusing, take a look at how my navigation is currently displayed HERE.

You'll see each sub category with a dashed line underneath. The code to accomplish this is done like this

A.category-subs, A.category-subs:visited {
	border-bottom:2px dashed #B15148;
	border-color:#B15148;
	color:#4D4D4D;
	display:block;
	font-family:Georgia,"Times New Roman",Times,serif;
	font-size:18px;
	font-weight:bold;
	letter-spacing:3px;
	line-height:1;
	padding-bottom:13px;
	text-decoration:none;
	}

What I want, is for the selected subcategories to lose the underline, that way the hierarchy tree won't be interrupted by the dashed line.

The current markup looks like this

<a class="category-subs" href="http://www.sweetjujubead.com/catalog/index.php?main_page=index&cPath=11_1_2">
<span class="category-subs-parent">     Gold Band</span>
</a>

If I could wrap the ENTIRE selected category in the "category-subs-parent" class, then I think I could set it to border: none; and accomplish what I'm looking to do.

The markup would look something similar to

<span class="category-subs-parent">
<a class="category-subs" href="http://www.sweetjujubead.com/catalog/index.php?main_page=index&cPath=11_1_2">Gold Band</a></span>
</a>

I hope this isn't as complicated as it sounds. Any ideas?

10 Jul 2009, 8:31 PM
#2
niccol avatar

niccol

Totally Zenned

Join Date:
Apr 2009
Posts:
2,138
Plugin Contributions:
1

Re: tweaking category sub styles

Wouldn't it be simpler just to change the underline to an overline?

border-bottom:2px dashed #B15148;

becomes:

border-top:2px dashed #B15148;

You might have an extra line at the top to get rid of and one to add at the bottom but that shouldn't be too hard.

10 Jul 2009, 8:36 PM
#3
tony_sar avatar

tony_sar

Totally Zenned

Join Date:
Jul 2006
Location:
Montreal, Canada
Posts:
2,276
Plugin Contributions:
0

Re: tweaking category sub styles

try this , is a long shot ..
add this to your stylesheet.css and see if works. i can not make it work remotely .

a.category-subs:visited {
border:none;
}

10 Jul 2009, 9:15 PM
#4
niccol avatar

niccol

Totally Zenned

Join Date:
Apr 2009
Posts:
2,138
Plugin Contributions:
1

Re: tweaking category sub styles

If you use the pseudo-class 'visited' then it will apply to any of the links that have been visited even if you get it to work. What you want is the pseudo-class 'active', but that has loads of browser issues.

If you apply the dashed border to the top of category-top and the top of category-subs you are pretty much there as the screenshot shows (obviusly you are going to need to adjust the padding) At least crystal and pearl appear to be grouped with 'gold band'.

If you want to get rid of the border above the first level of category-subs, i.e. gold band, then that might be trickier.