Use any (custom) theme setting or Drupal variable in any of your modules or themes style sheets (CSS). This module replaces all style sheets that contain variables with a rewritten version. Using special tags in the original style sheet you can replace a default value by any (custom) theme setting or Drupal variable. Because these tags are in fact comments the theme will still work without this module, showing the default values.

  • Primarily intended for theme and module maintainers to extend their settings form with configurable CSS values.
  • It can also be used to offer a UI to give some validated control to a webmaster over a site's styling. It can be used for custom style sheets as well.
  • It might simply 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

  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!.


  • Use any Drupal variable by writing /*variable:name*/ instead.
  • New:
    Use it for a module or theme 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).
  • New: Form API elements to make building CSS settings easier. Cool UI widgets and built-in validation of user input, for example a color picker or a slider.
  • 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.


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.

Project Information