Categories Dressing

gjh42:

You're wanting the "hover" bg color to remain after clicking on one of the categories? That would be the "visited" pseudo-class, which will make a link you have clicked assume the specified properties as long as your browser remembers that you have been there.

#categories li a:visited {background-color: #aabbcc;}

or any number of variations.

Almost, and I did that before.

The problem is after I click another link, both links show with the same bg colors. I would like the link return to the default bg color when another link is clicked. :wink:

Thanks in advance.

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

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

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

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

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.

gjh42,

Thank you for your help.

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

Again, thank you.

gjh42:

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!

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.

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

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:```php
$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";

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!

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);
}
``````php
    $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```php
    $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.

that worked excellent!!! Thank you so much! Great mod, great help!

Thank you so much for this great mod....You are the best : )

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

I have been so busy building sites have'nt had time to look for updated mods....got to start getting better about that!!! :-)

Thanks for the help - give it a shot tomorrow.....

Hello All,

I have a very simple question (I think : )

When I click on a sub category link, Firefox displays a small icon (bullet1.gif). How can I get Firefox settings to reflect IE7. Please see the examples below

,,,,,,,,,,,,,,,,,,,,,,, Firefox

...................IE7
Thank you

www.aplusshoes.com

:frusty:

I don't know why IE shows it as you want it to be, but Firefox is showing it as you have told it to.

You have moved the list marker from #chcategories ul ul a {} to #chcategories ul ul {}, so the subcat list is getting the marker, and the specific selected link is also getting a marker, which you have changed from the original line (bullet3) to the standard arrow (bullet1).
This is the original CSS:```
#chcategories ul ul {/subcategory lists/
list-style: none;
background: #ffeecc;
border: none;
margin: 0 0 0.4em 0;
padding: 0 0 0 1.3em;
}

#chcategories ul ul a {/subcategories/
display: list-item;
list-style: circle inside url(../images/bullet1.gif);/change to list-style: none; to remove bullet/
background: #ffddbb;
border: none;
margin: 0;
padding: 0;
}

/change bullet when a category w/o bg image is open to products:/
#chcategories li a.cat-selected-text {
list-style: square inside url(../images/bullet3.gif);/change to list-style: none; to remove bullet/
}
THis is what you have:
#chcategories ul ul {/subcategory lists/
list-style: disc url(../images/bullet1.gif);
background: #ffffff;
border: none;
margin: 0 0 0.4em 0;
padding: 0 0 0 2.0em;
}

#chcategories ul ul a {/subcategories/
border: none;
margin: 0;
padding: 0;
color: #0075e2;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

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

Move the list-style from #chcategories ul ul {} back to #chcategories ul ul a {}.

Jill - As long as the code you have is working for you, there is no need to upgrade the mod. The new versions have more functionality, but if you're happy with how it works now, keep it.

gjh42,

Thank you for your quick reply. I was able to fix the mistake with your help....Thanks again for the great mod..
:clap::clap::clap::clap:

(1) more question - How can I stop the bullets from loading. I would like the (orange arrow) bullet1.gif to load instead...

I'm very new at Zen Cart and CSS...Forgive me if i'm not using the correct terms.

.......disable this

..................Load This

http://www.aplusshoes.com

Disregard my last post.....I decided to keep the bullets...