Configure CSS values from the UI for any module, theme or custom CSS just by wrapping CSS values in a code comment. The CSS is functional even without the module being installed (soft-dependency). Form API elements are provided to have a color picker or a slider (e.g. for opacity).
An HTML5 slider
The module generates rewritten versions for all style sheets that contain code comments with modified CSS values according to what is set in the Drupal variable values. On the site pages the rewritten versions will be loaded instead of the original CSS. A form containing style settings simply invokes _drupal_flush_css_js() in its submit handler to regenerated stylesheets instantly on form save.

  • Primarily intended for theme and module maintainers to extend their settings form with configurable CSS values.
  • Use it for custom style sheets to give some validated control to a webmaster over a site's styling through a UI.
  • It might be needed because a theme or module declares it as a (soft-)dependency.

#2543652: We can add Style (CSS) Settings to your module or theme. Just ask us for a patch.

Modules and themes that use Style (CSS) Settings.

Example usage

Take a look at how things are done in the module's real live working demo code at 'sites/all/modules/style_settings/demo', which includes also an example of a 'preview area' to make style changes visible in a settings form itself.

  1. Add a custom theme setting like background_color to your theme.
  2. In your stylesheet, change this:
      background: red;

    to something like this:
      background: /*setting:background_color*/red/*setting*/;
  3. Go down your theme's settings page (admin/build/themes/settings/theme) and set the background color setting you just created, for example to green.
  4. Install this module and enjoy!.

Themes that use a CSS preprocessor (Sass, LESS) are invited to use the 7.x-2.x version. There are some differences in usage. Follow the instructions of the included README.txt file. See for more background info: #2562607: Provide a solution when CSS preprocessors are used (SASS, LESS).


  • Use any Drupal variable by writing /*variable:name*/ instead.
  • Use it for a module or theme optionally by declaring 'soft_dependencies[] = style_settings' in the .info file.
  • Themes and modules will still work without the module since the default value is within the comments.
  • If a theme or module setting is not found or set, the module will show the default (specified within the comments).
  • Form API elements to make building CSS settings easier. UI widgets, for example a color picker or a slider, and built-in validation of user input.
  • Automatic recognition of background images.
    Because comments cannot reside within url(...), you need to add the comments around it. The module will automatically add url(...), and base path if needed.
  • Caching of rewritten style sheets by using a checksum derived from the theme settings array (so changes are visible immediately).
  • Relative paths inside url(...) are automatically prefixed by the base path of the original style sheet.
  • Drupal variables (also theme settings are stored as variables) won't get overridden when upgrading. Your settings are save and included in a DB backup.
  • Variables can be exported and put under version control e.g. using Features with Strongarm.
  • Variables can be initialized with specific values in an install hook e.g. in a custom site deployment module or distro.
  • Variables allow for dynamically created CSS values e.g.:
    variable_set('FOO_border', 2 * $padding . 'px');.
  • Variables can be altered by other modules e.g. with Rules.


If you upgrade from the 7.x-1.0 version you should add to the '.info' file of your active theme:

soft_dependencies[] = style_settings

More info in the UPGRADE.txt file.

Become a co-maintainer

Solve a marked active and non assigned code related issue.

Backdrop CMS

Project Information