Categories Dressing

Nilsen -
The catimg1.gif and catbg1.gif are not able to be used at the same time. If a catimg#.gif file is found for the category, the code will not look for a catbg#.gif file, nor use it if it exists. Delete catimg1.gif and see if catbg1.gif and catbg1hover.gif show up.
I have described the modifications for bilingual images above.

Juliet -
I have to get to sleep now... I'll look at your code when I get back to the computer in a day or so.

Thank you! Sleep well!

For bilingual background images, the language-specific stylesheets would be the way to go, instead of altering the PHP code. The class/id tags would stay the same, but the image files associated with them would change based on the language.

Thinking more about the bg images - the method above will work correctly, as long as there is one image named according to the pattern (/your_template/images/catbg#.gif). This can be for any of the languages; the other language(s) can call for an image in the language stylesheet with any name desired (for example /your_template/images/catbg#french.gif), as these will not be checked for in the PHP code.

This does mean that if an alternate image file is missing, the code will not know it and will still be calling for it. The PHP code method is more robust and will check for the current language bg image.

Juliet -
I can't troubleshoot your code when I can't see what wasn't working for you. Can you put it back the way you had it and post the relevant part of the file? (10 lines or so in the area should be enough.)

Glenn,

You are an absolute angel, you are so kind to help me!!!

     // skip if this is for the document box (==3) 
    } else {
      // categories dressing - add divider above specified cats
      if(in_array($current_path, explode(",",'3,22,21_56'))) { //replace numbers with your cat ids separated by commas
        $content .= '<hr class="catBoxDivider" />' . "\n";
      }
	   // categories dressing - 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="' . $box_categories_array[$i]['name'] . '"');  
      // categories dressing - add (divider and) heading above a cat
	  switch ($current_path) {
	  case '23': //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>':'Heading 1</span>' . $disp_block_head) . "\n"; 
	  break;
      }  

I almost understand what you say about working it trough the stylesheet, but still two questions about it.

Would I have to name every button in the stylesheet seperatly? So I mean /your_template/images/catbg1.gif,/your_template/images/catbg2.gif,/your_template/images/catbg3.gif etcetra.

And do I keep the php in this case or would I throw it out?

Hi Glenn,
thanks for your help. I have taken the catimg1 out, but now I don't see any image at all, only a gray rectangle (see pic) also by rollover. I also don't see the text of the cat.
How can I fix this?
thanks a lot!!!
nils

Juliet - it looks like you have added the whole lines I posted to your tpl_categories.php at a different location in the file instead of replacing the original lines with the modified ones.
Your file has this:```php

  // categories dressing - category name mods
  $cat_name_display = $box_categories_array[$i]['name'];

// $subcat_level = (substr_count($current_path, '_'); //strip out subcat indent
// $cat_name_display = substr_replace($cat_name_display,'',0,($subcat_level*strlen(CATEGORIES_SUBCATEGORIES_INDENT)));
$cat_img_bg = '';
// categories dressing - display image if exists for category name - with title tag
if (file_exists(DIR_WS_TEMPLATE_IMAGES . 'catimg' . $current_path . '.gif')) {
$cat_name_display = zen_image(DIR_WS_TEMPLATE_IMAGES . 'catimg' . $current_path . '.gif', '', '', '', 'title="' . $box_categories_array[$i]['name'] . '"');
It should be changed to this:php

  // categories dressing - category name mods
  $cat_name_display = $box_categories_array[$i]['name'];

// $subcat_level = (substr_count($current_path, '_'); //strip out subcat indent
// $cat_name_display = substr_replace($cat_name_display,'',0,($subcat_level*strlen(CATEGORIES_SUBCATEGORIES_INDENT)));
$cat_img_bg = '';
// categories dressing - 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="' . $box_categories_array[$i]['name'] . '"');

The background image comments were for nilsen. They don't apply to what you are doing, Juliet.

Nilsen - can you post a link to your site? That would help me figure out why you are not getting good results. It's hard to troubleshoot something you can't really see.

Thank you for fixing my code!!! I will give it another try!

Glenn YOU ARE MY HERO!!!! It worked!!!!:clap::clap::clap::clap::hug:

Hi Glenn,
my test server is https://www.ensof-design.com/zc/
I've put in a few dummy categories, you'll see a gray rectangle where he background image is supposed to be
Thanks again for your unendeless patiance :)
Nils

You have put the CSS for category 5 near the top of your main stylesheet, and the original category styling rules are still in place at the bottom of the stylesheet. In this case, they nullify the specific rule you added:```
/*

sidebox links

*/

A.category-top {color: #900 !important; width: 100%; margin: 0px 5px 0px 0px !important; background-color: #ddd !important; padding: 2px 0px 2px 0px; border: 1px solid #fff; background-image: none !important; display: block; text-decoration: none;}

:blink: Hi There!!!

Is there any way for me to have all of my sideboxes formatted the same without downloading the BetterCategories Mod.

I downloaded the categories dressing and got my categories sidebox just the way I want it, now I need to also change my Information, More Information, Documents sideboxes to look just like my new and improved categories sidebox...any suggestions?:unsure:

I'm so proud of myself, it ONLY took one year...but I'm finally changing my template monster site to a zencart site and I'm trying to get the format close to each other, so far so good.

You can change stylesheet coding to make the sideboxes all look the same as Categories, but behavior (like bullets) will generally require separate coding. Some of them may be easy and some not so much.

For starters, look carefully at the Cat Dressing stylesheet and (with the Firefox Web Developer toolbar) see what Categories elements are represented by what classes, and what analogous Information etc. elements are represented by what classes. Style those classes the same as their Cat Dressing counterparts.

:blush: okay update!, I really tried to just use the cat-dressing mod for all of my sideboxes but it was still challenging for me, so I downloaded the BetterCatMod and it worked out for me. Funny though...I tried the BetterCatMod a few weeks ago and I couldn't make my boxes appear the way I wanted them too to save my life, what a difference a few weeks make.

:blink:Sometimes I really feel like a true newbie with this coding stuff.:lookaroun

gjh42:

You can change stylesheet coding to make the sideboxes all look the same as Categories, but behavior (like bullets) will generally require separate coding. Some of them may be easy and some not so much.

For starters, look carefully at the Cat Dressing stylesheet and (with the Firefox Web Developer toolbar) see what Categories elements are represented by what classes, and what analogous Information etc. elements are represented by what classes. Style those classes the same as their Cat Dressing counterparts.

Hi Glenn,
thanks a lot! it works now great. 2 more questions:

1. How do I get the text of the cat. name to show on the background? I see now only the background and no text...
2. How can I make the "current" cat that was clicked to show a specific image, so the users know where they r?
   1000 thanks
   Nils

When you have an individual category background image, the code works to show only the background and no text. It assumes that you want special fonts or something that the ordinary text can't do. The simplest way to address this is to add the text to the image in Photoshop.

If you want all the categories to have the same background image, don't use the catbg#.gif names, but style a.category-top-text with the background-image.

Highlighting the current category will differ depending on what exactly you want to do.
If you want all current categories to use the same image, this can be adapted:```
Add to your stylesheet:

a.category-top-text .category-subs-selected, a.category-top-text .category-subs-parent {
background-image: url(../images/yourcurrentbg.gif);
}

display: block;
to this.

Individual bg images for specific current categories will require a bit of thought. I'll look at the best way to do that.