Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Highlight Currently Selected Category Background

Highlight Currently Selected Category Background

Views: 4,166

Results 21 to 27 of 27
1 Feb 2011, 9:12 PM
#21
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Highlight Currently Selected Category Background

Add to your stylesheet

#referencesidebox a.box-body {color: #ff0000;}

Post your current version of the module file.

2 Feb 2011, 2:32 AM
#22
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Highlight Currently Selected Category Background

I have noticed an item that needs to be added to the test for current page. The test as written only checks for category/product listing pages, but not for product info pages in the category. Change this

(($current_page_base == 'index' and $cPath == '18_56')? ' class="current"': '')

to this

((($current_page_base == 'index' or $current_page_base == 'product_info') and $cPath == '18_56')? ' class="current"': '')

to get```php
$define_sidebox_ref[] = '<a href="index.php?main_page=index&cPath=18_56"' . ((($current_page_base == 'index' or $current_page_base == 'product_info') and $cPath == '18_56')? ' class="current"': '') . '>2011 Code Books & Tabs</a>';

2 Feb 2011, 3:20 AM
#23
zapme1 avatar

zapme1

Zen Follower

Join Date:
Jan 2011
Location:
Ohio
Posts:
114
Plugin Contributions:
0

Re: Highlight Currently Selected Category Background

gjh42:

Add to your stylesheet

#referencesidebox a.box-body {color: #ff0000;}

Post your current version of the module file.

Outstanding! That did the trick. :clap:

Just added my box & text color to your code, and looks great! Guess I'm not really understanding how it knows about #referencesidebox, as it is only referenced in the stylesheet, but the posted class in the module file references box-body, when there are already other variations of the box-body class!
That's my inexperience, but in any case, it works!

gjh42:

I have noticed an item that needs to be added to the test for current page. The test as written only checks for category/product listing pages, but not for product info pages in the category. Change this

(($current_page_base == 'index' and $cPath == '18_56')? ' class="current"': '')

to this

((($current_page_base == 'index' or $current_page_base == 'product_info') and $cPath == '18_56')? ' class="current"': '')

to get```php
$define_sidebox_ref[] = '<a href="index.php?main_page=index&cPath=18_56"' . ((($current_page_base == 'index' or $current_page_base == 'product_info') and $cPath == '18_56')? ' class="current"': '') . '>2011 Code Books & Tabs</a>';


Great, this worked like a charm!  I didn't notice that it didn't work on the product page until your last post!

So, all is now great with the highlighting in the "reference sidebox", but one more thing I would like to do....

**(Thank you for your patience in showing me how to do this!)**

Now that the "whole box" is highlighted in the reference sidebox, it probably should also look the same in the Main Category box!

I tried using your code that you gave in an earlier post as below...

#categories a {display: block;}
#categories a+br {display: none;}

But this time it highlighted "All" of the "top-categories" to the current selected color! Probably just missing something simple again! :wacko:
2 Feb 2011, 4:03 AM
#24
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Highlight Currently Selected Category Background

#referencesidebox a.box-body {

This means "links with classname .box-body, inside elements with id #referencesidebox". #referencesidebox is the id of the (surprise!) reference sidebox you created, so the style only applies inside that.

#categories a {display: block;} is only to get the link to fill the space, not for the current styling.
You want
#categories a, #categories a span {display: block;}
#categories a+br {display: none;}

This will make the span inside the link expand to fill the space, too. Its background color will expand with it.

2 Feb 2011, 4:24 AM
#25
zapme1 avatar

zapme1

Zen Follower

Join Date:
Jan 2011
Location:
Ohio
Posts:
114
Plugin Contributions:
0

Re: Highlight Currently Selected Category Background

gjh42:

#referencesidebox a.box-body {

This means "links with classname .box-body, inside elements with id #referencesidebox". #referencesidebox is the id of the (surprise!) reference sidebox you created, so the style only applies inside that.

#categories a {display: block;} is only to get the link to fill the space, not for the current styling.
You want
#categories a, #categories a span {display: block;}
#categories a+br {display: none;}

This will make the span inside the link expand to fill the space, too. Its background color will expand with it.

Ahhh... Ok, makes sense! I was defining the class box-body, without the ID #referencesidebox at first, so I can see why it is working now! Thanks for explaining!

Still not working with the category links! When I first saw your code, I thought... DOH! Forgot the "span", but still no luck. Still only get the text block to highlight, and not the entire background as in the reference sidebox! I must be missing something!

2 Feb 2011, 5:03 AM
#26
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Highlight Currently Selected Category Background

You have this which confines the text and the span:

.box-body ul a{ color:#a19161; text-decoration:none; text-transform:uppercase; background:#413521; display:block; padding:8px 3px 6px 35px;}

Add another rule to bring the edges of the span out to match the link, and then pads the text back the same as the other links:

.box-body ul a span{margin: -8px -3px -6px -35px; padding: 8px 3px 6px 35px;}

2 Feb 2011, 5:18 AM
#27
zapme1 avatar

zapme1

Zen Follower

Join Date:
Jan 2011
Location:
Ohio
Posts:
114
Plugin Contributions:
0

Re: Highlight Currently Selected Category Background

gjh42:

You have this which confines the text and the span:

.box-body ul a{ color:#a19161; text-decoration:none; text-transform:uppercase; background:#413521; display:block; padding:8px 3px 6px 35px;}

Add another rule to bring the edges of the span out to match the link, and then pads the text back the same as the other links:

.box-body ul a span{margin: -8px -3px -6px -35px; padding: 8px 3px 6px 35px;}

You Are The Man Of The Year! :cheers: (cause that is about how long it would have taken me to figure this out myself! :blush:)

Thank you again so much for all of your help and patience! I really appreciate your time! :bigups:

I'm now going to take my new found knowledge and apply it to my remaining 2 sideboxes; one being just like the Reference box, so should now be easy! :yes:

Edit: Ok, just need to add to 1 more sidebox, as the other contains "external links", so not needed there! :)