Website style switcher

  Previous article Next article  

Website style switcher

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.2.5
  Last updated: 22-11-2017
  Comments: 0
  http://cms.ms/LUky

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 = $smarty.cookies.style|default:'normal' scope=global}
In the <head> section
{cms_stylesheet} {* <-- default styling *}

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

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="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></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 } );
      location.reload();
    } );
  } );
</script>


  Working example

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




CMS Made Simple 2.2.5 - Tutorials, tips and tricks - CMSMS 2.2.5

Website style switcher

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.2.5
  Last updated: 22-11-2017
  Comments: 0
  http://cms.ms/LUky