Contributed modules

Style Switcher

Drupal 7 will no longer be supported after January 5, 2025. Learn more and find resources for Drupal 7 sites

Introduction

The Style Switcher module takes the fuss out of creating themes or building sites with alternate stylesheets. Themer can provide a theme with alternate stylesheets. Site builder can add alternate stylesheets found in the internet right in the admin section. And this module presents all those styles as a block with a list of links. So any site user is able to choose the style of the site he/she prefers.

There are many commonly known JavaScript techniques to switch CSS stylesheets "live", without reloading the page. Some examples of them and relevant JavaScript files can be found here:

This module uses a slightly different and more powerful mechanism. But usability is the same: click on a style label » get the new look of the site.

Works in all major browsers (including Internet Explorer).

Installation/update

Install as you would normally install a contributed Drupal module. See Installing contributed modules for further information.

If you're updating from a previous version don't forget to run update.php. See https://www.drupal.org/node/1782798 for further information.

Configuration

NOTE: This section describes the configuration steps for 2nd branch of the module only, e.g. 7.x-2.x, 7.x-2.0, etc. Older branches (7.x-1.x) and tagged releases are not supported and site builders are encouraged to update their installations.

There are 2 ways to configure the list of styles for switching. And they can be combined.

One way is for site admins:
1. Create stylesheet(s) in site's public directory, for example: in sites/default/files, or anywhere in the internet. Just remember that these locations along with the CSS files must be publicly accessible.

2. Go to Administration » Configuration » User interface » Styleswitcher. There you'll find a module's configuration form and a link to add stylesheets for switching. Add all your styles providing their labels and paths.
Another way is mostly for themers. For site builders it is appropriate only if you use a custom theme that you are able to edit:
1. In your theme's directory or subdirectory create stylesheet(s) for each different style.

Note that each stylesheet when switched is being added to the existing set of other site's stylesheets.

2. In your theme's .info file add a section like the following, replacing labels and paths with yours:
```
; Switching stylesheets
styleswitcher[css][Light Blue] = css/blue.css
styleswitcher[css][All Black] = css/black.css
styleswitcher[default] = All Black
```
where "All Black" is the label of the style, and css/black.css is the location of the stylesheet file, relative to theme's root. A line with Default is optional - it is for new site visitors. If it is not set then no of alternatives will be visible until user explicitly chooses one.

NOTE: Do not specify in this section any of other existing CSS loaded by Drupal core, modules or your theme. They are being loaded unconditionally. If you want to set some of your theme's stylesheets for switching then move them from "stylesheets" section of .info file to the "styleswitcher" section.

The next steps are for both of previous ways:

3. In the Styleswitcher admin section you can see tabs for each of site's enabled theme. There you can reorganize how style links will be displayed to users: you can reorder them, enable/disable some of them and choose another default style for each theme. This means that each of your site's theme can have its own set of styles for switching.

Note that styles added in admin form will be available for all themes, but those provided in theme's .info will only be available for that theme and no other.

4. Finally, go to Administration » Structure » Blocks, find "Style Switcher" block, place it wherever you want and press "Save". You can also configure the block however you like.

Note that this block is the only way to provide a style switching for users. So if you need this functionality in multiple themes then you should configure the block to be displayed in appropriate themes.

That's it. The block will present links for each of your styles to you and your users.

Another use case

There is another situation where the Style Switcher will fit - to override styles from contrib theme: Let's say you are a site builder/administrator and for your site you picked some nice contrib theme. But this theme does not cover some specific blocks or page elements or you just want to make a special styling of some part of the site.

NOTE: Do not overwrite any of files from contrib modules/themes or from the Drupal core. See https://www.drupal.org/node/2324377 for further information.

In this case use the Style Switcher and configure it the following way:

1. Follow the above configuration steps for site admins: create one custom stylesheet, place it somewhere (but not in the contrib theme!) and add the style for switching in admin form.

2. In Style Switcher admin section go to the tab labeled by the name of your contrib theme (that what you want to add your styling to). There check your newly added style as a default and disable the default "Default" one (provided by Style Switcher) and submit the form.

Now the pages of this theme will include your custom stylesheet.

3. As a P.S.: The Style Switcher block won't be displayed on pages in that theme even if you configured it to. That is because only one style is enabled.