Example of css options on theme settings page

The CSS options module enables theme developers to easily expose some options around the included CSS within the site via the theme settings form.

This module does the housekeeping for managing the inclusion of conditional CSS within the site so the theme developer can focus on design.

Instructions

  1. download and enable the css_options module
  2. Within your theme create a css_options directory.
  3. within your theme's css_options directory create a directory for each option you want exposed to the user with the following naming convention. "YOUR OPTION.option". The end user will see a select choice with "YOUR OPTION" as its title.
  4. Within each option directory add one css file that represents the css corresponding to the choice. Name your file with the standard '.css' extension.

Example

If I create the following directory structure in my theme

  • css_options
    • Font Family.option
      • Sans-Serif (Helvitica, Arial).css
      • Serif (Georgia, Times).css

The css_options module will expose a "Font Family" option on the theme settings page with the following choices;

  • No Additional Style
  • Sans-Serif (Helvetica, Arial)
  • Serif (Georgia, Times)

If the end user chooses any option except for "No Additional Style" for that option the corresponding css file will be included in the delivered CSS.

Please see the included css_options directory for further examples. You can start by copying this directory into your theme and then visiting the theme settings page 'admin/appearance/settings/YOURTHEME'

This module is maintained by the friendly primates at FunnyMonkey.

Project Information

Downloads