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?

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.

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

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.

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

<?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&cPath=18_56"' . $current_class . '>2011 Code Books & Tabs</a>';

    $current_class = ($current_page_base == 'index' and $cPath == '18_56')? ' class="current"': '';
    $define_sidebox_ref[] = '<a href="index.php?main_page=index&cPath=18_56"' . $current_class . '>2011 Code Books & Tabs</a>';
```Or compact it even more:```php
    $define_sidebox_ref[] = '<a href="index.php?main_page=index&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&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&cPath=18_58"' . (($current_page_base == 'index' and $cPath == '18_58')? ' class="current"': '') . '>NEC Code Changes Books</a>';

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&cPath=18_56"' . $current_class . '>2011 Code Books & Tabs</a>';

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

Or compact it even more:php
$define_sidebox_ref[] = '<a href="index.php?main_page=index&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&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&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!

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.

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.

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.