Glossary Item Box
Overview
Many aspects of the cart's design are controlled by 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 Firebug browser extension for Firefox. It makes finding the HTML code for a given element on a page easy. See here for more info: http://getfirebug.com |
Inspecting CSS In Your Browser
You may need to view the CSS used by Squirrelcart in order to troubleshoot a layout issue, or to determine what you need to modify to change the appearance of something in the storefront. Here is how to view the CSS currently being used in the store:
/* Stylesheet file: style_main.css.php */All the CSS below this comment and above any following similar "/* Stylesheet file: ..." comments is defined in the style_main.css.php file.
Working With Squirrelcart's CSS
![]() |
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. |
Extend Built-In CSS
The built-in master Squirrelcart theme has several stylesheets that are used to control various aspects of the store's appearance. The main stylesheet is named style_main.css.php. If you view the source HTML in your browser for the storefront page, this is the only stylesheet reference you will see inside the <head/> tag. Other stylesheets are included via PHP so only a single CSS reference is needed, improving load times. When you extend the built-in CSS, you use the built-in CSS stylesheets, and add your own CSS last via a single style_custom.css.php stylesheet.
Why do we use this approach?
As we release new versions of Squirrelcart, we sometimes need to add new CSS and edit existing CSS. With this approach, if you upgrade Squirrelcart you will automatically be getting the CSS changes corresponding to the version you upgrade to. This makes upgrading much easier because you don't have to make these changes yourself.
How to Extend Built-In CSS
INI Settings
Some themes (like the master Squirrelcart theme) use INI files to define certain default values for CSS properties in some stylesheets. For example, the style_main.css.php stylesheet may have CSS like this:
html{
background: <?php print $ini['bodyBgColor']?>;
height: 100%;
}
The <?php print $ini['bodyBgColor'] ?> text is used to insert a HTML color code for the background color, that is definied in one of Squirrelcart's INI config files, or in custom style settings definted for the theme. If you are modifying CSS and wish to specify a different value, you can replace the <?php ?> with standard CSS values.
INI files are stored in the theme's config folder (squirrelcart/themes/squirrelcart/config) for example. They should not be modified.
© 2001-2017 Lighthouse Development. All Rights Reserved.