SimpleCaddy ShowCart/EditCart CSS

The cart display seems to be an issue for many webmasters and sometimes css if difficult to master.

The cart display is done entirely by using tags and css classes. Only the outermost boundaries are defined by a containing one row and one cell only. This table has no styles and no defined properties. Therefore its only purpose is to accommodate templates that do not completely recognize content that has no “real” (read: old-fashioned) boundaries.

The cart display is defined as follows:

showcart01

The styles here have brilliant colors, all are defined in the /components/com_simplecaddy/css/simplecaddy.css file. The colors you see here are commented out in your css file like this:

.sc_cart {
    margin-left: 2px;
    margin-right: 2px;
    width: auto;
/*    background-color: silver;*/
}

Remove the /* and */ from the lines and you will get these colors for easier identification of each element.

The whole of the display is surrounded by the .sc_cart class: the silver (light gray) color.

If your cart is too large and the “Change” and “Remove” buttons display on different lines, the best option is to reduce the orange (.desc_col) class by some pixels, changing the width: property.

Obviously, if you put the background-color: xxx; lines back into a comment, your cart will look like it is supposed to look.

The css and html has been checked using the standard rhuk_beez20 template and has passed validation for all pages of the component.

With or without the funky colors…

 

About the buttons

The buttons each have their own class name and can be styled independently. Only the “Change” and “Remove” buttons have a small style defined for their width. All other buttons, by default should style like all the other buttons on your site.

 

I don’t want to see the CODE column, what should I do?

The first thing you should *not* do is delve into the php code and remove any mention of the prodcode variables. That will destroy most functionality of your shop. So, what DO you do?

Hide the code column using the CSS.

Here’s how:

Find the class called .code_col in your css file. (originally around line 20, and the css looks like this:

.code_col {
    clear: both;
    float: left;
    margin-top: 2px;
    margin-bottom:2px;
    padding-top: 2px;
    height: 30px;
    width: 60px;
    display: inline;
    vertical-align: middle;
    /*background-color: green;*/
}

Change the line with “display: inline; “ to “ display: none; “ and you’re done. Save the css file back to your server and refresh the page. Now the code column should be gone from view, but all php code behind it is still active and alive. Ensuring your cart system continues to work properly.