Highlight Currently Selected Category Background

[gjh42]

Add to your stylesheet

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

Post your current version of the module file.

[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

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

[zapme1]

Add to your stylesheet

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

Post your current version of the module file.

Outstanding! That did the trick.

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!

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

    $define_sidebox_ref[] = '<a href="index.php?main_page=index&amp;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!

[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.

[zapme1]

#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!

[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;}

[zapme1]

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! (cause that is about how long it would have taken me to figure this out myself! )

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

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!

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