Customizing Your Storefront With QSC Advanced CSS, part 2
This is the second article in a series for Power Users and Web Site Designers on one of Quick Shopping Cart's newest features: 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.
A question we frequently receive is, "How can I change my site header to the same image as my other website?" In this article, we show you how to customize your header background image, header font styles, and more. If you haven't read the first article in this series, you can review the information about using the Advanced CSS feature.
Customizing Your Header
You may have another site with a custom header that you or your designer have created, and now you'd like to use that header image with your storefront. Let's look at how to make this simple change.
Here is the before/after sample: 
The top example is the header image that comes with the theme we've selected (in this case, Retro Sign - A). The bottom example shows how we want the header to look. We've tweaked the main text and replaced the background image with one of our own making.
Here's the CSS code:
#header-content {
background-image: url(sample_header.png);
height: 118px;
}
.titles h1.company-name {
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
}
The first block sets the header’s background image to our new sample_header image, and then adjusts the height to accommodate the new design.
The second block targets the company name text in the header and changes it to a serif font family, setting it apart from the original design.
Disappearing Act
So far, we've focused on how to change the appearance of certain features in Quick Shopping Cart. You can also completely remove a component from your site. You can accomplish this action by selectively hiding parts of the storefront using CSS. However, using this feature is confusing if you forget that you've hidden part of the site.
The basic technique to hide a component is to add a CSS “display:none;” style line for the component you'd like to hide. For example, here is the CSS to hide the breadcrumbs:
#breadcrumbs {
display: none;
}
With this style line, customers don’t see the breadcrumbs when navigating through the site - there won't even be an empty space where they used to be. It's like they never existed. Here's another example:
.category-list {
display: none;
}
This line hides the list of categories in your sidebar.
We’ve provided a few examples of storefront components that can be customized using the new Advanced CSS features in Quick Shopping Cart, but the possibilities for customization are countless To dive deeper into what can be done with CSS, you need to look at the storefront code to see what’s going on Fortunately, there are tools to help you look at the storefront code.
X-Ray Vision
The Firefox Web browser supports a wide range of extensions to make designing and developing your Web site easier. One example is Firebug, an extension that lets you see the HTML, CSS, and Javascript that make up the page.
As an example, here’s the Product Details page with the product name highlighted as seen with Firebug (click to enlarge view).
The left pane shows the HTML structure with the selected element highlighted. The right panel shows the CSS code for that element, allowing you to see how the element is styled. You can even experiment with the look by editing the styles in Firebug in real time. The sample site we used for this and the previous article was built using this process. We highlighted an element to customize, experimented with the styles, and then wrote it into our Advanced CSS.
Learn more:
- Firefox
- Firebug
- Firebug screencast
- W3Schools on HTML
- W3Schools on CSS
Want More?
In parts 1 and 2 of this series, we introduced some powerful tools to help you dig into your storefront. We looked at techniques to customize different parts of your storefront, including background images, custom buttons, custom header, and hiding parts of the page.
Want more? Add a comment letting us know what other parts of your storefront you’d like to polish up, and we’ll see about addressing the request in a future article.
I like what you guys have shown us here about how to modify the site with CSS. However, I'm having trouble finding CSS modifications that work simply by digging through the site code. The navigation bar buttons, for example; where are the images defined? How do you change the width? You mention hiding components you don't need, what about the "featured item bar"? What line needs to be disabled? I tried disabling the ".content-block featured-item" line and it didn't hide the whole box. Also, modifying the text for the body is disabled apart from changing the colors in the site builder, can you change that in CSS too? If you can help with these questions, it would be greatly appreciated. Thanks.
Reply to this
Jeremiah and Corrine,
The elements and classes may vary depending on the template selected. The easiest way to locate the element in question is via the Firebug Firefox plugin's "Inspect Element" feature. It allows you to home in on the exact element in question. It even allows you to manipulate the CSS in real time to experiment with different values.
Reply to this
The two articles have been really helpful so far. I would love a list of what the name of features is. For example, if I want to add a background image to the sidebar, I need to know what the sidebar feature name is (like "header-content" is to header).
Another example, I was to disappear the category images/links on on the main home page (and just use the links on the nav). I dont know what this section is called so I dont know how to disappear it.
Thanks!!
Corinne
Reply to this
YES - I would love to know how to hide the category images/links on the Welcome page, but NOT hide them on the left??
thanks
Reply to this
I agree we should be able to easily hide the bulky category images/links that cover the front page.
Is there a way to have products show on the front page?
I might be missing it but I have searched everywhere I can think of for a very good guide on using Quick Shopping Cart the help information on godaddy seems like it is writen for very limited experienced individuals and was no help for the design side of things.
Also, I was under the impression we could ftp in and if so I certainly haven't found a way.
Reply to this
Products showing on front page - not quite, but by using the free Photo Filer I can provide a slide show of those I want to highlight that open in a new page? Working better than nothing :-) if you want to check it out, www.wenchesatwork.com GoDaddy's Photo Filer helps with the upload of photo's and then put them in the album you want, poof make a slide show link and it's almost photo's ON the home page - but they stay right there ;_0
HdWench
Reply to this
Go to storefront, then preferences and then Home Page preferences and disable the category that says "Show Top Level Categories." I have been trying to get this off my home page for 2 months. Just figured it out today! Hope this helps.
Reply to this
Using the CSS you provided, I added a new 'add to cart' button to my site...however, although I have set the original text to "0", it is still showing--so small that it looks like 3 dots, but upon zooming in closely, you can clearly read it. This text is appearing over the top of my button and ruins the clean appearance of the new button.
How can we remove that text all-together? Or can I change the color to at least match my button?
thx.
Reply to this
We have some unique shipping constraints on our site and so wanted to add a bit of text to the quick shopping cart's "order summary" area to specify this. GoDaddy tech support says this isn't possible but indeed it is with advanced css. I used firebug and some crack css knowledge to create the following - thought it might be helpful to others:
#checkout-right-column:after {
font-weight: bold;
color: red;
content: "Important note about your order";
}
Still working on how to space it out a bit better, I'll re-post if I figure it out.
Cheers,
Lynn
Reply to this
Hi-
I sent an email on Friday and somewhat answered my own question by making the thumbnails larger by choosing another style for the categories. I would still like to increase the font size however the fields are still grayed making it impossible to enlarge. I am still searching for a workaround. My other question has to do with swapping out the picture of the mountain scene in the left hand corner with my logo. Is there a workaround for that too?! My logo is very detailed and needs to be larger-and the mountain scene doesn't quite go:).
Thanks so much,
Heather
Reply to this
Thanks, these are a big help. I have been trying so hard to work CSS into letting me center our banner image to no avail [it seems all of the templates have it on the left or right]. Now I gather I can use Firebug to help me identify that element and now center it. [If you wanted to include tips on how to do that, it would be great ;-)!] Keep up the great articles, they are appreciated!
Reply to this
I'm a reseller/developer with a client who wants to use Quick Shopping Cart to sell 50,000 restaurant supply items. A major drawback of QSC is there is no way to bulk import images. The labor/time involved in manually uploading images is very costly. Is there any way to host the product images on an external server, and modify your product page to call up the URL for a product's image from the server, so we can avoid uploading them to QSC? If not, how far away is a revision to QSC to allow bulk image uploads? The same question applies to category images as well (we have 600+ categories!)
Reply to this
These guides are helpful, however I'm having trouble finding out where exactly all of the images for the site are uploaded/housed on the webhost.
For example, if I want to replace the "add to cart" button, or a background image, where do I upload the images to?
Do I have to specify an exact url for the new images and host them somewhere else, or is there a way to upload them to the local directory where the current images are housed?
Reply to this