Construct Framework - Style Sheet Switcher

Style Sheet Switcher

Last Updated on Saturday, 28 July 2012 01:17

The style sheet switcher has deep roots firmly planted in a November 2, 2001 A List Apart article by Paul Sowden, entitled Alternative Style: Working With Alternate Style Sheets. In the article, Mr. Sowden demonstrates a great technique for progressively enhancing a website through the use of a JavaScript style sheet switcher and alternate style sheets. We have implemented Mr. Sowden's technique in our framework to demonstrate one of the many possibilities it presents. The implementation of the JavaScipt and CSS can be examined in /templates/construct/elements/logic.php,in the upper portion of the Head Elements section of the file. The code is:

// Style sheet switcher
if ($enableSwitcher) {
	$doc->addCustomTag('<link rel="alternate stylesheet" href="'.$template.'/css/diagnostic.css" type="text/css" media="screen" title="diagnostic" />');
	$doc->addCustomTag('<link rel="alternate stylesheet" href="'.$template.'/css/wireframe.css" type="text/css" media="screen" title="wireframe" />');
	$doc->addScript($template.'/js/styleswitch.js');
}

You can add your own alternate style sheets following this format. As the logic.php file will be overwritten during a framework upgrade, it is recommended to add your alternate style sheets to a layout override.

The hyperlinks, that are clicked to switch the style sheets, can be found in /templates/construct/index.php

<ul id="style-switch">
	<li><a href="#" onclick="setActiveStyleSheet('wireframe'); return false;" title="Wireframe">Wireframe</a></li>
	<li><a href="#" onclick="setActiveStyleSheet('diagnostic'); return false;" title="Diagnostic">Diagnostic Mode</a></li>
	<li><a href="#" onclick="setActiveStyleSheet(''); return false;" title="Normal">Normal Mode</a></li>
</ul>

You can add your own links by creating an extended layout override, following this same format.

You can use this same technique to create a CSS based font resizer. See Power To The People: Relative Font Sizes by Bojan Mihelac

< Prev

Search