public interface CustomSassSkins
compass. The files of interest to a custom skin are in the template/sass directory:
_base.scssbelow), overriding both
You can start from any templated skin but note that, if you want to make pervasive color/font alterations, for example, then you should consider starting from the "Cascade" skin, where variable values often cascade from one another, allowing simple, high-level changes to affect much of the skin.
In other templated skins, Tahoe, Stratus and Obsidian, where more of the variables are customized or overridden, changing a base variable value won't affect the parts that have been overridden.
To create a custom skin based on "Cascade":
As noted at the top of this
discussion, the files you can edit are in the template/sass directory - specifically,
_userSettings.scss for customizing supported variable values and
_userStyles.scss, for overriding existing styles.
You can see the CSS classes
that can be overridden in
You can see the list of available
_skinSettings.scss, grouped and named according to what effects they
have. You can copy the variables you want to override into your
_userSettings.scss file, change their values and run 'compass compile'.
_userSettings.scssand running 'compass compile'
$primary_hue: 120; // generally green
rather than blue
$standard_widget_border_color: #006400; // darkgreen borders for widgets
$standard_button_border_radius: 5px; // give all buttons rounded corners
_userStyles.scss, you can compile them into your skin by running 'compass compile' from the skins/MySkin/template directory. This compiles the various fragments from the template/sass directory (listed in
skin_styles.scss) to produce the skin's stylesheet, at skins/MySkin/skin_styles.css.
After making changes and running 'compass compile', clear your browser cache before refreshing your test page, to ensure the old skin_styles.css isn't cached.
_skinStyles.scssfrom the skin you extended to your skin's template/sass folder, replacing the existing copies. From there, running 'compass compile' will incorporate the latest builtin skin changes into your custom skin, without affecting your existing customizations.