Buttons for Category Links instead of Text

[scribbles]

Is there any way to have buttons for the category links instead of just text?
I want to insert a button image where the text link is.
Thanks
Scribbles

[kobra]

Fairly easy if this is a button image without text - it is then a background image applied in the css.

More difficult if this button image is unique to a category name as then applying these has to be done for each different one and this breaks some of the versatility of the cart as you have to re-edit this for every new category added or deleted

[john9]

how would you do it?

[kobra]

I think that you are referring to the actual categories names and as these are 'a'
entries you would have to address these as individual & I think without checking that this will address them directly and replace the 'a' listing for them in the css

a.category-top {
        color: #??????; 
        width: 100%;
        margin: 0px 5px 0px 0px;
        background-color: #??????;
        background-image: url(../images/your_image.gif);
        text-decoration: none;
        }

And you might do this for:
a.category-top:hover, a.category-subs, a.category-subs:hover etc. and these could provide rollover images. I can't recall if this requires the better categories mod or not right off.

This gets you an Image with the normal text and stays dynamic and for all additions/changes to your listings

[tolefairy]

Or if you don't particularly care about categories being dynamic, and just want the image instead of text, you can use the Blank_Box (sidebox) contrib like I did. It's in the download section. Excellent "read me" instructions. Even I could do it! LOL.

Since I maintain my own site and can add or subtract cats as desired, I opted for the easy way.

I love Zen Cart, but really wanted to move as far as possible from the Zen site look and be a little different. I still have work to do on the sidebox headings......I will be making them into a graphic too.

[spookyghost]

Now that some time has passed since this thread began, is there anything new whether it be a contribution or an easier process than I've been finding for suggestions in the forums that can facilitate rollover effects on images in the category box??
whew long sentence!

[kobra]

spookyghost,

Easier is a relative term - Do you find this difficult?

I think that there is in the downloads/other area a mod for "rollover" effects that you might some assistance in...

Rollover's are fairly basic html/css code

[spookyghost]

Well yes I do find it difficult, maybe even a little frustrating because the style for the text links in the catagories box is called 'category-top' but I can't find that in the stylesheet.css. I did however find the same style name in stylesheet_css_buttons.css which has no effect in my site when I make changes to it, and that's pretty sad.

Even if I did find it in the style sheet, in my search I found a post and it was suggested to do this tweak there needs to be some javascript coding involved.
So I guess I was looking for an 'easy' solution.

[kobra]

The css class is .leftBoxHeading and .rightBoxHeading to address all left & right headings. Then there are individual tags like #categoriesHeading to address these individually.

Now if for the individual ul list entries then .category-top is the class but you might need to add this to your stylesheet....Not all tags are in the stylesheet for if they were it would be huge!!

To effect rollovers for the individual entries you might need some these or similar depending on how fancy you might want to get:

A.category-top {
color: #9a9a9a !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;
}
A.category-top:hover {
background: url(../images/cat_top_hover.gif) repeat-x 0.6em 0em !important;
color:#fff !important;  border: 1px outset #f00;
}

A.category-subs {
background-color: transparent;
background-image: url(../images/cat_subs_arrow.gif);
background-repeat: no-repeat;
background-attachment: scroll;
display: block;
text-decoration: none;
width: 100%;
padding: 3px 2px 3px 15px;
background-position: 1.3em 0.5em !important;
}
A.category-subs:hover {
width: 90%; padding: 3px 2px 3px 15px;
background-position: 1.3em 0.5em !important;
border: 1px solid #aaa; display: block; text-decoration: none;
}

A.category-products {
background-repeat: no-repeat;
background-image: url(../images/cat_prod_bullet.gif);
}
A.category-products:hover {
width: 90%;
padding: 3px 2px 3px 15px;
background-position: 1.3em 0.5em !important;
border: 1px solid #aaa;
display: block;
text-decoration: none;
}

A.category-links, A.category-links:visited {
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;
}
A.category-links:hover {
background: url(../images/bg_box_header.gif) repeat-x 0.6em 0em !important;
color:#fff !important;
border: 1px outset #00f;
}

[spookyghost]

Now THAT was what I was talking about! Thanks for the plug and play Cobra.
Very nice, I'll take it from here

Cobra's post really should be a sticky...