How to add configurable CSS to your module, theme or site?

#2543652: We can add Style (CSS) Settings to your module or theme. Just ask us to write a patch for your project.. If you want to Do It Yourself, read on.

1. • For modules and themes add to your '.info' file:
       soft_dependencies[] = style_settings
     OR if you want to make the Style (CSS) Settings module required:
       dependencies[] = style_settings
   • For a site's custom CSS, rename the existing dedicated file 'sites/all/modules/style_settings/css/example.custom.css' to 'custom.css'. This file gets scanned for CSS values wrapped in comments and will be rewritten if so. In any case, it gets loaded as last stylesheet so you can be sure your custom CSS will not get overridden by module or theme CSS. Neither it will be overwritten when you upgrade the module.
2. Wrap CSS values you want to be configurable in comments, including its unit
   (px, em, %) if present.
   An example for a module:
     font-size: 80%;
   becomes:
     font-size: /*variable:YOURMODULE_caption_fontsize*/80%/*variable*/;
   An example for a theme:
     font-size: 16px;
   becomes:
     font-size: /*setting:YOURTHEME_base_fontsize*/16px/*setting*/;
   The wrapped values are used as the default. Because comments cannot reside within url(...), you need to add the comments around it.
3. Provide form elements on your settings page to configure module variables or theme settings (see next page).

Note 1

No code comments are allowed between a CSS value and its unit.

Something like:
  border-width: /*variable:FOO_thickness*/2/*variable*/px;
results in invalid CSS and is therefore ignored by browsers.
Use instead:
  border-width: /*variable:FOO_thickness*/2px/*variable*/;

The Style Settings form element 'Number' (see next page) takes care of putting a
measurement unit behind the value when storing it in a variable.

Note 2

For readability it is recommended not to set the values of several CSS
properties simultaneously if it contains inline code comments.

Instead of:
border: solid /*variable:FOO_borderwidth*/2px/*variable*/ /*variable:FOO_bordercolor*/Red/*variable*/;
use:

  border-style: solid;
  border-width: /*variable:FOO_borderwidth*/2px/*variable*/;
  border-color: /*variable:FOO_bordercolor*/Red/*variable*/;

• #2543652: We can add Style (CSS) Settings to your module or theme. Just ask us to write a patch for your project..
• How to add configurable CSS to your module, theme or site?
• How to deal with CSS preprocessors like Sass and LESS?
• How to provide form elements on your settings page?
• Code example