Website style switcher
Previous article Next articleTo 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}
{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>
<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
Comment Form
ReviewManager
ReviewManager
Website style switcher
Article optimized for CMSMS 2.x
Author: RolfLast tested in: CMSMS 2.2.19
Last updated: 21-08-2019
Comments: 5
http://cms.ms/LUky
