Special Offer

17 January 2009 Easy LiveCart CSS Styling with Firebug

The LiveCart version 1.2.2 introduces a revamped, more integrated Live Customization mode and a powerful addition to its toolset - ability to modify CSS styling directly from Firebug.

If you have never heard about Firebug, it's a Firefox add-on that contains various essential web developer tools. One of these tools allows to tweak CSS definitions on the fly, so you can try out various CSS changes in the browser without having to edit your CSS files first. This is an awesome tool that makes almost any kind of CSS work easier.

However... there's always one missing step. After having made a round of changes in Firebug and deciding that the result looks good enough to be included in your stylesheet file, you have to do it all over again - find the changes that you just made and move them over to the CSS file, one by one. A seemingly minor inconvenience, but it takes a great part of CSS development time.

See where we're heading? Why couldn't the tweaked CSS styling be saved right away without having to move all the changes to CSS file manually? Well, we decided there's indeed no reason for it and added this ability to LiveCart - which now allows the complete CSS styling to be edited in real-time WYSIWYG mode.

Simple and Easy - Let's Try!

The first example - we would like to change the page title color to green, add a light yellow background and center it.

First we use the Inspect command to find the page title element in the element tree:

We don't even really need to know what type of element it is - H1, H2, DIV, etc. as we can simply point the mouse cursor to the element and click on it to find it all out:

1. Move mouse cursor over page to locate the particular element you would like to style
2. You will instantly see the element's position in the document tree and it's details
3. Here you can see what CSS selectors are being applied to it and which CSS properties are actually applied from which selector. The point of this tool is to allow changing the necessary CSS rules from here.

When you have found the element and the matching selector, CSS property changes can be applied to it. You can change existing properties and add new properties, if necessary. The element styling will update instantly.

When you're done with the changes, they can be saved. To do this simply click the Save CSS Changes button in the customization menu at the top of the page. This will make the styling changes saved permanently.

What Else Can Be Styled This Way?

Well... in fact, pretty much everything! You can easily build whole complex design themes using this tool. All CSS properties are available, so the only limiting factor would be your knowledge of CSS properties - but there are tons of online help resources available and Firebug's auto-complete feature often provides good suggestions when starting to type CSS property name or value.

Add New Selectors

Sometimes changing properties is not enough and new CSS rules have to be added. Firebug doesn't make it very easy (the only way to do it is by editing the CSS file source, which resets any property value changes), so we have created a way to add new rules ourselves.

Let's look at this feature through an example again. Assume that you would like to remove the category selection menu from the store home page only. Since the page BODY element has different class names for each store section, it is easy to control individual elements at page level. In this case, the following code would have to be added to CSS file:

.index-index .box.categories { display: none }

Instead of adding the selector to CSS file directly, you can use the Add New Rule menu and enter the CSS rule selector and text in the respective fields: