Website style switcher

  Previous article Next article  

To make a website accessible for visitors with visual impairments I needed a style switcher to change the output of the template. Not only for text and background colors, but also for (layout) images.

  Demo Video

  How to use

To create this feature I used some JavaScript, Smarty and a cookie to store the visitors preference.

In the top of your HTML-template
{$style = $|default:'normal' scope=global}
In the <head> section
{cms_stylesheet} {* <-- default styling *}

{if $style == 'altered'}
   {cms_stylesheet name='Style - Altered'}

In the regular stylesheets you create your website lay-out.
In a separate stylesheet "Style - Altered" you can add style declarations to overwrite the default output of ID's and classes.
Note: Don't attach this stylesheets to any design/template!

Change images
<img src="{uploads_url}/images/image-{$style}.jpg" alt="foo" />

You need two images named i.e. "image-normal.jpg" and "image-altered.jpg"

The button
<p><a id="toggleStyleSwitcher">Toggle Style Switcher</a></p>
The required JavaScript
<script type="text/javascript" src=""></script>

<script type="text/javascript">
  $(document).ready(function() {
    $('#toggleStyleSwitcher').click(function() {
      var StyleSwitcher = $.cookie('style');
      $.cookie('style', (StyleSwitcher == null || StyleSwitcher == 'normal') ? 'altered' : 'normal' , { path: '/', expires: 7 } );
    } );
  } );

  Working example

  • MUSIC4ALL Haren Click the accessibility button [ T | T ] for a demonstration

Buy Me A Coffee

  Comment Form


Click here to open the form


Buy Me A Coffee

CMS Made Simple - Tutorials, Tips and Tricks - CMSMS

Website style switcher

  Article optimized for CMSMS 2.x

  Last tested in: CMSMS 2.2.19
  Last updated: 21-08-2019
  Comments: 5

Buy Me A Coffee


Ads help me to help you! Thanks!

Ads help me to help you! Buy products from these advertisers!