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.
![[Note]](images/note.png) | Note |
|---|---|
The |
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.