Categories Dressing

I have Categories that I would like to put links after them using the same style, margin, padding etc as the categories. Where would I input the link?

Example

Computers
LINK A
LINK B
Monitors
LINK C
LINK D

Attached is an example of what I need this mod to do, would it be possible for a step by step post for this, I think it will be very beneficial to new zenners. Thanks!

The easiest and most reliable method will be to add the link as a heading above the desired category. Adding it as subtext below the category will mean that any subcats of that category will appear below the link - probably not what you want.

In /includes/languages/english/extra_definitions/your_template/categories_dressing_defines.php, add a new define like this```
define ('CAT_BOX_HEADING_33','0|0|||<a class="nonCatLink" href="index.php?main_page=page&id=5">Link to EZ-Page 5</a>|4');//link - style 4

http://www.yoursite.com/index.php?main_page=page&id=5
and if you transfer the file to a test/development site, it will point to the new base site automatically.
In /includes/templates/your_template/css/stylesheet_categories_dressing.css, make a new rule in the "individual page" section like```
/*individual page rules go after the general rules*/

/*example for custom non-category link styling to match top cats*/
#categories ul a.nonCatLink {
    display: list-item;
    list-style: disc inside url(../images/bullet1.gif);/*change to list-style: none; to remove bullet*/
    background: no-repeat;
    border: none;
    margin: 0;
    padding: 0;
    }
```This essentially replicates the top cat styling for the link.


If you want to use subtext for the link location, you can start with this:```
define ('CAT_BOX_SUBTEXT_33','<a class="nonCatLink" href="yourdestination">A Noncat Link</a>|2');//subtext link - style 2
```The styling will be a bit trickier because you will have to account for the indent.

I'm still having issues with someone logging onto the website, seeing the bullets/discs first, then seeing them be replaced with the arrow images.

Is there any way to get rid of the regular bullet icons completely so that a viewer only sees the arrow image?

:P

i have been playing around with the mod is there a way to have

define ('CAT_BOX_SUBTEXT_1','Subtext for cat 23 escape apostrophe\'s|1');//subtext - style 1

When click on the category, this subcategory is under the category name, is it possible to have it set to go on the buttom of the subcategories in that list when that category is selected?

Also for the above define, is there a way to make 2 of the same to go under the same category? I tried taking

define ('CAT_BOX_SUBTEXT_1','Subtext for cat 23 escape apostrophe\'s|1');//subtext - style 1

and switching it to

define ('CAT_BOX_SUBTEXT_1','Subtext for cat 23 escape apostrophe\'s|2');//subtext - style 2

then went to stylesheet for this mod:

.catBoxSubtext2 {
    font-family:  'times new roman', serif;
    font-weight: normal;
    font-size: 1.2em;
    color: #ff00; 
    background-color: #ffddff;
    padding: 0.1em 0.2em 0.1em 1.0em;
    }

But had zero progress

Subtext will always directly follow the category it belongs to - there is no way to make it drop below that cat's subcats. That is why I recommended using the heading version and placing it above the following category. If you want a link after the last top category, you can only do it with subtext, though.

To get two or more links in a row, make two headings for the category define statement, like```php
define ('CAT_BOX_HEADING_33','0|0|||<a class="nonCatLink" href="index.php?main_page=page&id=5">Link to EZ-Page 5</a>|4|<a class="nonCatLink" href="index.php?main_page=page&id=6">Link to EZ-Page 6</a>|4');//two links - style 4

If you need to use subtext and have two links, double up the link code directly:```php
define ('CAT_BOX_SUBTEXT_33','<a class="nonCatLink" href="index.php?main_page=page&id=5">Link to EZ-Page 5</a><a class="nonCatLink" href="index.php?main_page=page&id=6">Link to EZ-Page 6</a>|2');//two subtext links - style 2

One last thing - a workaround if your last top cat has subcats and you really want links after those: make a new empty category, set its sort order to be after all others, and give it a unique id as described in the comments in tpl_categories.php ("holiday"). Put the links as headings for that, and then in your stylesheet set that id to display: none; so it will not show yet its heading(s) will show.

I got as far as here now I'm lost.

gjh42:

Put the links as headings for that, and then in your stylesheet set that id to display: none; so it will not show yet its heading(s) will show.

I uncommented out the: in tpl_categories.php

   case ($box_categories_array[$i]['path'] == 'cPath=68'):
        $new_style = 'holiday';
        break;

My blank category id is 68, (blank you meant by not putting in the category name through admin correct?)

Im not sure how and where to put the links as headings what what to display as display: none in style sheet (#categories li.cat-holiday a { <is that it?)

-OR-
If possible I can use the sub text as shown above, and redesign what I had planned for the bar if this: Is it possible to have the subtext (CAT_BOX_SUBTEXT_1) show only on the main page OR only show when that category is not selected?...

All I am trying to do is get a link under the category, I tried in previous post, but for some reason when I change example: define ('CAT_BOX_HEADING_53','0|2||') change 53 to 3 (to match categoryid (define ('CAT_BOX_HEADING_3','0|2||'))
they dont show.

By "empty" I meant with no products. You can give it a name; that doesn't matter. If the id is 68 (and it is a top category which it should be), do the links as headings for that:```php
define ('CAT_BOX_HEADING_68','0|0|||<a class="nonCatLink" href="index.php?main_page=page&id=5">Link to EZ-Page 5</a>|4|<a class="nonCatLink" href="index.php?main_page=page&id=6">Link to EZ-Page 6</a>|4');//two links - style 4

To hide the dummy category if you have given it a new_style of holiday:

#categories li.cat-holiday a {display: none;}

gjh42:

define ('CAT_BOX_HEADING_68','0|0|||<a class="nonCatLink" href="index.php?main_page=page&id=5">Link to EZ-Page 5</a>|4|<a class="nonCatLink" href="index.php?main_page=page&id=6">Link to EZ-Page 6</a>|4');//two links - style 4

Got it to work but the define isn't working I entered it the same as you had me, I am not sure why, but its the same when I try to change other defines. What I did in the beginign Installed a fresh zen-cart store. It had a bunch of categories stock (installed through cpanel in my hosting company) I installed the Category Dressing Mod, then I had all the headings appears, removed the categories through zen store admin, and renamed the ones I kept to match my live store, ever since then when I try to change the the categorie id in category_dressing_define it doesn't work the only one that works is the sub_text

I need to see exactly what you have in your categories_dressing_defines.php to diagnose the problems you report. Post it between ```
[php] and [/php]

GOT IT! Error in my style sheet was block out all the defines, when I was trying to get something to go away i did ```php
noLi{ display:none;}

For ```php
#categories ul a.nonCatLink {

```php
#categories ul a.nonCatLink a:link
``` is unsuccessful

im trying to blend it with the categories color, what i have so far

stylesheet: 
```php
#categories ul a.nonCatLink {
  display: list-item;
    list-style: none;/*change to list-style: none; to remove bullet*/
    background: no-repeat;
    border: none;
    margin-left: 20px;
	margin-bottom:5px;
	margin-top:5px;
    padding: 0;
    }

define:

define ('CAT_BOX_HEADING_66','0|0|||<a class="nonCatLink" href="index.php?main_page=page&id=5">Link to EZ-Page 5</a>|4|<a class="nonCatLink" href="index.php?main_page=page&id=6">Link to EZ-Page 6</a>|4');//two links - style 4  

Answer to above post is:

.catBoxHeading4 a:link {

Question gjh42,

If my category name is for example Dog and its category id number is 1-> instead of changing the category name through admin, keeping it at Dog can I have it appear in the category sidebox as Dog Supplies? Reasoning behind this is because I have many links pointing to the url that it is at now (using ultimate seo), it would be great if there was someway to hide Dog and have Dog Supplies appear. If this is possible can you give me a step by step thanks!

This mod is great, very flexible with custom design!

I think my question got lost. :dontgetit

Sorry:)
The bullets are part of the display: list-item; output, and the only way to totally eliminate them is to change to display: block; and then use the arrow as a background-image, adjusting all the rest of the styling, padding, etc as required. How long do they appear? It seems you must have some slow loading for them to show long enough to notice.

Ryan - If you want to change the text that appears for the Dog category, you can make an image with "Dog Supplies" in it, and replace the text with that image. Everywhere else that category name appears, though, will still say just Dog.

You don't actually need to have "a:link" in your selector to style the links.

#categories ul a.nonCatLink {

will control basic links, and if you want hover effects, use

#categories ul a.nonCatLink:hover {

I did what you said, and got the arrows to be replaced by the bullets, thank God. It looks alot better. I've got one last padding issue...

When you click on a category with subcats, the subcats look fine, but the arrows next to those subcats are not aligned to the center, they are way up above them.

I've spent about an hour trying to edit the CSS to get them to look right. Any clue why this might be happening?

#categories ul ul a {/subcategories/
display: block;
background: transparent url(../images/bullet1.gif) no-repeat scroll 0 0 0 6px;
border: none;
margin: 0 0 0 15px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}

http://tinyurl.com/qukhsa

background: transparent url(../images/bullet1.gif) no-repeat scroll 0 0 0 6px;

Are these four values trying to locate the bg image? They won't work that way. It takes one or two values, horizontal from left and vertical from top.
Try

background: transparent url(../images/bullet1.gif) no-repeat scroll 6px 50%;

With a little tweaking in Firebug I get this:```
#categories ul ul a {/subcategories/
display: block;
background: transparent url(../images/bullet1.gif) no-repeat scroll 0 1.3em;
border: none;
margin: 0 0 0 15px;
padding: 10px 0 0 12px;
}