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