Construct Framework - Creating a Custom Style Sheet Switcher

Creating a Custom Style Sheet Switcher

Last Updated on Saturday, 28 July 2012 01:16

Creating your own custom style sheet switcher can be accomplished through the use of an extended layout override. This will allow you to upgrade Construct without fear of loosing your customizations.

To create your custom style sheet switcher, you will need three main ingredients:

The styleswitch.js JavaScript, which is already included with Construct.
The alternate style sheets that you wish to switch between.
The hyperlinks that will trigger the style sheet switching.

The first step is to copy and modify the style sheet switcher code from /templates/je-construct-xxx/elements/logic.php and paste it into your extended layout override at /templates/je-construct-xxx/layouts/index.php, just before the close of the first PHP statement

In the example below, we are adding styleswitch.js and the three style sheets that we will be switching between, named red, green, and blue.

<?php defined('_JEXEC') or die;
/**
* @package		Template Framework for Joomla! 1.6
* @author		Joomla Engineering http://joomlaengineering.com
* @copyright	Copyright (C) 2010, 2011 Matt Thomas | Joomla Engineering. All rights reserved.
* @license		GNU/GPL v2 or later http://www.gnu.org/licenses/gpl-2.0.html
*/
// Style sheet switcher
$doc->addCustomTag('<link rel="alternate stylesheet" href="'.$template.'/css/red.css" type="text/css" media="screen" title="red" />');
$doc->addCustomTag('<link rel="alternate stylesheet" href="'.$template.'/css/green.css" type="text/css" media="screen" title="green" />');
$doc->addCustomTag('<link rel="alternate stylesheet" href="'.$template.'/css/blue.css" type="text/css" media="screen" title="blue" />');
$doc->addScript($template.'/js/styleswitch.js');
?>

The final step is modify the following code to reflect our new style sheets. Be default it is:

<?php if ($enableSwitcher) : ?>
	<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('normal'); return false;" title="Normal">Normal Mode</a></li>
	</ul>
<?php endif; ?>

We need to make two changes. 1) As we haven't created a template parameter to toggle our new style sheet switcher, we need to remove the if statement, and 2) we need to change the names to reflect our new style sheets. The code will now look like:

<ul id="style-switch">
	<li><a href="#" onclick="setActiveStyleSheet('red'); return false;" title="red">red</a></li>
	<li><a href="#" onclick="setActiveStyleSheet('green'); return false;" title="green">green Mode</a></li>
	<li><a href="#" onclick="setActiveStyleSheet('blue'); return false;" title="blue">blue Mode</a></li>
</ul>

You can place this code in your extended template override anywhere you want these hyperlinks to appear. You may also want to consider changing the ID used for the unordered list, especially if you are also using the style sheet switcher that is included in Construct.

Search