allow user to set some css settings through UI

Question

The user wants to be able to choose some sizes and colors for the look of the site. These are css rules. I have a vague vision how this could be done by a module, but maybe there is already something like this?

What I need is to have some form with fields as combo boxes, allowing the user to choose from several values. E.g. allow him to choose from {red, blue, yellow} for the "Background of the News title", which happens to be .news-header-background class.

After he saves, the module would re-create a user.css file which is loaded as the last file in the theme (so it overrides my theme settings).

So the tasks for each role are as follows:

• the user fills the fields on a form choosing from pre-defined values
• the administrator pre-defines these values and also assigns a css selectors to each field in the form (directly in files, no need for GUI for this)
• the module re-creates the css file

One important point is that the interface exposed to the user must be dead simple. No technical jargon, no options, only text that he fully understands, like "Background color of the News title". Second point is that the values he can choose are presented as combo boxes, so they are limited. Third point is that the module should enable validation hook for the values he enters (or be written so that it's easy to hack and validate).

Answer 1

Since the solution I reference in my first answer was created, I have learned new things. If I were to do the same things again, I would base it on a similar principle, but I would use Panels per pane "CSS Settings", to add CSS classes instead. See: How does one theme a panel (or add a style)

This should allow for much broader customization of content. A problem with this approach is that Panels UI is hardly "customer friendly". I would solve that by a custom form, on a dedicated admin page, that simply loads the pane settings from the database, overwrites them, and saves them back.

Answer 2

Coming a bit late to the party but from project page of the Style (CSS) Settings module:

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

Apart from the form API elements offered by the module, to have predefined field values you can use the Drupal core form API fields select or checkboxes.

For a site's custom CSS, rename the existing dedicated file 'sites/all/modules/style_settings/css/example.custom.css' to 'custom.css' (at time of writing use the dev version). This file gets scanned for CSS values wrapped in comments and will be rewritten if so. In any case, it gets loaded as last stylesheet so you can be sure your custom CSS will not get overridden by module or theme CSS. Neither it will be overwritten when you upgrade the module.

You still have to define the form yourself by writing some code but the module takes care of rewriting the desired values in your CSS. Furthermore it offers form API elements especially for CSS property values (including validation) so that task is made as easy as possible.

The module has a demo and documentation.

Answer 3

When we did something similar in Drupal 6, we solved it by adding a textfield with a few selectable colors in it, "red", "green", and so on. In the css, we then had rules like

.red { color: red; }
.green { color: green; }

For displaying this node, we then used Views, together with Semantic Views, to take the field value, and put it into the markup. <p class="[field_color]"></p> becomes

 <p class="red"></p>

Since the data is in a field attached to a node, validation is simple, and it's easy to understand for the user. That may be a problem in your case, depending on what exactly the customer wants to control.