Categories Dressing

Juliet -

All you need to do for an image based menu is to name the images like catimg23.gif or catimg5_17.gif (using the cPath of the category for the numbers) and save them in /includes/templates/your_template/images/.

Make the images the exact pixel size you want them to display at.
You can find the cPath for each category by bringing it up onscreen and looking at the address bar at the top of the window. The URL will include ...&cPath=5_17&... for category 5_17. (If you have an SEO mod installed it will be different.)

Relentless -

Changing the stylesheet will not make your headings into links; you need to add the HTML link code to the heading text in tpl_categories.php.

PHP Code:

---

case '28': //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')
//I would like these Headings,to be links.
. '</span>':'
&gt;Air Conditioning<br />
Split System<br />
Ducted<br /></span>'
. $disp_block_head) . "\n";
break; 


---

You are not using images or dividers here, so you can simplify the code by eliminating those.
You can change the <span> to an <a href=...> using the zen_href_link() function which will automatically give you the link to the category immediately below the heading.

PHP Code:

---

case '28': //replace number with your desired cPath
$content .= '<a class="catBoxHeading1" href="' . zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']) . '">&gt;Air Conditioning<br />
Split System<br />
Ducted<br /></a>'
. $disp_block_head) . "\n";
break; 


---

You can add styling if you want in the stylesheet:

a.catBoxHeading1:visited {add style);
a.catBoxHeading1:hover {add style);
a.catBoxHeading1:active {add style);

See your previous entry
$content .= '<a class="catBoxHeading1" href="'
Is this correct see dbl. quotes at end of line
$content .= '<a class="catBoxHeading1" href=""
Thank you
Relentless

<?php
// is this is the change to enable Heading link
case '28': //replace number with your desired cPath
$content .= '<a href="catBoxHeading1"' . zen_href_link(FILENAME_DEFAULT,
$box_categories_array[$i]['path']) . '">
&gt;Air Conditioning<br />
Split System<br />
Ducted<br /></a>'
. $disp_block_head) . "\n";
break;
?>
Thank you Relentless
Entry 303 ignore

The above will not work. You can't combine the class tag and the href like that.
The double and single quotes you show in the previous post are correct, but I will check the rest over for typos.

MoltoDelta, Gjh42

thanks for the input - i've fixed the semi colon and the size (the size was my bad 8s and 0s look alike to bad eyes, but now even with the corrected height when you mouse over where gc should be the hover image pushes the menu down) and arranged the sort order for gc to be on top.

i'll continue to fuss with it, and if i figure it out i'll let yall know. thanks!

It is always better if you research an issue yourself, thank you.
I think this is correct.
<?php
{
case '28': //replace number with your desired cPath
$content .= '<a href="http://www.samplewebsite.com/index.php?main_page=index&cPath=28&zenid=xxx...">' . zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']) . '">&gt;Air Conditioning<br /> Split System<br /> Ducted<br /></a>' . $disp_block_head) . "\n";
break;
)
?>

Relentless

Here's a way to use categories dressing on multilanguage site? When I switch language the mod don't work. I think is only a configuration issue... the site is www.kipria.it/store.

Tanks.
Silvio.

Sorry, I didn't build it to work with multiple languages. I have another mod, Image Titles, which does work for multiple languages, and it would be relatively easy to change Categories Dressing to work the same for images, but the heading and subtext text is coded into the template file and would require changing the way the mod is constructed, to draw text from a language file instead of direct code.

This is a worthy thing to do, but I don't see having time in the near future to do it. I have thought about this in the past, and will continue to poke at it. I will eventually make it happen.

A way to do this without inventing new coding has occurred to me. It is a workaround, not an elegant solution, but it will do the job for now.

What you are having problems with is the subtext. Find this section in tpl_categories.php (yours will be larger because you already have several cases customized)

PHP Code:

---

      // categories dressing - add subtext below a cat
      switch ($current_path) {
      case '23': //replace number with your desired cPath
        $content .= '<span class="catBoxSubtext">Subtext for cat 23 escape apostrophe\'s</span>' . $disp_block . "\n"; 
      break;
      } // subtext 


---

and wrap a language test around it with a duplicate section for each language.

if ($_SESSION['language'] == 'english') {
... set of cases for english
}else{ //language is italian
... set of cases for italian
} //if language

PHP Code:

---

      // categories dressing - add subtext below a cat
      if ($_SESSION['language'] == 'english') {
      switch ($current_path) {
      case '23': //replace number with your desired cPath
        $content .= '<span class="catBoxSubtext">Subtext for cat 23 escape apostrophe\'s</span>' . $disp_block . "\n"; 
      break;
      } //english subtext
      }else{ //language is italian
      switch ($current_path) {
      case '23': //replace number with your desired cPath
        $content .= '<span class="catBoxSubtext">Subtext for cat 23 escape apostrophe\'s</span>' . $disp_block . "\n"; 
      break;
      } //italian subtext
      } //if language 


---

Relentless -
What you posted will essentially include the href twice, and have no class tag for the link.

<a href="http://www.samplewebsite.com/index.php?main_page=index&cPath=28">' . zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']) . '">

ht tp://ww w.samplewebsite.com/index.php?main_page=index&cPath=28

is exactly what

zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path'])

evaluates to, so you would get in execution

<a href="http://www.samplewebsite.com/index.php?main_page=index&cPath=28">http://www.samplewebsite.com/index.php?main_page=index&cPath=28">

I have not worked with class and herf in php before.
I think I am close.
------------
<?php
{
case '28': //replace number with your desired cPath
$content .= '<a class="'. a.catBoxHeading1 . '" href="' . zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']) . '">'&gt;Air Conditioning<br /> Split System<br /> Ducted<br /></a>' . $disp_block_head) . "\n";
break;
}
?>



-------------
This is the css

.catBoxHeading1 {
font-family: arial,verdana,helvetica, sans-serif;
font-weight: bold;
font-size: 1em;
color: #00DD00;
margin-top: 2px;
margin-bottom: 2px;
padding-top:2px;
padding-bottom:2px;
margin-left:-6px;
}

a.catBoxHeading1:visited {
font-family: arial,verdana,helvetica, sans-serif;
font-weight: bold;
font-size: 1em;
color: #00CD00;
margin-top: 2px;
margin-bottom: 2px;
padding-top:2px;
padding-bottom:2px;
margin-left:-6px;
}

a.catBoxHeading1:hover {
font-family: arial,verdana,helvetica, sans-serif;
font-weight: bold;
font-size: 1em;
color: #000000;
margin-top: 2px;
margin-bottom: 2px;
padding-top:2px;
padding-bottom:2px;
margin-left:-6px;
}

a.catBoxHeading1:active {
font-family: arial,verdana,helvetica, sans-serif;
font-weight: bold;
font-size: 1em;
color:#FF0000;
margin-top: 2px;
margin-bottom: 2px;
padding-top:2px;
padding-bottom:2px;
margin-left:-6px;
}
Thank You
Relentless

Using [php] tags in your post will show up certain coding errors:

PHP Code:

---

$content .= '<a class="'. a.catBoxHeading1 . '" href="' . zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']) . '">'&gt;Air Conditioning<br /> Split System<br /> Ducted<br /></a>' . $disp_block_head) . "\n"; 


---

catBoxHeading1 is not a php entity, but an html tag, and is nothing but another text string to php.
You don't want the single quote before the &gt;, as that will tell php that the text string is finished and the rest is php code.

PHP Code:

---

$content .= '<a class="catBoxHeading1" href="' . zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']) . '">&gt;Air Conditioning<br /> Split System<br /> Ducted<br /></a>' . $disp_block_head) . "\n"; 


---

The css looks good, although you don't need to spell out so much. The first set is ok, but the rest differ only in the color, and don't need to have the rest of the properties mentioned. They will be inherited from the link declaration unless specifically changed.

a.catBoxHeading1:visited {
color: #00CD00;
}

Thanks a lot gjh42! This solution worked very well and I resolved my problem. Thanks again...

Silvio.

/*I see that I have arrived back at your original PHP code entry,
now it makes sense, is this correct, to put in tpl_categories.php. */
<?php
case '28': //replace number with your desired cPath
$content .= '<a class="catBoxHeading1" href="' . zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']) . '">&gt;Air Conditioning<br /> Split System<br /> Ducted<br /></a>' . $disp_block_head) . "\n";
break;
?>
--------
This is the css

.catBoxHeading1 {
font-family: arial,verdana,helvetica, sans-serif;
font-weight: bold;
font-size: 1em;
color: #00DD00;
margin-top: 2px;
margin-bottom: 2px;
padding-top:2px;
padding-bottom:2px;
margin-left:-6px;
}

a.catBoxHeading1:visited {
color: #00CD00;
}
a.catBoxHeading1:hover {
color: 000;
}
a.catBoxHeading1:active {
color: #f30;
}
Thank You
Relentless

That looks correct. Try it and see!

I got this error
Parse error: syntax error, unexpected ')' in
/home2/xxxxxx/public_html/includes/templates/zencart_zen/sideboxes/tpl_categories.php on line 47
Line 47 is part of this PHP, I do not see the ')'
------This caused the error. I commented the original PHP, in case of an error.
// categories dressing - add (divider and) heading above a cat
$disp_block_head = '';
//$disp_block_head = '<br />'; // for heading not block uncomment this line
switch ($current_path) {
case '28': //replace number with your desired cPath
$content .= '<a class="catBoxHeading1" href="' . zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']) . '">&gt;Air Conditioning<br /> Split System<br /> Ducted<br /></a>' . $disp_block_head) . "\n";
//$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>':'&gt;Split System<br /> Air Conditioning<br /> //Ducted<br /></span>' . $disp_block_head) . "\n";
break;
Thank You
Relentless

With the deletion of

. (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') ? //zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') .

the ) after $disp_block_head should have been removed also. I missed that in the original simplification.

@ Glenn

Thank you for helping out!

The Categories Dressing Heading link is working,
.catBoxHeading1 css line 911 the [color: #00DD00;] not working.
It's the color that makes the Heading
the color is inherited from the a:link, css line 23 with color:ff11bb;
now the heading is the same #color as the Category links.
Is there a fix for this?
Or is it a matter of a total css link overhaul.
Thank You
Relentless

I wabt to know Categories Dressing can it wrok on Click-Show-Hide Category Menu...??
http://www.zen-cart.com/index.php?ma...roducts_id=872

Thanks..

No, Categories Dressing is built on the standard categories sidebox, and would require major recoding to work on another version of the box.

You could take some of the code and adapt it to another version, as long as you understand the coding principles involved. Some versions will be more difficult, depending on how they are organized, and some may be easy.

HELP...

I just installed categories dressing mod on a live site and there's some type of image of CAT3SAMPLE in place of one of my categories AND a big pink LINK HEADER image between the specials section.

I only uploaded the files and have not modified ANYTHING at all yet.

PLEASE, let me know if there's an easy way to get rid of whatever these two big images are so I can get my site back to normal until I learn to SLOWLY modigy the necessary files with only MINOR changes that I can quickly undo if I mess up.

I wish there had been some type of warning in the install file that uploading this mod will automatically add two large images into categories.

Anyway, hoping for a response soon.

Using version 1.3.8 and here's a link to the site http://www.CraftMagick.com


Hope someone can help.

Thanks.

Zencart ROCKS!

Quote:

---

Originally Posted by Craft Magick

HELP...

I just installed categories dressing mod on a live site and there's some type of image of CAT3SAMPLE in place of one of my categories AND a big pink LINK HEADER image between the specials section.

I only uploaded the files and have not modified ANYTHING at all yet.

PLEASE, let me know if there's an easy way to get rid of whatever these two big images are so I can get my site back to normal until I learn to SLOWLY modigy the necessary files with only MINOR changes that I can quickly undo if I mess up.

I wish there had been some type of warning in the install file that uploading this mod will automatically add two large images into categories.

Anyway, hoping for a response soon.

Using version 1.3.8 and here's a link to the site http://www.CraftMagick.com


Hope someone can help.

Thanks.

Zencart ROCKS!

---

OK, I fixed the 'emergency' by:

1. Viewing the source code of my home page and then renaming the image that was appearing in place of one of the category name.

2. From the 'view source' I found the "Link Heading" reference and then did a search of the tpl_categories.php until I found the line to uncomment.

I still need to figure out the rest as far as colors, etc. go but now at least the site doesn't look ridiculous.

Just thought I'd post this in case anyone else ever runs into this same issue that is NOT php savvy (like yours truly :blink:

This will probably be a GREAT mod once I learn how to use it :clap:

Zencart ROCKS!

The readme file does describe the example image files and settings and tells (in bold font) how to remove them, as well as details of how to do many other things.

Quote:

---

Originally Posted by gjh42

The readme file does describe the example image files and settings and tells (in bold font) how to remove them, as well as details of how to do many other things.

---

You're right and I feel very embarrassed by my post. After I went back and re-read the install file it was there, plain as day :blush:

This was a very valuable learning experience for me --- ALWAYS thoroughly read ALL install text BEFORE ftp'ing to a live site!

And thank you again for your prompt and helpful responses to my frantic posts today. I really appreciate your time and help, gjh42.

Zencart ROCKS!

on

www.nothingbutcostumes.com

How can I make the space between each Category Header and the Sub Category Name smaller? I just want to close that gap a little.

I'm not sure what has caused that gap for you - it doesn't exist in my fresh install test site. The line-height: 14px; setting you made for body{} in your main stylesheet is the cause of the background not quite filling behind the letters of your headings.

Change/add this

margin-bottom: -0.7em;
line-height: 1.4em;

to bring the headings more into line:

Code:

---

.catBoxHeading1 {
    font-family: 'times new roman', serif;
    font-weight: bold;
    font-size: 1.2em;
    color: #335511;
    background-color: #00ccff;
    /*background-image: url(../images/catheadbg1.gif); */ /*uncomment to use background image with or without coded text*/
    /*height: 23px; */ /*uncomment to use background image without coded text*/
    display: block;
    padding: 0.0em 0.0em;
    margin-top: 0px;
    margin-bottom: -0.7em;
    line-height: 1.4em;
    }

---

Check in IE6 if you have it, as it may not correctly handle the negative margin-bottom even though it is valid CSS.

Question: Did you perhaps uncomment the alternate
$disp_block_head = '<br />';
in tpl_categories.php?

-Yes, you must have, as there is not supposed to be a <br /> after the headings in your view source output.

That would cause an extra line break after headings, which is what it looks like you have.

Ok yes I did... And your fix worked..

Now to Tinker...

I'm back with another question. Things start to look very good in the categories menu but I want to ad a link to conditions with the same kind of buttons I've used for the rest of the menu. How do I do that? Should I ad a link in the stylesheet? And what cpath will the button name require?

Do you want this conditions link in the categories menu, or just an image in place of the "Algemene voorwaarden" text in the information menu?
You can replace text with an image by defining it with the <img ...> tags in the language file.

Thank you very much. I wanted the image in the categories menu, but images in the information menu will do fine too. Thank you for your help!

How can I change the color of the bottom of the cells
www.nothingbutcostumes.com

Also, Can I put a border around each Section?

Or to be more spacific. I want to try to be as close as I can be to

www.buycostumes.com

I'm getting "can't find the website" for that now...

The code does not create distinct sections that can be given a border, it just allows headers at desired points. There won't be a simple way to recreate that look, but it may be possible without adding code to tpl_categories.php.

Try giving border-left and border-right to a.category-top-text.
Then give the categories above each heading a special style like category-bottom, and style a.category-bottom-text with border-left, border-right and border-bottom (as well as whatever other styling a.category-top-text has).
As long as there is no margin between the categories, this should give the look of a box.

I made these changes to

www.nothingbutcostumes.com

Quote:

---

/* example for top category styling */
a.category-top-text {
/*background-color: #ccddff;*/
color: #1122aa;
border-left: 1px solid #112233;
border-right: 1px solid #112233;
category-bottom: 1px solid #112233;
/*margin: 0.2em 0;*/
/*padding: 0.2em 0.3em;*/
}

---

The Sides are what I was after...
How can I box around the Title and the footer in the box.

I think to make it like the other site, I would have to make them as an image right?

Also, which was the item to edit the colors of the Title and The Footers? I dont think Pink looks that well there

If you want the border to go around the header and footer of each section, you can add borders like

Code:

---

.catBoxHeading1 {
    border: 1px solid #112233;
    border-bottom: none;
    }

.catBoxSubtext {
    border: 1px solid #112233;
    border-top: none;
    }

---

You can change the header and footer colors there also.

Ok

Thats much better...

How can I add spaces to this instead of underlines?

Quote:

---

$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>':'TV & Movies All Sizes__</span>' . $disp_block_head) . "\n";

---

If I dont have underlines the spaces wont show at all

www.nothingbutcostumes.com

Definitely wierd... You have .catBoxHeading1 {... display: block; ...}, but it is not displaying as block. It is currently displaying as inline, which is why the headings don't fill the sidebox width.

So what can I do to fix that?
Also strange... It fills in on IE but not on Firefox or Flock

how can I modify the spacing between the left arrow and the text... I want to eliminate as much space so the category text does not spill over to a second line....

thanks

http://midwestapplianceparts.com/111111.gif

hello Glenn

i just install this mod GREAT!!!

i have one question its possible with this mod to do this for example

Top Categories
A
B
C
D

when you click on Top Categorie B for example to only display Top Categorie B with B sub-categories and hide the rest just when you going to B Top categorie

to have something like this....

(not a link) -->Deparments [show all] <-- this his a link for main page with all categories]

but then only have

B top categorie

and sub categories.....not any other categories only the ones from B?
B-1
B-2
B-3


thank you

keylesslocks -
Unfortunately, that's one of the things that can't currently be controlled in CSS lists. Apparently there was an early spec that called for lots of control of list item markers, but no browser makers supported it and it was withdrawn. I'm sure a future version of CSS will have that ability in some form.

Meanwhile, you can get the desired control by using cruder methods: a simple background image with padding to leave space for it to show.

In your stylesheet_categories_dressing.css, find this

Code:

---

/* bullet for top categories & links:*/

a.category-top-text .category-not-selected, a.category-top-text .category-subs-selected, #categories a.category-links {
    display: list-item;
    list-style: disc inside url(../images/bullet1.gif);
    }

---

and change to this

Code:

---

a.category-top-text .category-not-selected, a.category-top-text .category-subs-selected, #categories a.category-links {
    background-image: url(../images/bullet1.gif);
    background-position: center left;
    background-repeat: no-repeat;
    padding-left: 7px;
    }

---

triplexxx -
I'm not quite sure what you want when you say
Deparments [show all] <-- this his a link for main page with all categories].
Where do you want this to display? Somewhere in the categories sidebox?

But the other part, showing only the current top cat & its subs, is easy to do. I posted about that yesterday: Parent Categories Separated In 3 sideboxes, posts 44 & 46.

Categories Dressing v2.0
Heading links are enabled, they work fine. 2 questions. below.
At this time all links in column left css are inheriting from "sideBoxContent"
id="categoriesContent" class="sideBoxContent">
I wish to change the #color of the linked cat headings.
I have catBoxHeading1, added to css style sheet.
======================
This is my site html from view source Cat Heading
<a class="catBoxHeading1" href="http://www.mywebsite.com/index.php?main_page=index&amp;cPath=28&amp;zenid=123456789">&gt;Air Conditioning<br />Split System<br />Ducted<br /><br /></a>

=================
This is tpl_categories.php
{
case '28': //replace number with your desired cPath
$content .= '<a class="catBoxHeading1" href="' . zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']) . '">&gt;Air Conditioning<br />Split System<br />Ducted<br /><br /></a>'. $disp_block_head . "\n";
break;
===============================================
2 QUESTIONS
1] Should this be changed id="categoriesContent" class="sideBoxContent">
//-----
2] Will this enable the CSS declaration 'catBoxHeading1'.
case ($box_categories_array[$i]['top'] == 'true'):
$new_style = 'catBoxHeading1';
break;

Thank You
Relentless

Are you saying that .catBoxHeading1 in your stylesheet is not taking effect?
Do you want the top categories to look just like the headings?

1) Don't change the base class, just make the specific class more specific if it needs to be.
Since the headings are now links, try
a.catBoxHeading1 {}.

If that doesn't work,
#categories a.catBoxHeading1 {}
should do it.

How are the declarations ordered in your stylesheet? The general ones like .sideBoxContent should come before specific ones like .catBoxHeading1.

2) This will make top categories indistinguishable from headings. This is probably not what you want.

#categories a.catBoxHeading1 () CSS is working as you said.
Heading color is correct.
Thank you for responding.

Relentless

For category-top-text in html we see <span class="category-not-selected">
I would think this should be corrected.
Is there a CSS addition like (#categories a) for .category-top-text
Thank You
Relentless

The .category-not-selected is inside the .category-top-text, so if there is a setting for it, it should properly supersede the text class. If there is no setting for it, the text class will control.

An overview of this issue.
I did not understand your previous response.
1) question below.
yes #categories a.catBoxHeading1, is working, Thank You
with some inheretence from .sideBoxContent
and .category-top-text, not working.
.sideBoxContent still overrides .category-top-text.
=
mywebsite html from View Page Sorurce see <span class="category-not-selected">
<h3 class="leftBoxHeading" id="categoriesHeading">Products</h3>
<div id="categoriesContent" class="sideBoxContent">
<a class="catBoxHeading1" href="http://www.mywebsite.com/index.php?main_page=index&amp;cPath=28&amp;zenid=123456789">&gt;Air Conditioning<br />Split System<br />Ducted<br /><br /></a>
<a class="category-top-text" href="http://www.mywebsite.com/index.php?main_page=index&amp;cPath=29&amp;zenid=123456789"><span class="category-not-selected">Split Systems <br />AC Ducted<br />1 to 2 Tons<br /><br /></span></a>
<a /* Column left continues with both Headings and cat links*/
==
In CSS style sheet
.catBoxHeading1---- line 913
.category-top-text--line 937
.sideBoxContent-----line 944
===
One question here.
My tpl_categories.php as it is now.

$disp_block = '';
//$disp_block = '<br />'; //if not using display: block; in stylesheet, uncomment this line
$content = "";

$content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent">' . "\n";
for ($i=0;$i<sizeof($box_categories_array);$i++) {
switch(true) {
//1 Question)Do I need to add .catBoxHeading1 and .category-top-text here as a $new_style=
// or #categories a.catBoxHeading1 as a $new_style= .

case ($box_categories_array[$i]['top'] == 'true'):
$new_style = 'category-top';
break;
case ($box_categories_array[$i]['has_sub_cat']):
$new_style = 'category-subs';
break;
default:
$new_style = 'category-products';
}

<!--bof-optional categories tabs navigation display-->
<div id="navCatTabsWrapper">
<div id="navCatTabs">
<ul>
<li><a class="category-top" href="http://www.mywebsite.com/index.php?main_page=index&amp;cPath=28&amp;zenid=123456789">Split System <br /> AC Ducted<br />1 to 2 Tons<br /><br /></a> </li>
This <ul> contains all the non heading cat links
<li><a class="category-top" href="http://www.mywebsite.com/index.php?main_page=index&amp;cPath=106&amp;zenid=123456789">Packaged AC<br />Heat Pumps</a> </li>
</ul>
</div>
</div>
<!--eof-optional categories tabs navigation display-->

overview ends

Thank You
Relentless

You should not change the $new_style= area.

"In CSS style sheet
.catBoxHeading1---- line 913
.category-top-text--line 937
.sideBoxContent-----line 944"

.sideBoxContent will override selectors of equal importance that come before it, so you should have that first, and then the more specific selectors.

.category-top-text is the class of the link, so you can say

a.category-top-text {}
or #categories a.category-top-text {}

.category-not-selected is the class of the span inside the link, not the class of the link. If you don't want that to control the display, comment out its declaration.

By simply moving .sideBoxContent{} above .category-top-text {) in the CSS style sheet,
.category-top-text {) now works, I had it backwards.
=====
Since .category-top-text{} and #categories a.catBoxHeading1{} are now working fine,
do I need to be concerned about <span class="category-not-selected"> with SEO, W3C, etc.
opening time does not seem to be an issue.
Thank You
Relentless

I can't imagine that HTML class tags would be an impediment to SEO. Spiders won't care what name you call the elements of your page; it's the structure and organization that matters.

I'm back with another question (sorry for that). I got everything working great but now I want an image as header for the categories sidebox. I've tried to figure it out based on reading the stylesheet and I made an image called cathead.gif but it's not showing up.

I'm sorry for all the dumb questions.

Categories Dressing does not affect the sidebox header. For that you want Image Titles.

Quote:

---

Originally Posted by gjh42

Categories Dressing does not affect the sidebox header. For that you want Image Titles.

---

I'm wanting to do the same thing as the person above. I want to change the side box headings, like "Information", "Search", "Links" etc. to images. I have searched and searched and I see it on lots of pages but I can't figure out how to make it happen. I tried using Categories Dressing and I'm not having any luck. One thing I can't figure out is what is meant by "cpath".

Here's my page:

http://groupie-g.com/zen/

As I said, the Image Titles mod is built to do what you are asking for. See the link in my sig.

$cPath is a variable that holds the category path to a particular category or product. It is composed of the category id of the top cat and any subcats, separated by underscores ( _ ).
You can see it in the address bar at the top of your screen as something like
... &cPath=23_42& ...

:lookaroun...takin notes....thanks

Quote:

---

Originally Posted by gjh42

$cPath is a variable that holds the category path to a particular category or product. It is composed of the category id of the top cat and any subcats, separated by underscores ( _ ).
You can see it in the address bar at the top of your screen as something like
... &cPath=23_42& ...

---

Quote:

---

Originally Posted by gjh42

As I said, the Image Titles mod is built to do what you are asking for. See the link in my sig.

---

Thanks Glen. I think I made that post without knowing the difference or what I was talking about.

I did try the Image Titles and couldn't get it to work. :frusty:

One thing that I have noticed is that when I inspect an element with Firebug, it gives me the HTML on the left pane and the CSS in the right pane. I have been able to change the HTML in the left pane and get the results I want. Unfortunately, I can't find the HTML in my files. Can you explain why it shows HTML in Firebug but I don't have access to HTML anywhere else? I'm being very lost and confused now.

How do I remove the -> from the end of top level categories? Thanks.

I confess I'm clueless. :frusty:

I've been trying to make my headings linked and everything I've tried (from the "Relentless' posts earlier in this thread) so far kills all of the sideboxes. They either completely disappear or they all start overlapping on top of each other.

Here is a link to the site: www.nybgear.com

I want the headings to link to a category by the same name. As you can see, right now the category is showing directly under the headings. If I can get the headings linkable, I will turn those specific categories off.

I appreciate your help!

Hi Glenn,

I hope you don't get annoyed by me, but I have yet another question. I have images for eacht category in my menu. They are images of words so they are not good for english or german.

Now I've made new images and placed them, the way I read in this thread, in buttons and than language.

So the path for example for category 1 would be
buttons/dutch/catimg1.gif
buttons/german/catimg1.gif
buttons/english/catimg1.gif

Now I read the part on language-specific stylsheets so I made a stylesheet for every language. What I just don't understand is what to put in it. I read something on catbackground... but I don't use those images, I just use the catimg.gif thing. So what do I add to all of the stylesheets to make it work?

Sorry if this is a stupid question. Thank you again for all your help.

Juliet

Language-specific stylesheets and the /buttons/language/ subfolders are two different ways to get similar results. They don't really work together, although it probably won't hurt to use them both for their own purposes.
The stylesheets can work for background images, but not for foreground images, and background images cannot switch between subfolders within the CSS.

You should actually be able to make language subfolders in your template /images/ folder, and save the category images there.
Change this section

PHP Code:

---

      // 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'] . '"'); 


---

to look like this

PHP Code:

---

      // categories dressing - display image if exists for category name in current language - with title tag
      if (file_exists(DIR_WS_TEMPLATE_IMAGES . $_SESSION['language'] . '/catimg' . $current_path . '.gif')) {
        $cat_name_display = zen_image(DIR_WS_TEMPLATE_IMAGES . $_SESSION['language'] . '/catimg' . $current_path . '.gif', '', '', '', 'title="' . $box_categories_array[$i]['name'] . '"'); 


---

This approach can be adapted to other foreground image displays as well.

Qwert302 -

The -> is set in admin > Configuration > Layout Settings >
Categories Separator between the Category Name and Count.

Boggled -

You are making things more complicated than they need to be for your situation.
Instead of making headings that link to the first category in each section, and then hiding that category name, just make those category names look like headings. Use the built-in switch:

PHP Code:

---

    switch(true) {
// to make a specific category stand out define a new class in the stylesheet example: A.category-holiday
// uncomment the select below and set the cPath=3 to the cPath= your_categories_id
// many variations of this can be done
//      case ($box_categories_array[$i]['path'] == 'cPath=3'):
//        $new_style = 'category-holiday';
//        break; 


---

and make a case for each of categories 1-6, referencing 'category-heading':

PHP Code:

---

      case ($box_categories_array[$i]['path'] == 'cPath=1'):
        $new_style = 'category-heading';
        break;
      case ($box_categories_array[$i]['path'] == 'cPath=2'):
        $new_style = 'category-heading';
        break; 


---

and then style a.category-heading {} the same as you have styled .catBoxHeading1.

Quote:

---

Originally Posted by gjh42

and then style a.category-heading {} the same as you have styled .catBoxHeading1.

---

Thank you so much Glenn! I should have known I was overthinking it.

The links are working now, but I can't get them styled. I've added the a.category-heading{} to my stylesheet, but they don't appear to be picking up any styling whatsoever. I tried commenting out the catBoxHeading1 and various other combinations, but nothing worked.

Here is what I have in my stylesheet:

Code:

---

       
.catBoxHeading1 {
    font-family: "Lucida Grande", tahoma, verdana, arial, helvetica, sans-serif;
        font-size:1em;
        font-weight: bold;
        padding: 0.1em 0 0em 0;
        display: block;
    color: #ffffff;
        text-align: center;
    background-image: url(../images/red/sideboxbg.gif);  /*uncomment to use background image with or without coded text*/
    height: 20px;  /*uncomment to use background image without coded text*/
    width: 160px;
        border: 3px ridge #F9F9F9;
        border-style: ridge;       
    margin-top: 2px;
    margin-bottom: 2px;
        margin-left: -6px;
    }
       

.catBoxSubtext {
    /*font-family:  'times new roman', serif;*/
    font-weight: normal;
    font-size: 1em;
    color: #000000;
    padding: 0.1em 0.2em 0.1em 1.0em;
        background-color: transparent;
        border-top: 2px solid #E4E0D7;
        padding: 4px;
    } 

/*display all cat box links as block*/
#categories a {
    background-repeat: no-repeat;
    display: block;
        border-top: 1px solid #F3F3F3;
        border-bottom: 1px solid #A9A294;
        border-left: 1px solid #D9D9D9;
        border-right: 2px solid #A9A294;
    }

       
a.category-heading {
    font-family: "Lucida Grande", tahoma, verdana, arial, helvetica, sans-serif;
        font-size:1em;
        font-weight: bold;
        padding: 0.1em 0 0em 0;
        display: block;
    color: #ffffff;
        text-align: center;
        background: #244B86;
    background-image: url(../images/red/sideboxbg.gif);  /*uncomment to use background image with or without coded text*/
    height: 20px;  /*uncomment to use background image without coded text*/
        /*width: 157px;*/
    margin-top: 2px;
    margin-bottom: 2px;
        margin-left: -6px;
        }

       
/* example for  top category styling */
a.category-top-text {
        display: block;
        background-color: #E9E9E9;
        border-top: 2px solid #ECECEC;
        padding: 4px;
    color: #000000;
    margin: 0.0em 0;
    padding: 0.2em 0.3em;
    }

a.category-subs-text, a.category-products-text  {
    background-color: #ffffff;
    border-top: 1px solid #E6E6E6;
    border-bottom: 1px solid #D1D1D1;
    border-left: 1px solid #D9D9D9;
    border-right: 2px solid #D1D1D1;
    color: #000000;
    margin: 0.0em 0;
    padding: 0.2em 0.3em;
    }

/* uncomment for  top category hover effects (add ,  a.category-subs-text, a.category-products-text if desired) (use  background-image if desired)*/
a.category-top-text:hover {
        color: #000000;
        border-top: 1px solid #f5f5f5;
        border-bottom: 1px solid #f5f5f5;
    background-color: #ffffff;
    }
       
a.category-subs-text:hover, a.category-products-text:hover  {
        color: #000000;
    background-color: #93C632;
    }

---

Site: www.nybgear.com

Do you see what I'm doing wrong? I know it's bound to be something simple that I'm overlooking.

Is their a way to center the images you use as category names? you can see my problem here:

http://www.optifact.com/zencart

Also is their a way to add a space between the images? you can see my problem here: http://www.optifact.com/zencart

SITM -
Add text-align: center; and margin-top: .5em; to your #categories a{} rule:

Code:

---

#categories a {
    background-repeat: no-repeat;
    display: block;
    text-align: center;
    margin-top: .5em;
    }

---

Boggled -

The category names are straight text, so they are getting the -text added to the class name. Change the a.category-heading { to a.category-heading-text { and it should pick up the styling. This wasn't so much a mistake of yours as something I might have foreseen if I had thought about it.

Hello,

I am in need of a little clarification...i am trying to change my categories text links into image links. So far it does not work and i am wondering when you say "copy this in your stylesheet" are you referring to the CSS included in the download (which the code is already there) or my stylesheet.CSS which was there before the mod installation. So this is what i would add (copied this from another post, page 30)

#categories a {
background-repeat: no-repeat;
display: block;
}

a.catBg14 {
background-image: url(../images/catbg14.gif);
height: 30px;
}

a.catBg14:hover {
background-image: url(../images/catbg14hover.gif);
height: 30px
}

And replace the 14 with my own cpath ?And when i add another image link, i just copy this again and change the number with the desired cpath number? Nothing else to add elsewhere except upload the image into my image folder? Lots of question marks eh?:smile: Thanks for any help on this matter.

Matt

Quote:

---

Originally Posted by gjh42

Boggled -

The category names are straight text, so they are getting the -text added to the class name. Change the a.category-heading { to a.category-heading-text { and it should pick up the styling. This wasn't so much a mistake of yours as something I might have foreseen if I had thought about it.

---

Glenn,

Thank you!!! That fixed it. They look and work perfect now. :smile:

Well i found what i was looking for and answered all of my questions in the process :thumbsup: Please ignore my above post

Matt

How can I alter the tpl_categories.php code so that I may use the same image and same image name for every category?

I want to use rollover buttons in place of category names but I don't want to have to add entries to my .css and copy images with new names evertime I create a new cat.

Thanks in advance,
John

Ohhh I was making it too hard on myself. a.category-top-text {}

Thanks for the great mod!

John

Hi Glenn,

I'm sorry to bother you once again. I did exactly as you said in this post http://www.zen-cart.com/forum/showpo...&postcount=364 but it makes me end up with a text based menu again.

I copied the php code exactly and also made language specific subfolders. I don't understand why it's not working.

I haven't tested the /images/language/ subfolder approach yet, so there is a chance that it won't work for some reason.

I know that the /buttons/language/ subfolder approach works, so try altering your code and folders to that and see what happens.

PHP Code:

---

      // 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'] . '"'); 


---

Hi Glenn,
first thanks a lot for this great mod :)
I have a couple of questions: i have added this to my css:

#categories a {
background-repeat: no-repeat;
display: block;
}


a.catBg1 {
background-image: url(../images/catbg1.gif);
height: 45px;
}

a.catBg1:hover {
background-image: url(../images/catbg1hover.gif);
}

and have files called catimg1.gif, catbg1.gif, catbg1hover.gif.

I can see the catimg file, but the rollover effect is not showing. instead i have a red background at the edge when I go on the cat. what am I doing wrong?

another question: my site is bilingual and I want therefor for each language a different image, can this be done? if not, is it possible to have the cat name showing as text and have the bg? how do I do that?
thanks a lot!!
nilsen

Hi Glenn,

I'm sorry but I'm still having no luck with it. Now the problem could very well be that I'm very new to php and am making beginners errors.

Here's the php file (without the language things you wrote down to add because it wasn't working for me I had to take them out)

PHP Code:

---

<?php
/**
 * Side Box Template
 *
 * @package templateSystem
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_categories.php 4162 2006-08-17 03:55:02Z ajeh $
 * Modified for Categories Dressing v2.2  by Glenn Herbert (gjh42)  2008-02-25
 */
  $disp_block = '';
  //$disp_block = '<br />'; //if not using display: block; in stylesheet, uncomment  this line
  $disp_block_head = '';
  //$disp_block_head = '<br />';  // for headings not block uncomment this line
  $content = "";
  
  $content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent">' . "\n";
  for ($i=0;$i<sizeof($box_categories_array);$i++) {
    switch(true) {
// to make a specific category stand out define a new class in the stylesheet example: A.category-holiday
// uncomment the select below and set the cPath=3 to the cPath= your_categories_id
// many variations of this can be done
//      case ($box_categories_array[$i]['path'] == 'cPath=3'):
//        $new_style = 'category-holiday';
//        break;
      case ($box_categories_array[$i]['top'] == 'true'):
        $new_style = 'category-top';
        break;
      case ($box_categories_array[$i]['has_sub_cat']):
        $new_style = 'category-subs';
        break;
      default:
        $new_style = 'category-products';
    }
    $current_path = str_replace("cPath=","",$box_categories_array[$i]['path']);
    if (zen_get_product_types_to_category($box_categories_array[$i]['path']) == 3 or ($box_categories_array[$i]['top'] != 'true' and SHOW_CATEGORIES_SUBCATEGORIES_ALWAYS != 1)) {
      // 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 - 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;
      }  
      // 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'] . '"'); 
      // categories dressing - display background image if exists for category name - with title tag
      } elseif (file_exists(DIR_WS_TEMPLATE_IMAGES . 'catbg' . $current_path . '.gif')) {
        $cat_name_display = zen_image(DIR_WS_TEMPLATE_IMAGES . 'pixel_trans.gif', '', '100%', '100%', 'title="' . $box_categories_array[$i]['name'] . '"');
        $cat_img_bg = ' catBg' . $current_path;
      } else {
        $cat_img_bg = '-text';//append to main classname
      }
      $content .= '<a class="' . $new_style . $cat_img_bg . '" href="' . zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']) . '">';
      if ($box_categories_array[$i]['current']) {
        if ($box_categories_array[$i]['has_sub_cat']) {
          $content .= '<span class="category-subs-parent">' . $cat_name_display . ($disp_block == '<br />'?'</span>':'');
        } else {
          $content .= '<span class="category-subs-selected">' . $cat_name_display . ($disp_block == '<br />'?'</span>':'');
        }
      } else {
        $content .= '<span class="category-not-selected">' . $cat_name_display . ($disp_block == '<br />'?'</span>':'');
      } // category name mods

      if ($box_categories_array[$i]['has_sub_cat']) {
        $content .= CATEGORIES_SEPARATOR;
      }
      $content .= ($disp_block == '<br />'?'</a>':''); // categories dressing - adjust link end 

      if (SHOW_COUNTS == 'true') {
        if ((CATEGORIES_COUNT_ZERO == '1' and $box_categories_array[$i]['count'] == 0) or $box_categories_array[$i]['count'] >= 1) {
          $content .= CATEGORIES_COUNT_PREFIX . $box_categories_array[$i]['count'] . CATEGORIES_COUNT_SUFFIX;
        }
      }

      $content .= ($disp_block == ''?'</span></a>':'') . $disp_block . "\n"; // categories dressing - adjust link end 

      // categories dressing - add subtext below a cat
      switch ($current_path) {
      case '23': //replace number with your desired cPath
        $content .= '<span class="catBoxSubtext">Subtext for cat 23 escape apostrophe\'s</span>' . $disp_block . "\n"; 
      break;
      } // subtext
    }
  }

  if (SHOW_CATEGORIES_BOX_SPECIALS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true' or SHOW_CATEGORIES_BOX_FEATURED_PRODUCTS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') {
// display a separator between categories and links
    if (SHOW_CATEGORIES_SEPARATOR_LINK == '1') {
      $content .= '<hr id="catBoxDivider" />' . "\n";
    }
    if (SHOW_CATEGORIES_BOX_SPECIALS == 'true') {
      //$content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead-specials.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead-specials.gif') . '</span>':'Link Heading</span>' . $disp_block_head) . "\n";// categories dressing - uncomment this line for heading above link 
      $show_this = $db->Execute("select s.products_id from " . TABLE_SPECIALS . " s where s.status= 1 limit 1");
      if ($show_this->RecordCount() > 0) {
        $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_SPECIALS) . '">' . CATEGORIES_BOX_HEADING_SPECIALS . '</a>' . $disp_block . "\n";
      }
    }
    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) {
        //$content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead-new.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead-new.gif') . '</span>':'Link Heading</span>' . $disp_block_head) . "\n";// categories dressing - uncomment this line for heading above link 
        $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_NEW) . '">' . CATEGORIES_BOX_HEADING_WHATS_NEW . '</a>' . $disp_block . "\n";
      }
    }
    if (SHOW_CATEGORIES_BOX_FEATURED_PRODUCTS == 'true') {
      $show_this = $db->Execute("select products_id from " . TABLE_FEATURED . " where status= 1 limit 1");
      if ($show_this->RecordCount() > 0) {
        //$content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead-featured.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead-featured.gif') . '</span>':'Link Heading</span>' . $disp_block_head) . "\n";// categories dressing - uncomment this line for heading above link 
        $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_FEATURED_PRODUCTS) . '">' . CATEGORIES_BOX_HEADING_FEATURED_PRODUCTS . '</a>' . $disp_block . "\n";
      }
    }
    if (SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') {
      //$content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead-all.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead-all.gif') . '</span>':'Link Heading</span>' . $disp_block_head) . "\n";// categories dressing - uncomment this line for heading above link 
      $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_ALL) . '">' . CATEGORIES_BOX_HEADING_PRODUCTS_ALL . '</a>' . "\n";
    }
  }
  $content .= '</div>';
?>

---

Now I was wondering where the buttons solution would need to go (I already have the buttons in language folders in my template) and if there's anything I need to adjust for my template. I tried pasting it somewhere but it started complaining about a parse error and not expecting an end.

The template name I use is juliet and it's in the normal directory of templates /includes/templates/juliet

Thanks a ton for your help, I'm so sorry that I have to keep bothering you.

Juliet

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

PHP Code:

---

     // 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 Code:

---

      // 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 Code:

---

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

Code:

---

/*

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

---

Specific styling should generally go after common/universal styling rules. In this case, since the template uses !important to enforce the background-image: none;, it might still control. You should probably just remove that property from that location.

: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

Quote:

---

Originally Posted by 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:

Code:

---

Add to your stylesheet:

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

---

You may need to add
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.