Website style switcher

  Previous article Next article  

Website style switcher

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.2.3.1
  Last updated: 20-01-2017
  Comments: 3

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>

A2 Webhosting CMS Made Simple

  Working example

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


A2 Webhosting CMS Made Simple

  Comments

  Click here to leave a comment






This is a captcha-picture. It is used to prevent mass-access by robots. (see: www.captcha.net)
  « Enter the CAPTCHA code (lower case)

Your IP address will be stored on submit. I reserve the right to change or delete your response without notice!
In case of abuse your IP address will be blocked!


Can I have your attention for a moment?

Did this tutorial help you solving a problem at your (clients) website and it saved you many hours of work? Great!!
Consider buying Rolf a cup of coffee in return! [ Click here ]


  3 Comments

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

Website style switcher

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.2.3.1
  Last updated: 20-01-2017
  Comments: 3

A2 Webhosting CMS Made Simple