CSS Stylesheets

Overview

Many aspects of the cart's design are controlled using CSS (Cascading Style Sheets). In order to modify stylesheets, you'll need knowledge of CSS. This documentation assumes that you understand CSS enough to make changes to your stylesheets. If you are not familiar with CSS, we recommend picking up a book on it, or researching it on the web.

Having trouble locating the class property for an element in your storefront? You might want to try the Aardvark Firefox Extension. It makes finding the HTML code for a given element on a page easy. It also can quickly show you the class or id property for any element you put your mouse over. You can get the Aardvark extension here:

http://www.karmatics.com/aardvark/

How to Modify a Squirrelcart Stylesheet

Stylesheet files in Squirrelcart end in .css.php, such as style_main.css.php. They are considered "theme files", and need to be modified using a custom theme. Once you have a custom theme enabled, copy the stylesheet(s) you wish to modify from Squirrelcart's master theme folder squirrelcart/themes/squirrelcart/ to your custom theme's folder and alter them in that location.

If you want to create a theme and use the squirrelcart theme as a starting point, we recommend:

Create your custom theme and it's folder
Set that them as your store's default theme or your current theme
Copy style_main.css.php from squirrelcart/themes/squirrelcart to your custom theme folder squirrelcart/themes/YOUR_THEME
Copy style_variant1_gray.css.php from squirrelcart/themes/squirrelcart to your custom theme folder squirrelcart/themes/YOUR_THEME
Copy style_variant2_1024.css.php from squirrelcart/themes/squirrelcart to your custom theme folder squirrelcart/themes/YOUR_THEME

Important: Never modify any stylesheets directly inside the master Squirrelcart theme folder:

squirrelcart/themes/squirrelcart

Doing so will trigger problems when upgrading to a newer version of Squirrelcart.

Main Stylesheet - style_main.css.php

The majority of the CSS in Squirrelcart is controlled by the style_main.css.php stylesheet. See the section above for information on how to modify this file. You'll find comments inside this file explaining what some of the sections control.

If you have a theme named sunrise and change your current theme to it, you are telling Squirrelcart to include a link to the style_main.css.php stylesheet inside the page's <head/> tag:

The style_main.css.php stylesheet for the master squirrelcart theme (squirrelcart/themes/squirrelcart folder) controls just about everything with the exception of color and any CSS used to optimize the page for specific browser resolutions.Those aspects are controlled by theme variants.

Theme Variants

Theme variants allow you to slightly alter the appearance of a theme by selecting a theme variant as your current theme. This is useful for when you want to offer a theme in slightly different variations. For example, you may want to offer a theme in several different colors, designed for different browser widths, etc....

Theme variants are controlled by additional stylesheet files following a special naming convention. When you set your current theme to a variant, you are telling Squirrelcart to include additional stylesheets to further control the appearance of the storefront. Theme variants are optional. You do not have to use them. You can create a theme using a single stylesheet if you prefer to not use theme variants.

Squirrelcart supports creating 2 different types of theme variants.

Primary Theme Variants

Overview

While you can use primary theme variants however you like, they were designed with colors in mind. They can be used to change a theme's colors without changing the rest of it's appearance.

Primary variant stylesheets are named starting with style_variant1, as in style_variant1_blue.css.php. If you have a theme named sunrise, and set your theme to sunrise - blue, your are telling Squirrelcart to include a link to style_main.css.php and another link to the "blue" variant:

Creating a Primary Theme Variant

To create a primary theme variant for a custom theme, just create a stylesheet in your theme's folder with the following naming convention:

style_variant1_color.css.php

where color is set to the name you want to give to that variant. Squirrelcart will automatically add a theme choice based on the name of the file you specify. If you create style_variant1_blue.css.php and style_variant1_green.css.php for a theme named sunrise, the choices for that theme will appear in the theme select drop down field like this:

sunrise

blue

green

Primary Theme Variant Images

Please note: To understand this, you should first read the Theme Images topic in this section before continuiing.

Even when you have a primary theme variant selected, by default Squirrelcart will still look inside the images folder for any custom theme images:

squirrelcart/themes/sunrise/images

It's possible to designate different images for different primary variants. This is useful for when you want your buttons and other images to change color based on the primary theme variant selected. If you wish to enable this, just rename your images folder to correspond to the name of your primary theme variant. Continuuing with the examples used earlier, if you want to use specific images when the theme is set to sunrise - blue, and different images when it's set to sunrise - green, create 2 folders as follows:

squirrelcart/themes/sunrise/images_blue
squirrelcart/themes/sunrise/images_green

With these folders in place, Squirrelcart will automatically look in the folder corresponding to the selected primary variant. If the image is not found there, the one from the master Squirrelcart theme is used instead.

Secondary Theme Variants

Overview

While you can use secondary theme variants however you like, they were designed with optimizing HTML with browser window width in mind. For many years, web designers have been designing pages optimized for a resolution of 800 x 600. With monitors getting bigger and bigger (and cheaper), that trend is leaning more towards optimizing for resolutions of 1024 x 768. This is not set in stone, and comes down to the preference of the designer. Some designers prefer to design a "fluid" layout that expands to fit the width of the browser window regardless of resolution. With these concepts in mind, secondary theme variants can be used to change a theme slightly, to optimize it for these different layouts, without changing the overall apperance of the theme.

Secondary variant stylesheets are named starting with style_variant2, as in style_variant2_800.css.php. For example, suppose you have a theme named sunrise that has primary variants of "blue" and "green" and secondary variants of "800" and "1024". If you set your theme to sunrise - blue - 800, your are telling Squirrelcart to include a link to style_main.css.php, another link to the "blue" primary variant, and another link to the "800" secondary variant:

Creating a Secondary Theme Variant

To create a secondary theme variant for a custom theme, just create a stylesheet in your theme's folder with the following naming convention:

style_variant2_width.css.php

where width is set to a name that describes the layout accomplished by that stylesheet. Squirrelcart will automatically add a theme choice based on the name of the file you specify. If you create style_variant2_800.css.php and style_variant2_1024.css.php for a theme named sunrise that has "blue" and "green" primary variants, the choices for that theme will automatically appear in the theme select drop down field like this:

sunrise

blue 800

blue 1024

green 800

green 1024

Theme Variants for Squirrelcart Master Theme

The default theme for Squirrelcart is squirrelcart , and located in "squirrelcart/themes/squirrelcart". This is a special theme and should never be modified. It includes both primary variants to change the colors of the theme, and secondary variants to optimize the theme for 800 x 600 resolution, 1024x768 resolution, and fluid layouts.