Glossary Item Box

Squirrelcart v6.1.0

CSS Stylesheets

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:

  1. Navigate to the store page you wish to work with
  2. View the source code in your browser.
    - In Firefox and Google Chrome, right click on the page and choose "View Page Source"
    - In Internet Explorer, right click on the page and choose "View Source"
  3. Towards the top of the page, find the <head/> tag.
  4. In the head tag, look for a <link/> tag linking to style_main.css.php: 
  5. To view the CSS associated with that URL, copy the URL to your clipboard and paste it into your browser's address bar:
  6. To improve load times, Squirrelcart will automatically strip any comments and extra white space from CSS which can make it more difficult to inspect. To view the CSS with white spacing and comments, just change the value of the  no_comments variable at the end of the URL from 1 to 0, and comments and white space will appear.
  7. To improve load times, Squirrelcart uses PHP to insert CSS from different files so they all appear using this one URL. If you need to know which file certain CSS is actually inside, look for the comments that appear immediately above each file's CSS, as in:
    /* 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

  1. You will need to be using a custom theme to extend the buit-in CSS. If you have not already created one, follow the instructions in the Creating a Custom Theme topic.
  2. For this approach to work, you cannot have a stylesheet file named style_main.css.php inside your custom theme folder. If one is present, rename or delete it.
  3. Create an empty text file named style_custom.css.php and upload it to your custom theme folder, as in squirrelcart/themes/YOUR_THEME/style_custom.css.php
  4. Add any CSS you like to this file. It will automatically be included after the built-in CSS when using this theme. If you wish to alter the CSS for the store, just add CSS selectors to override ones already defined in the 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.