Advertising sustains the DA. Ads are hidden for members. Join today

Contributed modules documentation

Style (CSS) Settings

This documentation describes the latest stable D7 version of the Style (CSS) Settings module.

Allows any module or theme to have their CSS attributes configurable from the UI just by wrapping default CSS values in a code comment. These are then substituted in a separate rewritten CSS file by Drupal variables or theme settings. The CSS is functional even if this module is not installed.

  • The Style (CSS) Settings module is primarily intended for theme and module maintainers.
  • It can also be used for customisations by anyone with basic coding skills, for example to provide a patch for a project that could use some CSS to be configurable or to offer a UI to give some validated control to a webmaster over a site's styling.
  • It might simply be needed because a theme or module declares it as a (soft-)dependency.

All is cached so the performance impact is neglectable. The rewritten CSS files are included in the CSS aggregation mechanism.

About the Style Settings cache

Unnecessary rewriting of CSS files is avoided:

  • by monitoring only CSS files of themes and modules that declare style_settings as a (soft-) dependency in their .info file
  • through a two step process for each monitored CSS file (see below).

The first step generates a unique checksum key that will be used by the second step but only if the css/js cache has been flushed.

The second step rewrites the CSS file using the checksum key if it contains inline setting or variable code comments AND:
- theme settings have changed
OR
- variables have changed
OR
- the original CSS file has changed.

Performance

A test ran on a dual core Pentium Ubuntu machine with 3 projects using Style Settings covering 14 medium size stylesheets that contain several CSS Drupal variables each has shown the following:

20 milliseconds added page load time (cached) (about 1.5 ms per stylesheet = 0.0015 sec).

After cache clear (style settings form submit):
1.5 seconds to rewrite 14 new stylesheets.

Code example

Code example for developers to add UI configurable CSS to their project using the Style Settings module.

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

[#2543652] If you want to Do It Yourself, read on.

How to deal with CSS preprocessors like Sass and LESS?

This page describes the latest dev D7 version of the Style (CSS) Settings module.

How to provide form elements on your settings page?

Add a conditional

Guide maintainers

lolandese's picture