Styling modal windows (and more) by changing jQuery theme

This article applies to ProductCart v4 and above.

ProductCart uses “modal windows” for many interface elements in the storefront. For example: the message that confirms that a product has been added to the cart, the message that reminds customers of items previously added to the cart (during a new visit to the store), messages such as “Saving Order…”, and others.

The default color scheme uses shades of blue. What if that does not work well with your Web site's design? See below.

Thanks to Clay Johnston @ Sprung for prompting us to write this article (and providing much of the content).

ProductCart by default uses the “Redmond” jQuery Theme.

This is just one of many themes that are available for jQuery. To view the themes:

• Load the theme gallery by visit http://jqueryui.com/themeroller/
• In the left-side navigation, select “Gallery”
• You will find the Redmond theme there together with many others

To switch to a different theme:

• Load the theme gallery by visit http://jqueryui.com/themeroller/
• In the left-side navigation, select “Gallery”
• Locate the theme that best matches to your store's design. For example, if your store uses shades of brown, the “Humanity” theme might work well for you.

• You can even create your own by using the “Roll your Own” option
• When you are ready, click on “Download”. You will be taken to the “Build Your Download” page.
• Select the legacy version of jQuery (1.7.3 - Legacy release, for jQuery 1.3.2)
• Click on “Download” and save the file to your desktop.
• Unzip it and locate the CSS folder. You will find a folder with the name of the theme you just downloaded (“humanity” in our example)
• Upload the entire folder using your favorite FTP software to the “productcart/includes/jquery/themes” folder on your Web server, where “productcart” is the name of the folder that contains your ProductCart files (typically renamed to something like “store”, “shop”, etc.).
• Now locate and download the file ”productcart/pc/inc_jquery.asp” and look for the line (NOTE: the version of jQuery mentioned in the link may change over time):

  <link type="text/css" href="../includes/jquery/themes/redmond/jquery-ui-1.7.2.custom.css" rel="stylesheet" />

• Replace that line with the name of the directory and css file. In this example:

  <link type="text/css" href="../includes/jquery/themes/humanity/jquery-ui-1.7.3.custom.css" rel="stylesheet" />

• You're done.

Some customers noted that the fonts might be a bit too large in the default jQuery themes. You can get around the problem by forcing a smaller font size by adding a new font style definition to pcStorefront.css, such as the following:

.ui-widget {font-size: .9em !important;}

For example, here is the “Added to Cart” confirmation message shown on one of the official ProductCart demo stores, with the theme that has been switched to “humanity” and the font-size set as 0.9em as described above.

• Other How To articles
• Using CSS in ProductCart
• Styling One Page Checkout