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.
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). |
- 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.
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
Project information
- Seeking new maintainer
The current maintainers are looking for new people to take ownership. - Module categories: Content Display
- 79 sites report using this module
- Created by fokkezb on , updated
- Stable releases for this project are covered by the security advisory policy.
Look for the shield icon below.
Releases
Development version: 7.x-2.x-dev updated 29 Oct 2017 at 11:43 UTC
Development version: 7.x-1.x-dev updated 22 Sep 2023 at 08:24 UTC