Categories Dressing

[abs007]

Sorry for the long post above.

I am trying to change the box headings to a .gif aswell. I have been using firefox web developer with the display element information. I just cant seem to find where i will get this done. Ive looked in the cat dressings css and in the template css but just cat seem to find it.
cheers

[gjh42]

OK, you have a bunch of problems on top of each other.
First, you have applied the bg image in the wrong place, in the general top categories rule instead of a separate rule for that category.

#categories ul a {/*top categories*/
    display: list-item;
    list-style:none; disc inside url(../images/bullet1.gif);/*change to list-style: none; to remove bullet*/
    background:no-repeat;
    border: none;
    margin: 0;
    padding: 0;
    /*background-image: url(../images/catBg68.gif);*/
    height: 24px;
    }



    }

hover {
    background-image: url(../images/catBg25hover.gif);
    }

The filename needs to be all lowercase:
url(../images/catBg68.gif)
should be
url(../images/catbg68.gif)
(and the actual image file should also be lowercase).

Before leaving this rule, you also need to fix

list-style:none; disc inside url(../images/bullet1.gif);/*change to...

should be

list-style:none;/*change to...
or
list-style:none; /*disc inside url(../images/bullet1.gif);change to...

You also have a loose } which could cause problems, and the hover rule sitting there by itself.
Delete both of those.

The background-image: url(../images/catbg68.gif); should go in a new rule next to the example rule:

/*individual page rules go after the general rules*/
/*example for individual category as bg image*/
#categories li a.catBg25 {
background-image: url(../images/catbg25.gif);
height: 30px;
}

#categories li a.catBg25:hover {
background-image: url(../images/catbg25hover.gif);
}

#categories li a.catBg68 {
background-image: url(../images/catbg68.gif);
height: 24px;
}

#categories li a.catBg68:hover {
background-image: url(../images/catbg68hover.gif);
}

Just copy the two example rules and change the numbers.

[gjh42]

For the box headings, you are in the wrong thread (and wrong mod). Categories Dressing has nothing to do with them. Use the Image Titles mod.

If you want the same kind of font you have used in the category names, you really have no reason to add the text as an image - that is a standard font and can be handled more efficiently as positioned text with a round-end box background for all top categories in general (and for all box headings).

[abs007]

Hi thanks for the reply. I will look into that now. You can disregard the side and centre box headings as i have managed to change them through the actual template stylesheet. I am however having difficulty removing the boarder for the centre boxes.
will keep you posted with my progress. if you know where i can remove the boarder from then please advise.
cheers

[abs007]

Ok
Have done as you said and removed the lines you asked me to and cancelled the part that needed to be canceled.

I have managed to get 1 button working just fine with the hover affect aswell. I have removed all the catimage#.gif buttons and am now uploading the buttons to the images section instead of the buttons section.

The problem that i am having is that i can only get 1 of the categories to work. When i try it with more then 1 then only 1 works and the others dont. Here is copy of the code. catbg68.gif is working fine with the hover affect aswell but the other one just dont work.

/*individual page rules go after the general rules*/
/*example for individual category as bg image*/
#categories li a.catBg25 {
background-image: url(../images/catbg25.gif);
height: 30px;
}

#categories li a.catBg25:hover {
background-image: url(../images/catbg25hover.gif);
}


#categories li a.catBg68 {
background-image: url(../images/catbg68.gif);
height: 28px;
}

#categories li a.catBg68:hover {
background-image: url(../images/catbg68hover.gif);
}

#categories li a.catBg66 {
background-image: url(../images/catbg66.gif);
height: 28px;
}

--------------------------------
I havnt tried to do the hover image for the cpath 66 as i cant get the main one to work
cheers

[abs007]

For some reason i cant edit my posts. Ive managed to get everything sorted. The code was not pulling up the images for catbg#.gif from the ../MY_TEMPLATE/images/ folder so i saved the images to MY_TEMPLATE/buttons/english and they worked fine. However when i went to add the hover image the code wouldn't pull up the images again. So i tried to save them in MY_TEMPLATE/images. when i saved them in there it worked fine.

Dont know if it was supposed to be like that but its worked and ive managed to get rid of the boarder around the centre box through the template stylesheet

Is there anyway to have a different image for a visited link?

cheers

[gjh42]

Oops, it looks like you have uncovered a bug in the stylesheet code. I apparently forgot to change the paths in the stylesheet when I reorganized the PHP code to allow multiple languages (thus the /buttons/english/), and since there were still copies of the image files in /images/ as well as in /buttons/english/ in my test site, it worked even though it shouldn't have. I have corrected that in the original package, and will submit the revised version to Free Addons as v2.7.1.


If you add a rule like


#categories li a.catBg68:visited {
background-image: url(../buttons/english/catbg68visited.gif);
}

the visited link styling should work for you.

[gjh42]

In the meantime, anyone who needs to use background images in Categories Dressing v2.6 can replace their existing stylesheet_categories_dressing.css with this one:

/**
 * CSS Stylesheet for Categories Dressing examples
 * @copyright Copyright 2009 Glenn Herbert
 * @copyright Portions Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.gnu.org/licenses/ GNU Public License V3.0
 * /includes/templates/your_template/css/stylesheet_categories_dressing.css
 * Categories Dressing v2.7.1   Glenn Herbert (gjh42)   - 20090320
 */
/*
hr.catBoxDivider1 { 
    color: #aabbcc;
    }
*/

/*IE6 hacks*/
* html #categories li, * html #categories li a {
    height: 1em;/*fix IE6 whitespace bug*/
    background-image: url(../images/pixel_trans.gif);/*partially fix IE6 a block display bug*/
    }

.catBoxHeading1 { 
    font-family: georgia, serif;
    font-weight: bold;
    font-size: 1.4em;
    color: #335511; 
    background-color: #ff66ff;
    /*background-image: url(../buttons/english/catheadbg1.gif); */ /*uncomment to use background image with or without coded text*/
    /*height: 23px; */ /*uncomment to use background image without coded text*/
    padding: 0.3em 0.4em;
    margin: 0;
    }

.catBoxHeading2 { 
    font-family: 'times new roman', serif;
    font-weight: bold;
    font-size: 1.4em;
    color: #335544; 
    background-color: #ffaaff;
    /*background-image: url(../buttons/english/catheadbg2.gif); */ /*uncomment to use background image with or without coded text*/
    /*height: 23px; */ /*uncomment to use background image without coded text*/
    padding: 0.3em 0.4em;
    margin: 0 0 2px 0;
    }

.catBoxHeading3 { 
    font-family: 'comic sans ms', sans-serif;
    font-weight: bold;
    font-size: 1.2em;
    color: #336699; 
    background-color: #ffbbdd;
    /*background-image: url(../buttons/english/catheadbg3.gif); */ /*uncomment to use background image with or without coded text*/
    /*height: 23px; */ /*uncomment to use background image without coded text*/
    padding: 0.3em 0.4em;
    margin: 0 0 2px 0;
    }

.catBoxHeadingImg { 
    padding: 0;
    margin: 0;
    }

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

#categories ul {/*top category lists*/
    list-style: none;
    background: none;
    border: 1px solid #ffaa99;
    margin: 0 0 0.4em 0;
    padding: 0;
    }

#categories ul a {/*top categories*/
    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;
    }

#categories ul ul {/*subcategory lists*/
    list-style: none;
    background: #ffeecc;
    border: none;
    margin: 0 0 0.4em 0;
    padding: 0 0 0 1.3em;
    }

#categories 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 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*/
    }

/*disable bullet for cats w/ image or bg image*/
#categories li a.cat-parent, #categories li a.cat-selected, #categories li a.cat-not-selected {
    list-style: none;
    display: block;/*fix IE6 margin-left bug*/
    }

/*different bullet for links if desired*/
/*
#categories li a.category-links {
    list-style: disc inside url(../images/bullet4.gif);
    }
*/

/* top category hover effects*/
#categories li.cat-top a:hover {
    color: #dd6633; 
    background:  #ddeeff url(../images/catbghover.gif);
    } 

/* subcategory hover effects*/
#categories li li.cat-subs a:hover, #categories li li.cat-products a:hover {
    color: #aa9966; 
    background: #ffb9ff url(../images/catbghover.gif);
    } 

/*individual page rules go after the general rules*/
/*example for individual category as bg image*/
#categories li a.catBg25 {
    background-image: url(../buttons/english/catbg25.gif);
    height: 30px;
    }

#categories li a.catBg25:hover {
    background-image: url(../buttons/english/catbg25hover.gif);
    }

/*example for custom individual category styling*/
#categories li.cat-holiday a {
    border-top: 3px dotted #112233; 
    background-color: #aabbff; 
    color: #112233; 
    padding: 1em 0em;
    }

ul#catGroup48 {
    border: 1px solid #bd6699;
    background: #bbeeff; 
    position: relative;
    left: -1.3em;
    top: 0.2em;
    }

.catCount {color: #000000;}

(There are too many change locations, and too many locations where /images/ should stay, to post piecemeal corrections.)

[abs007]

Thanks for your reply. It did take a little messing around to find out what was wrong.

I have managed to add the visited button but it dont look too good as once its been visited it stays the visited color. I was wondering if there is a way to add a button for categories that you are currently on. so for example if they went to lcd tv- because they are on that category i would like the color to be darker from the other buttons so that it clearly shows that they are on lcd tv when in comparison to the other buttons.

hope it makes sense

cheers

[gjh42]

There is a class to indicate that a category is active (selected, or the ancestor of a selected category). It would need to be combined in the stylesheet with the individual category id class, which is acceptable CSS practice, but which older versions of IE (IE6 at least) can't cope with.

You can add .cat-parent and .cat-selected to the rule like this:

#categories li a.catBg68.cat-parent, #categories li a.catBg68.cat-selected {
    background-image: url(../buttons/english/catbg68active.gif);
    }

This covers the possibilities of cat 68 being selected itself, or being the parent of a selected category. If it has no subcats, you can skip the whole #categories li a.catBg68.cat-parent, part.