SoftSlate Commerce
Home » Documentation » HTML Documentation

CSS Themes (default-xhtml layout only)

If you're comfortable with CSS (Cascading Stylesheets), you'll want to know how to work with CSS Themes for your store. A CSS Theme in SoftSlate Commerce simply corresponds to a subdirectory under the /css directory. By default, SoftSlate Commerce uses the "base" CSS Theme. This simply means that it includes the /css/base/base.css stylesheet for all pages of the store. Each of the other themes that are distributed are extensions of the "base" theme. For example, if you select the "orangecrush" theme, the system will include the /css/base/base.css stylesheet first, followed by the /css/orangecrush/orangecrush.css stylesheet. The styles defined in orangecrush.css will extend and override the ones defined in base.css.


The /WEB-INF/layouts/default-xhtml/core/htmlHead.jsp file is what includes each of the CSS stylesheets on all the store's pages. There's nothing wrong with creating a custom version of that file in the /WEB-INF/layouts/default-xhtml/custom/core directory and modifying or hard coding which stylesheets are used, if you need to make customizations.

Selecting a CSS Theme is done in the Adminstrator by navigating to the Look and Feel Settings -> Themes screen and selecting a theme. It is also possible to customize any of the built-in themes, or to create your own theme. To add or extend custom styles to any of the themes, simply do so in the /css/custom/custom.css file. That file will never be overwritten by installing a future upgrade, so your customizations will be safe. The system includes the custom.css stylesheet after both the base stylesheet and any theme you selected in the Administrator. Because of how CSS works, this means your customizations will override the styles defined before it.

Creating your own CSS theme altogether is simply a matter of creating a new stylesheet and placing it in a directory of the same name, under the /css directory. For example, to create a theme named "dynamite", you would create a subdirectory under /css named dynamite, and within that subdirectory, you'd place your stylesheet, giving the file the name dynamite.css. To make your theme active, you enter the name of your new theme in the "Other" field on the Look and Feel Settings -> Themes screen.

It is hoped that 90% of the customizations you need to make to the design of your store can take place by customizing one of the built in CSS Themes. Sometimes, however, you just have to get into the templates and manipulate the HTML code that the store produces. Fortunately, as the next chapter explains, SoftSlate Commerce provides a easy way to customize its templates.

Copyright © 2009-2017 SoftSlate, LLC. All Rights Reserved.

Powered by SoftSlate Commerce

Foraker Design