Combining stylesheets to remove variants

[Jamie]

Warning: This topic assumes you have a good understanding of CSS. If you don't, you may find this confusing!

As of version 3, Squirrelcart supports stylesheet variant files. If you are new to this, read through the "Customizing > Stylesheets" section of our documentation.

By default, each theme setting uses 3 stylesheet files - for example:

style_main.css.php
style_variant1_gray.css.php
style_variant2_1024.css.php

Each of these files is used to control the appearance of your store. If you have created a custom theme and you are using 3 files but do not wish to allow the customer to choose theme variants, you can simplify your CSS by combining all of these 3 into a single file as follows. This should only be done with files inside your custom theme folder (squirrelcart/themes/YOUR_THEME) and NOT with the default squirrelcart theme folder (squirrelcart/themes/squirrelcart):

1. Open style_main.css.php in an editor
2. Scroll to the bottom
3. Open style_variant1_gray.css.php in an editor
4. Scroll to the top
5. Select all lines EXCEPT for this line at the very top:
   

   <?php include '../../stylesheet_header.php' ?>

6. Copy
7. Switch to style_main.css.php
8. Paste the contents of your clipboard at the bottom
9. Close style_variant1_gray.css.php
10. Open style_variant2_1024.css.php
11. Select all lines EXCEPT for this line at the very top:
    

    <?php include '../../stylesheet_header.php' ?>

12. Copy
13. Switch to style_main.css.php
14. Paste the contents of your clipboard at the bottom
15. Close style_variant2_1024.css.php
16. Save style_main.css.php
    
    You now have all the CSS in one file - style_main.css.php.
17. Delete style_variant1_gray.css.php and style_variant2_1024.css.php
18. Because theses 2 files are gone, you'll need to go into the control panel and change your default theme to something else (any "squirrelcart" theme variant), and then back to your custom theme

Now, if you want to simplify your CSS a bit more, you can look through the code you pasted to find redundancies in CSS selectors. For example, at the top of style_main.css.php you normally have something like this:

body {
    margin: 0;
}

Then, in style_variant1_gray.css.php you have:

body {
    background-color: #dfdfdf;
}

So, you can remove the 2nd declaration of the body CSS selector, and merge it's attributes with the first:

body {
    margin: 0;
    background-color: #dfdfdf;
}

[dgibson_88]

Coming from version 2.x to 3.x I need some clarification. In 2.x all I had to do to customize my site was to create a new theme folder and put the changed files in there, and I only put 1 css file in the custom theme folder. So, in 3.x you need at least 3 css files in your customer folder? I tried this and for some reason only one of the variants was available in the control panel to select. So on my site, I'm not really changing all that much in the css, and do not want a theme variant, so would the steps in this post to copy all css into one file be what I need to do?

[Jamie]

So, in 3.x you need at least 3 css files in your customer folder?

Technically, no. The only required stylesheet is "style_main.css.php". However, the default built in "Squirrelcart" theme is setup to make use of theme variants. Because of this, that theme requires at least 3 stylesheets to appear properly - the main stylesheet, and one of each variant. Read this, which explains how all that works:
http://squirrelcart.com/help/?CSS_Stylesheets.html

I tried this and for some reason only one of the variants was available in the control panel to select.

If you put style_main.css.php, 1 "variant1" stylesheet, and 1 "variant2" stylesheet in your custom theme folder and no others, it is going to give you a single choice. The choices come when you have more than 1 of each variant type. If you don't want choices for your customers, then you can follow the instructions in this thread if you prefer to use a single stylesheet instead of 3.