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.

For the 7.x-2.x branch:

• 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 just put it in the existing dedicated file at ‘sites/all/modules/style_settings/css/custom.css’. This is in fact an ideal way to give a webmaster limited and validated control over a site’s styling through a UI.

• Suffix CSS values you want to be configurable with comments, after the semicolon.

  An example for a module:

  font-size: 80%;

  becomes:

  font-size: 80%; /*variable:FOO_fontsize*/

  An example for a theme:

  font-size: 16px;

  becomes:

  font-size: 16px; /*setting:YOURTHEME_base_fontsize*/

  The found values are used as the default.

• Provide form elements on your settings page to configure module variables or theme settings (see below).

Note

Do not to set the values of several CSS properties simultaneously if targeted with code comments.

Instead of:

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

use:

border-style: solid;

border-width: 2px; /*variable:FOO_borderwidth*/

border-color: Red; /*variable:FOO_bordercolor*/