Styling the Storefront with CSS - v4 only

Last Updated: Sep 17, 2014 08:12PM EDT

ProductCart and CSS


Cascading Style Sheets are a powerful tool that can help you efficiently and precisely control the look of your Web pages from a central location. ProductCart v3 and above use of cascading style sheets throughout the storefront. Compared to previous versions of ProductCart, virtually all <FONT> tags where removed and replaced with a number of different classes. Styles were also added to many other elements of the interface.

All styles are stored in a file called pcStorefront.css, which is located in the pc folder. The file has been heavily commented to help you understand how it affects the look and feel of your store.
 

Do I need to know CSS?


No, all ProductCart users can easily apply basic interface changes to their stores (e.g. setting the font family to “Verdana” or the font color to a certain shade of blue), without needing to be proficient in the use of cascading style sheets. Below you will find detailed instructions on how to do so.

Web designers and other advanced users will find that this new version of ProductCart gives them a much larger degree of flexibility in altering the look of their stores, thanks to the use of CSS.

If you are upgrading to ProductCart v3 from a previous version, all of the interface properties that were previously set through the Control Panel's Display Settings page (e.g. the main font type and color) have been turned into CSS styles and are grouped together at the top of pcStorefront.css.


Loading the style sheets

The first step in styling your storefront using CSS is to make sure that the CSS files used by ProductCart are correctly loaded in your store.

The first line of code in header.asp must always be the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

This line is very important: it defines the type of document that you are asking a browser to render and it also tells the browser how to interpret the cascading style sheets used on the store. Unless this statement is present – and correctly positioned at the very top of your header.asp file – the cascading style sheets used by ProductCart will not function properly.

​Next, make sure that pcStorefront.css is loaded in your header.asp file by verifying that the following line of code appears before the closing </head> tag.
<link type="text/css" rel="stylesheet" href="pcStorefront.css" />
 
CSS used by Default Interface
The default version of header.asp in ProductCart v3 loads another CSS document, which styles the default interface. That is, it defines how header.asp and footer.asp will look. The file is called pcHeaderFooter09.css and is loaded with the following statement.
<link type="text/css" rel="stylesheet" href="pcHeaderFooter09.css" />
 
Default vs. Custom interface
Considering whether or not you are using the default version of header.asp and footer.asp:
  • If you are using the default files, you can edit pcHeaderFooter.css, pcHeaderFooter08.css, pcHeaderFooter09.css (depending on the version of ProductCart that you are using) or to change their look
  • If you are not using the default files, you don't need to load that style sheet in your header.asp file.

We recommend that you use a separate CSS document to style your store interface. This way you can keep the styles that affect the shopping cart interface (pc/pcStorefront.css) separate from the graphical interface (which could be used by many other, non-shopping cart pages).
 

pcStorefront.css


Let’s now take a quick look at the top part of the CSS file to understand how basic interface changes can be made to your storefront.

The styles included under “MAIN Styles” are the ones that used to be controlled by the Display Settings area of the ProductCart Control Panel in previous versions of ProductCart. These are the only styles that you will need to edit if you want to change the type of font used in the storefront, its size, its color, etc. Unless you want to, you DO NOT need to change any of the other styles.
#pcMain {
 font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
 font-size: 11px;
 color: #333333;
 text-align: left;
 background-color: #FFFFFF;
 width: 100%;
}
This first section of the CSS file sets most of the store-wide interface properties that most users will need to edit. Any CSS editor will help you easily change the font family, size, color, etc. It is important that you use a CSS editor rather than trying to edit the file manually as CSS is very picky when it comes to interpreting the syntax of the file.
#pcMain a:link, a:visited {
 color: #0066FF;
}
	
#pcMain a:hover {
 color: #0000FF;
 text-decoration: none;
}
This other section of the file sets the color for store links. This is also something that was set using the Control Panel in previous versions of ProductCart.

By using CSS, you now have much more flexibility in setting the appearance of links. For example, you could edit the CSS document to specify a different appearance for all different states that a link can be in.
 

Exploring the CSS styling of page elements


To discover which CSS rule(s) have styled a particular element there are Browser add-ons available for both Firefox and Internet Explorer.

If you use Mozilla Firefox, you can download the Web Developer Add-On to both examine the CSS and (temporarily) edit the CSS - amongst many other functions. You can also save the modified CSS file locally so that you can then upload it to your live site.

The Internet Explorer Developer Toolbar is a free download from Microsoft and has some of the same functionality.


CSS resources

If you are interested in learning more about Cascading Style Sheets, Wikipedia's section on the topic can be a good start. Here are some resources:
Your favorite HTML editor will allow you to properly edit a pcStorefront.css. If you don't own an HTML editor such as Adobe® Dreamweaver® or Microsoft® Expression® Web and are looking for one, here are a couple of inexpensive options:
And one that is free:  

Common edits to pcStorefront.css


Change width and positioning of the store catalog

pcMain is the DIV (container) for all information displayed on any storefront page in your ProductCart-powered store. The edits you make here apply storewide in the storefront, unless their are overridden by another, more specific style.

By default, the content created by ProductCart fills up the area you created for it in your design. This is defined by the following line in the pcMain style definition.
width: 100%;

What if you wanted the content to take up less space (e.g. a fixed number of pixels) and be center-aligned in the area of your design that you created for it? Here is an edited version of the pcMain style that sets the aligns the content centrally, and sets a specific width for it (600 pixels). Here we go:
#pcMain {
 font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
 font-size: 11px;
 color: #333333;
 text-align: left;
 background-color: #FFFFFF;
 width: 600px;
 margin-left: auto;
 margin-right: auto;
}

These are the lines that make the difference:
width: 600px;
 margin-left: auto;
 margin-right: auto;

How other interface elements are styled
  • One Page Checkout
  • "Added to Cart" and "Saving Order..." modal windows: you will need to edit the file ”jquery-ui-1.7.2.custom.css” in the folder ”includes/jquery/themes/redmond”, or change the jQuery theme used  by ProductCart
647e99095133bd6d1ae916f97dc7f92f@productcart.desk-mail.com
https://cdn.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete