Highlight Currently Selected Category Background

[zapme1]

Hi All,
Posted this in another thread, but think I was totally in the wrong place!
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!

[zapme1]

Doesn't anyone have any ideas on this?

[afo]

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

[zapme1]

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

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

[zapme1]

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!

Thank you much, ghj42!

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

[zapme1]

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!

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!

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

[zapme1]

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!