The latest release of Quick Shopping Cart brought with it a new level of customization for Power Users and Web Site Designers: Advanced CSS. Using the Advanced CSS feature, you can override and extend almost any style in your chosen template, ensuring that your storefront truly reflects your desires and the needs of your customers.
In this, the first of two articles on the new Advanced CSS feature, we look at a couple specific techniques that you can use to customize your storefront appearance beyond the designs QSC currently provides. For this article, we assume that you have a basic understanding of both HTML and CSS, and of how they work together to style a site.

To start writing your custom CSS, select the Storefront menu, then Advanced CSS. Enter any CSS style you'd like to override the site's default style, select the Active checkbox, and then click Save. At any time you can de-select the Active checkbox, and your site will revert to its default state without losing your custom CSS.

Background Images

First, let’s address adding background images to your site. Background images can be used to highlight information on a page or just add that extra bit of "flair" to the design. For example, you can add an attractive gradient fade to the product name on the Product Detail page.
You can see the applied style in this before/after view of the product title on the Product Detail Page:


This is the gradient image:


Here is the CSS code that adds the image to the headerstyles the header on the right (background image code is in bold):

.product-detail-header h2 {
     font-family: Georgia, "Times New Roman", Times, serif;
     font-weight: normal;
     font-size: 2.5em;
     background-image: url(rem_store_grad.png);
     background-repeat: repeat-x;
     background-position: bottom left;
     padding-bottom: 10px;
     border-bottom: 2px solid #552906;

}

You can host your background image anywhere that is accessible from the public web, such as a WebSite Tonight account, an Online Photo Filer gallery, or any public Web host. To get the address (URL) for your image, view the image in your Web browser, right-click, and select either "Properties" (Internet Explorer) or "Copy Image Location" (Firefox). In Explorer, select and copy the URL for the image, then close the properties window.
You can now use that address as the value for the "url" in the sample code above.

Buttons

We’re frequently asked, "How can I customize my storefront ‘Add To Cart’ buttons? I don't like the browser buttons." Well, here is a technique for creating a fast-loading, image-based button that includes a mouse-over highlight in modern browsers.
First, a useful before/after:

On the left, you can see the default look of the Add To Cart buttons (in Firefox on Windows). On the right, the new look with normal and hover (mouse-over) states side-by-side.
Here is the image we use for our new buttons:

That's one image, and it has both versions of the button. We'll use a CSS technique to change which part of the image is shown when the customer moves the mouse over the button, although this is dependent on the Web browser used to view it.

This is the CSS code that renders the new buttons:

/*
      input.content-product-button is the add-to-cart button on product listings
      .product-options-table input.btn is the add-to-cart button on the product detail page
      .featured-item-button is the add-to-cart button on the featured product

*/

input.content-product-button,

.product-options-table input.btn,

.featured-item-button {
     height: 25px;
     width: 107px;
     background-color: transparent;

    background-image: url(sample_add_cart.gif);

    background-repeat: no-repeat;

    background-position: 0 0;
     font-size: 0px;
     border: none;

}



/*
      The mouse-over feature works in IE7/Windows, Safari/Mac, and Firefox, but not IE6

*/

input.content-product-button:hover,

.product-options-table .btn:hover,

.featured-item-button:hover {
     background-position: 0 -25px; 

}

The tricky part of this code is that last style line. By setting the background-position to -25px, we move the image up to show the darker hover state when the customer hovers over the button. With this style, the browser only needs to load a single image, which can help speed page loads. Also, we set the width and height of the button to the size of the button image, and set the font-size to 0 (to hide the default text in the button).
In our next article, we look at overriding fonts and colors for specific elements, and see how to use your custom CSS to move elements on the page.