Main plugin CSS - Add-to-Cart

SimpleCaddy is displayed using css style sheets. This is the most convenient way of making the display look like you want it, without having to dive into code and programming.

The css file for SimpleCaddy is located in /components/com_simplecaddy/css/simplecaddy.css

Without css the plugin may look something like this:

plugin02

While this may be what you need, I understand that styling may be necessary here.

Let’s colorize the plugin with some bright colors to better identify each element. These colors are commented out in the css you downloaded. I also stripped the plugin from all available css to start from scratch.

plg_css01

As you can see, every item of the cart is placed on its own line without overlapping parts. We do want the product code text next to the “Product code” label. For that we need to go into the style sheet and find the corresponding class name. The best way to do this is to use Google Chrome or FireFox with FireBug installed. With that you don’t need to search for every code and development can go a lot faster.

As we can see (with FF or by reading the style sheet) the class name for the light blue element is .scproduct .

To make sure this element is not alone on one line, give it a property of display: inline;

You can now see that the element only takes the space it needs:

plg_css02

You can also observe the light gray (silver) color that is defined for the whole plugin area. It will come in handy later.

To get the dark blue ( .scprodcode ) element NEXT to the label, the label must allow for it by adding the float: left; property.plg_css03

We can now see that the dark blue element is next to the light blue element. However, the widths of these elements are not optimal. we can add the width: 200px; property to the .scproduct class and the dark blu element will be pushed away to the right, creating a nice margin.

plg_css04

Obviously all values are exaggerated here, but by now you should get the drift on how to style your plugin. The colors in this example show that all the elements of the plugin have their own styleable properties. Some templates however *may* add their own styles to yours and the results can be “interesting” or “surprising”. Often enough this results in the developer banging his head against the wall.

After some testing you will get your plugin to display everything you want.

This is the way *I* want it, a part from the colors, of course.

plg_css05

Now that I have everything in the place that I want, I can go into the style sheet one last time and disable all the psychedelic colors before my customer sets his eyes on it…

plg_css06

The final result. Not bad for playing with css for ten minutes, eh?

The resulting page will validate XHTML 1.0 Transitional.

According to the validator, the sccart div tag may not be placed inside a tag. Use your Joomla editor to change the line with the plugin call from “paragraph” to “div” and your document should validate perfectly.