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

3 Answers 3


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.

  • If this assumes that the user-defined custom css will apply to content in panels, then it is not sufficient because much of the site content is in simple nodes and not panels (my example was about block title, but it applies as well to tables, font colors etc in nodes without panels)
    – camcam
    Jan 3, 2012 at 15:06
  • Before I comment further, I want to understand what you mean by "in simple nodes and not panels". To me there is not really a distinction, as Panels renders my nodes.
    – Letharion
    Jan 3, 2012 at 15:24
  • We use mini-Panels and only for sidebars and some landing pages, not for main content. I know it is possible to use panels everywhere, but currently the site does not need to wrap nodes in panels in main content area.
    – camcam
    Jan 3, 2012 at 16:19
  • Besides, I don't understand how this would work, because you don't specify css in panels UI, only html wrapper classes, and those classes need rules in a css file, so if the user wants to change e.g. color, he needs a somehow to change the css file anyway.
    – camcam
    Jan 3, 2012 at 16:27
  • Oh wait, I think I am getting the idea.. instead of having class .header-style {color: red;} it could be .red-header-style { color: red;} so no need to change css file, only apply classes to tags.. ok, but Panels UI is too complicated as end user UI, so it would need some kind of custom simple form anyway to enable the user to pick these styles in a very simple way..
    – camcam
    Jan 3, 2012 at 16:36

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

enter image description here

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.

  • Don't be afraid. Coming late is not bad, it brings some freshness to old questions, and as long as you are really answering, and not repeating things already said, it is most welcome here.
    – Mołot
    Aug 18, 2015 at 19:47

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.

  • This solution sounds promising. So just create a node(s) with as many fields as css rules (well, reasonably, to cover everything that is needed). Then use hook_validate and here besides the validation, create the css and save to disk. Looks not very complicated unless I am missing something.. I have to test it.
    – camcam
    Jan 3, 2012 at 15:03
  • While it will probably work well, I'm not entirely sure why you need to generate css on the fly? Since you specifically have a limited number of options, why not just create the css once, and be done with it?
    – Letharion
    Jan 3, 2012 at 15:21
  • One day the user wants red header, the other day green. Suppose currently the h2 style for nodes is in style.css. If I move this style to user.css and generate it "on the fly" as often as he changes the rule via above solution, then he will see green header at once after his modifications. So user.css must be re-generated every time.. that's how I imagine this.
    – camcam
    Jan 3, 2012 at 16:11
  • Why don't you just always have .green{} and .red{} defined? Then all you need to do is swap the <h2 class="[color]">. The only reason I can see for "on the fly" generation, is to allow completely arbitrary settings, which isn't the case here.
    – Letharion
    Jan 3, 2012 at 16:13
  • But in this case, how do you "swap"? The html is in .tpl file, so do you mean changing the .tpl file, or using some Javascript for this? you mentioned Semantic Views - perhaps this allows to change the class dynamically, but that's only for Views.
    – camcam
    Jan 3, 2012 at 16:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.