Categories Dressing

[gjh42]

It is actually possible to do this - I had forgotten that there is a "current path" set of classes. In the standard stylesheet_categories_dressing.css, find this section

/*change  bullet when a category w/o bg image is open to subs:*/
#categories li a.cat-parent-text {
    list-style: square inside url(../images/bullet2.gif);/*change to list-style: none; to remove bullet*/
    }

/*change  bullet when a category w/o bg image is open to products:*/
#categories li a.cat-selected-text {
    list-style: square inside url(../images/bullet3.gif);/*change to list-style: none; to remove bullet*/
    }

Add the desired properties, like

background-color: #aabbcc;

If you are using images or background images for category names, you will want to add rules like

/*change  bg color when an image-replaced category is open to subs:*/
#categories li a.cat-parent {
    background-color: #aabbcc;
    }

/*change  bg color when an image-replaced category is open to products:*/
#categories li a.cat-selected {
    background-color: #aabbcc;
    }

(Note that I have not tested these last rules, and they might need adjusting if used.)

[creative_mind]

It is actually possible to do this - I had forgotten that there is a "current path" set of classes. In the standard stylesheet_categories_dressing.css, find this section

/*change  bullet when a category w/o bg image is open to subs:*/
#categories li a.cat-parent-text {
    list-style: square inside url(../images/bullet2.gif);/*change to list-style: none; to remove bullet*/
    }

/*change  bullet when a category w/o bg image is open to products:*/
#categories li a.cat-selected-text {
    list-style: square inside url(../images/bullet3.gif);/*change to list-style: none; to remove bullet*/
    }

Add the desired properties, like

background-color: #aabbcc;

If you are using images or background images for category names, you will want to add rules like

/*change  bg color when an image-replaced category is open to subs:*/
#categories li a.cat-parent {
    background-color: #aabbcc;
    }

/*change  bg color when an image-replaced category is open to products:*/
#categories li a.cat-selected {
    background-color: #aabbcc;
    }

(Note that I have not tested these last rules, and they might need adjusting if used.)

The suggested mods to the CSS holds true only for the products parent and sub categories.

The 'New' and 'Featured' Products link only will reset to their default colors after clicking. This can be found in tpl_categories.php below and note the 'red' text.

if (SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true')
{
// display limits
// $display_limit = zen_get_products_new_timelimit();
$display_limit = zen_get_new_date_range();

$show_this = $db->Execute("select p.products_id from " . TABLE_PRODUCTS . " p where p.products_status = 1 " . $display_limit . " limit 1");

if ($show_this->RecordCount() > 0)
{
$cat_box_link_head = cat_box_heading('NEW');
$content .= $cat_box_link_head[1];
$content .= ' <li><a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_NEW) . '">' . CATEGORIES_BOX_HEADING_WHATS_NEW . '</a>' . '</li>' . "\n";
}
}

[gjh42]

I just a few hours ago posted the code in another thread to allow these to work as you desire. Without going through all the explanations, change the classname code like this:

class="category-links"

to

class="category-links' . ($current_page_base == 'products_all'? '-selected': '') . '"

using the correct page name for each link.
This will be in the address bar when on the page, as main_page=products_all or whatever.

    if (SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') {
      $content .= '<a class="category-links' . ($current_page_base == 'products_all'? '-selected': '') . '" href="' . zen_href_link(FILENAME_PRODUCTS_ALL) . '">' . CATEGORIES_BOX_HEADING_PRODUCTS_ALL . '</a>' . "\n";
    } 

Then you can style
.category-links-selected {} in your stylesheet.

[creative_mind]

gjh42,

Thank you for your help.

The 'New' and 'Featured' Products bg change works as expected with your coding suggestions.

Again, thank you.

[wezza]

You can make the non-linked headings belong to the first subcategory in each group, instead of belonging to the top categories. That will let you hide the top cats while still showing the headings.

This is what I need to do but cannot find out how, any help greatly appreciated!

[gjh42]

There is not a setting to assign the heading to the generic "first" subcat; you need to identify the subcat that will be first in each category and assign the heading to that one.

[jill8026]

Hi Glenn....

Just wondering if there is a way to make the category images linkable....

for example on http://www.michellemasters.com/store

I would like to have the images for shop by design, shop by product etc be able to be clicked to be brought to the subcategory page...

Here is the code from the tpl_categories that places those images that I used:

 // categories dressing - add (divider and) heading above a cat
      switch ($current_path) {
      case '17': //replace number with your desired cPath
        //$content .= '<hr class="catBoxDivider" />' . "\n";  // to add divider uncomment this line
        $content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') . '</span>':'</span>' . $disp_block_head) . "\n"; 
      break;
      } 

Is there any way to include an a href in there without breaking it?

And THANK YOU!!!!!

[gjh42]

Wow, you have an old version of Cat Dressing:) The code has completely changed in more recent versions. However, it should be easy for you to add a link; change the <span to <a and both </span> tags to </a>.
Then put in the href, like this:

        $content .= '<a class="catBoxHeading1" href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=xx_xx') . '">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') . '</a>':'</a>' . $disp_block_head) . "\n"; 

The 'cPath=xx_xx' when set to the path you want should work, but I haven't tested it in this case.

[MUtester]

I have been using this mod for some time now and it really looks extremely cool on our site.

However I want to add the alt text to the category images but can not find out how to do so. Anyone that can help me out? Really appreciate it!

[gjh42]

They already have titles, which do much the same thing.
If you want alt tags too, that is a simple edit;
in /includes/functions/extra_functions/categories_dressing_functions.php, see the empty quotes '' in the first $cat_name_display= statement and replace with $cat_name_display

function cat_name_display($cat_name_display, $current_path) {
  $cat_img_bg = '';
  //display image if exists for category name in current language - with title tag
  if (file_exists(DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/catimg' . $current_path . '.gif')) {
    $cat_name_display = zen_image(DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/catimg' . $current_path . '.gif', '', '', '', 'title="' . $cat_name_display . '"'); 
  //display background image if exists for category name in current language - with title tag
  } elseif (file_exists(DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/catbg' . $current_path . '.gif')) {
    $cat_name_display = zen_image(DIR_WS_TEMPLATE_IMAGES . 'pixel_trans.gif', '', '100%', '100%', 'title="' . $cat_name_display . '"');
    $cat_img_bg = ' catBg' . $current_path;
  } else {
    $cat_img_bg = '-text';//append to main classname
  }
  return array($cat_img_bg, $cat_name_display);
} 

    $cat_name_display = zen_image(DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/catimg' . $current_path . '.gif', $cat_name_display, '', '', 'title="' . $cat_name_display . '"'); 

The zen_image() function automatically adds the title when you give the alt value, so you can simplify the statement to

    $cat_name_display = zen_image(DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/catimg' . $current_path . '.gif', $cat_name_display); 

Do the same for the second statement if you are using background images for cat names.