This project can be taken over under the Open Ownership Pledge. Solve the child issue of #2938720: Seeking new maintainer (D7 to D8 conversion).

Allows any module or theme to have their CSS attributes configurable from the UI
just by suffixing default CSS values (plus unit) with a code comment in the css, scss or less file (7.x-2.0 version). 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).

Demo

Unfortunatelly, due to a bug in SimplyTest.me the demo does not work out of the box anymore. Workaround:

Launch the sandbox through the green button above
log in (admin:admin)
enable the Style Settings demo module (../admin/modules)
navigate to ../node#overlay=admin/config/system/FOO

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. All is cached so the performance impact is neglectable. The rewritten CSS files
are included in Drupal's CSS aggregation mechanism.

A form containing style settings simply invokes _drupal_flush_css_js() in its submit handler to regenerated stylesheets instantly on form save. The module contains a demo with working code that can be followed as an example for your own module or theme.

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 to write a patch for your project..

Modules and themes that use Style (CSS) Settings.

How to add configurable CSS to your module or theme?

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.

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 the demo code provided with the module itself).

Features

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.

Upgrade

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

https://github.com/backdrop-contrib/style_settings

Style (CSS) Settings

Issues

D8Needs reviewCode Created almost 9 years ago

D8
Needs review
Code
Created almost 9 years ago