Highlight Currently Selected Category Background

Hi All,
Posted this in another thread, but think I was totally in the wrong place! :oops:
New to the forum and a semi-beginner! Been fighting this for hours and trying to find an answer, but no luck! Here is my issue...

Simply, would like to have a category background highlight to the same color as the hover, when that category is chosen!

Seems like this should be simple, but all attempts have failed!

Using 1.3.9h with a modified template.

Here is my site http://www.ohio-electrical-training.com

Really hope someone can point me in the right direction! Thanks in advance!

:no:
Doesn't anyone have any ideas on this? :shocking:

It's not clear to me what you're trying to accomplish. Can you rephrase/clarify the question?

Quote:

---

Originally Posted by afo

It's not clear to me what you're trying to accomplish. Can you rephrase/clarify the question?

---

Thanks for the reply, afo!

When you hover over any category on my left sidebar, the background changes to a tan/cream color. What I want to do is, when a category is clicked, and the contents are displayed on the page, I would like the clicked-category to "remain" as that tan/cream color, so the customer (at a glance) knows which category they are on!

Seems common on most websites that the "current page tab" is highlighted in some way!

Thanks, afo....

There is a class added to categories in the currrently selected path that can be used to do what you want. The Classic template uses this to make the current category path bold:

SPAN.category-subs-parent {
font-weight: bold;
}
SPAN.category-subs-selected {
font-weight: bold;
}

Even though your Template Monster template has changed the categories menu structure (with good reason for a change:), you can still use those classes.

Quote:

---

Originally Posted by gjh42

There is a class added to categories in the currrently selected path that can be used to do what you want. The Classic template uses this to make the current category path bold:

SPAN.category-subs-parent {
font-weight: bold;
}
SPAN.category-subs-selected {
font-weight: bold;
}

Even though your Template Monster template has changed the categories menu structure (with good reason for a change:), you can still use those classes.

---

Thank you so much, gjh42! I did notice the class defined in the Classic Template css, but didn't notice that it was missing from my template css!

Now added, the category text achieves the effect I was looking for, but not the whole "box-body", but this is ok! Lets the customer know what tab they are on, with a slightly different effect then the hover!

Works for me! :clap:

Thank you much, ghj42!

The links are inline elements by default, which means that they are no bigger than their text. If you change them to display: block; they will take on the full sidebox width. You will then also need to eliminate the <br /> between each link, which will now add an extra space between links.

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

Quote:

---

Originally Posted by gjh42

The links are inline elements by default, which means that they are no bigger than their text. If you change them to display: block; they will take on the full sidebox width. You will then also need to eliminate the <br /> between each link, which will now add an extra space between links.

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

---

Thanks again, gjh42! I think I lik the current style. Lets the customer know where they are, but less intense then having the whole box highlighted! :D

I do have another related question though, if you'd be so kind....

I have an additional sidebox created below categories. In it, I have "links" to "sub-categories" from a top-category that is "hidden" in the main category box! You had posted that code in another thread, and it worked like a charm, so that the subs wouldn't display twice!

Well, I would like to also highlight this sub-category in the additional sidebox when chosen (just like in main category)

Question is...
How do I call the current displayed sub-category from this additional sidebox?

Tried using an "if" as below, but not working...
if ($current_page_base['path'] == 'cPath=18_56') {

Could you help me with this? Thanks again!

I don't recall which thread I posted that info in, or when - can you point to it? The sidebox does not now have any identifier for current category. I would need to see probably the module file for the sidebox to know what code would work there.

Quote:

---

Originally Posted by gjh42

I don't recall which thread I posted that info in, or when - can you point to it? The sidebox does not now have any identifier for current category. I would need to see probably the module file for the sidebox to know what code would work there.

---

The code you posted to hide a category link is in post #10 in this thread!

The sidebox mod is called Editable Sideboxes. The Support Thread is here!

I've simply used a direct link to each sub-category that I've added to the editable sidebox. The main file to edit I've renamed to "reference_sidebox.php", and the whole file code is below...

Code:

---

<?php
/**
 * editable sidebox - allows an admin-editable sidebox to be added to your site
 *
 * @package templateSystem
 * @copyright 2007 Kuroi Web Design
  * @copyright Portions Copyright 2003-2007 Zen Cart Development Team
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: blank_sidebox.php 2007-08-10 kuroi $
 */

  // test if box should display
  $show_reference_sidebox = true;

  // $define_sidebox_ref = zen_get_file_directory(DIR_WS_LANGUAGES . $_SESSION['language'] . '/html_includes/', DEFINE_REFERENCE_SIDEBOX_NAME, 'false');

if ($current_page_base['path'] == '<a href="http://www.ohio-electrical-training.com/index.php?main_page=index&cPath=18_56">') {
        $define_sidebox_ref[] = '<a href="http://www.ohio-electrical-training.com/index.php?main_page=index&cPath=18_56"><span class="box-body">2011 Code Books & Tabs</span></a>';
        }else{
        $define_sidebox_ref[] = '<a href="http://www.ohio-electrical-training.com/index.php?main_page=index&cPath=18_56">2011 Code Books & Tabs</a>';
        }
        $define_sidebox_ref[] = '<a href="http://www.ohio-electrical-training.com/index.php?main_page=index&cPath=18_57">Solar Photovoltaic Sys.</a>';
        $define_sidebox_ref[] = '<a href="http://www.ohio-electrical-training.com/index.php?main_page=index&cPath=18_58">NEC Code Changes Books</a>';
        $define_sidebox_ref[] = '<a href="http://www.ohio-electrical-training.com/index.php?main_page=index&cPath=18_59">Training Library w/DVDs</a>';
        $define_sidebox_ref[] = '<a href="http://www.ohio-electrical-training.com/index.php?main_page=index&cPath=18_60">License Exam Preparation</a>';
        $define_sidebox_ref[] = '<a href="http://www.ohio-electrical-training.com/index.php?main_page=index&cPath=18_61">Estimating & Business Books</a>';
        $define_sidebox_ref[] = '<a href="http://www.ohio-electrical-training.com/index.php?main_page=index&cPath=18_62">Elect. Calculation Books</a>';
        $define_sidebox_ref[] = '<a href="http://www.ohio-electrical-training.com/index.php?main_page=index&cPath=18_63">NEC Article Books / DVDs</a>';
        $define_sidebox_ref[] = '<a href="http://www.ohio-electrical-training.com/index.php?main_page=index&cPath=18_64">Elect. Theory Books / DVDs</a>';
        $define_sidebox_ref[] = '<a href="http://www.ohio-electrical-training.com/index.php?main_page=index&cPath=18_65">Understanding The NEC</a>';

  if ($show_reference_sidebox == true) {
      require($template->get_template_dir('tpl_reference_sidebox.php',DIR_WS_TEMPLATE, $current_page_base,'sideboxes'). '/tpl_reference_sidebox.php');
      $title =  BOX_HEADING_REFERENCE_SIDEBOX;
      $title_link = false;
      require($template->get_template_dir($column_box_default, DIR_WS_TEMPLATE, $current_page_base,'common') . '/' . $column_box_default);
 }
?>

---

You can see in the code above that I made an attempt to use an "if" statement to highlight the box, but it did nothing! :(

Thanks for your help! :bigups:

$current_page_base is not an array but a variable holding a string. It doesn't have the full address, only the value of main_page= from the URL. In a category page, $cPath will hold the value of cPath=. You would do a two-stage test, like

if ($current_page_base == 'index' and $cPath == '18_56')

Rather than duplicate the whole assignment statement for the current or not-current state, I would use a variable to assign a class tag where appropriate.
Rearrange the test and assignment using a "ternary operator" to make it compact:
if a is true? then do b: otherwise do c;

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

Then insert the variable which will be blank unless the cPath matches the current page. Put it right in the <a> for conciseness:

$define_sidebox_ref[] = '<a href="index.php?main_page=index&amp;cPath=18_56"' . $current_class . '>2011 Code Books & Tabs</a>';

PHP Code:

---

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


---

Or compact it even more:

PHP Code:

---

    $define_sidebox_ref[] = '<a href="index.php?main_page=index&amp;cPath=18_56"' . (($current_page_base == 'index' and $cPath == '18_56')? ' class="current"': '') . '>2011 Code Books & Tabs</a>';
    $define_sidebox_ref[] = '<a href="index.php?main_page=index&amp;cPath=18_57"' . (($current_page_base == 'index' and $cPath == '18_57')? ' class="current"': '') . '>Solar Photovoltaic Sys.</a>';
    $define_sidebox_ref[] = '<a href="index.php?main_page=index&amp;cPath=18_58"' . (($current_page_base == 'index' and $cPath == '18_58')? ' class="current"': '') . '>NEC Code Changes Books</a>'; 


---

Quote:

---

Originally Posted by gjh42

$current_page_base is not an array but a variable holding a string. It doesn't have the full address, only the value of main_page= from the URL. In a category page, $cPath will hold the value of cPath=. You would do a two-stage test, like

if ($current_page_base == 'index' and $cPath == '18_56')

Rather than duplicate the whole assignment statement for the current or not-current state, I would use a variable to assign a class tag where appropriate.
Rearrange the test and assignment using a "ternary operator" to make it compact:
if a is true? then do b: otherwise do c;

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

Then insert the variable which will be blank unless the cPath matches the current page. Put it right in the <a> for conciseness:

$define_sidebox_ref[] = '<a href="index.php?main_page=index&amp;cPath=18_56"' . $current_class . '>2011 Code Books & Tabs</a>';

PHP Code:

---

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


---

Or compact it even more:

PHP Code:

---

    $define_sidebox_ref[] = '<a href="index.php?main_page=index&amp;cPath=18_56"' . (($current_page_base == 'index' and $cPath == '18_56')? ' class="current"': '') . '>2011 Code Books & Tabs</a>';
    $define_sidebox_ref[] = '<a href="index.php?main_page=index&amp;cPath=18_57"' . (($current_page_base == 'index' and $cPath == '18_57')? ' class="current"': '') . '>Solar Photovoltaic Sys.</a>';
    $define_sidebox_ref[] = '<a href="index.php?main_page=index&amp;cPath=18_58"' . (($current_page_base == 'index' and $cPath == '18_58')? ' class="current"': '') . '>NEC Code Changes Books</a>'; 


---

---

Thank you so much for this! I was able to get it to work using the conditional "if" and duplicating the statements, but I could not get the other methods to work with the class within the variable!

The class assigned to the main category box is SPAN.box-body, but even created a class called .current to match your example! Still didn't work that way!

Of course it is more code, but guess I can do it with the conditional "if", as that seems to do the trick!

Is there another way that I should include class="current"': '' ? I didn't understand the value of the ":" in that statement!

You've really helped me understand this much better, so thank you very much for that! :)

Rearrange the test and assignment using a "ternary operator" to make it compact:
if a is true? then do b: otherwise do c;

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

This says
if ($current_page_base == 'index' and $cPath == '18_56') is true, then execute ' class="current"', otherwise execute '' and assign whichever one executes to $current_class.
If you used the compact form exactly as shown, only changing the cPaths and text, it should give the "current" class where appropriate.


"I could not get the other methods to work with the class within the variable!"
How did it not work? Did you get an error or blank screen, or just not a "current" class?

Ok, makes more sense now, thanks for the details!

Quote:

---

Originally Posted by gjh42

How did it not work? Did you get an error or blank screen, or just not a "current" class?

---

No error or blank screen. Just did not change to the "current class"!

I am currently seeing your page output cutting off immediately after the categories sidebox. This indicates that there is a PHP error in the ref sidebox file.

Quote:

---

Originally Posted by gjh42

I am currently seeing your page output cutting off immediately after the categories sidebox. This indicates that there is a PHP error in the ref sidebox file.

---

Should be there now, just trying some variations that didn't work! :unsure:

I see you getting a .box-body class for the current link now. What rule are you using to try to style it? Which PHP code are you now using?

You're getting a span="" inside the <a class="box-body" tag. That should not be there.

Quote:

---

Originally Posted by gjh42

You're getting a span="" inside the <a class="box-body" tag. That should not be there.

---

I have the class style set like this...

SPAN.box-body {
font-weight: bold;
background:#a19161;
color:#413521;
}

Using the SPAN tags seems to be the only way to get it to work, but could also be my coding "inexperience"! :blush:

Also, using the span tags seemed to slightly "enlarge" the highlight around the text, and made it look a little better.

You have no spans named .box-body, so that style rule can do nothing. The <a> is named .box-body, so any rules for .box-body{} or a.box-body{} will apply, e.g.

stylesheet_boxes.css, line 10:
.box-body {
padding: 0 6px;
}

although that padding is overridden by the padding in

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

which applies to all sidebox list links.

Add to your stylesheet

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

Post your current version of the module file.

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 Code:

---

    $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>'; 


---

Quote:

---

Originally Posted by 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!

Quote:

---

Originally Posted by 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 Code:

---

    $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! :wacko:

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

Quote:

---

Originally Posted by 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!

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

Quote:

---

Originally Posted by 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! :)