MENU

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 = $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


Advertisement


Ads help me to help you! Thanks!

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


  Comment Form






Note: 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!

GDPR privacy disclaimer
This form will send me your email address and your IP address.
If you don't want that, don't use this form!


  3 Comments

CMS Made Simple - Tutorials, tips and tricks - CMSMS

Website style switcher

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.2.12
  Last updated: 21-08-2019
  Comments: 3
  http://cms.ms/LUky

Advertisement


Ads help me to help you! Thanks!

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

Advertisement


Ads help me to help you! Thanks!

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