Monday, March 31, 2014

Zen Cart 1.5.x Removing The Border Around ALL Buttons

At the moment I am customizing a Zen Cart template to use in a new web shop I'm working on. I figured out a lot of things pretty quick, but there was one thing annoying the hell out of me all day. To make it worse, no amount of searching in Google or the Zen Cart forums resulted in any use. People would ask something like 'How do I remove the border around my Add To Cart button?', & someone would reply 'Add this code to the bottom of your .css stylesheet..' but NO ONE ever asked how to just get rid of ALL the ugly button borders. It is next to impossible to figure out which class to add at the end of the stylesheet for EACH button, trust me, I tried all day. Finally I figured out the one simple thing to do:
Open up the .css stylesheet for your template (your_shop_directory/includes/templates/your_template/css/stylesheet.css -Replacing 'your_shop_directory' and 'your_template' to what you actually have them named, of course).

Now find this line of code here:
#navCategoryIcon, .buttonRow, #indexProductListCatDescription {
margin: 0.5em;
        border: 1px solid #474747;
border-bottom: 2px solid #262626;
}
and REPLACE it with this:

#navCategoryIcon, .buttonRow, #indexProductListCatDescription {
margin: 0.5em;
        border:none;
}

PRESTO! Borders gone :)

No comments:

Post a Comment