J1.5

Customising the JA Purity template/header/accessibility

From Joomla! Documentation

< J1.5:Customising the JA Purity template‎ | header
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

The "J1.5" namespace is an archived namespace. This page contains information for a Joomla! version which is no longer supported. It exists only as a historical reference, it will not be improved and its content may be incomplete and/or contain broken links.


The original JA Purity template was provided from JoomlArt.com as a zip but the latest files have been installed along with Joomla. The relevant files, index.php, ja_templatetools.php, template.css, ja.script.js and user-increase.png, user-decrease.png, user-reset.png, can be found in templates/ja_purity. If you've been following the tutorial, you can download a tutorial version of the template that installs to the templates/my_japurity folder. Inside the folder of the template, the files are located as follows:

    <location of template>/
        index.php
        ja_templatetools.php
        css/
            template.css
        images/
            user-increase.png
            user-decrease.png
            user-reset.png
        js/
            ja.script.js

HTML and PHP Files[edit]

ja_purity/index.php[edit]

<ul class="accessibility">
	<li><a href="#ja-content" title="<?php echo JText::_("Skip to content");?>"><?php echo JText::_("Skip to content");?></a></li>
	<li><a href="#ja-mainnav" title="<?php echo JText::_("Skip to main navigation");?>"><?php echo JText::_("Skip to main navigation");?></a></li>
	<li><a href="#ja-col1" title="<?php echo JText::_("Skip to 1st column");?>"><?php echo JText::_("Skip to 1st column");?></a></li>
	<li><a href="#ja-col2" title="<?php echo JText::_("Skip to 2nd column");?>"><?php echo JText::_("Skip to 2nd column");?></a></li>
</ul>

ja_purity/index.php[edit]

	<?php $tmpTools->genToolMenu(JA_TOOL_FONT, 'png'); ?>

ja_purity/ja_templatetools.php[edit]

	function genToolMenu($_array_tools=null, $imgext = 'gif'){
		if(!is_array($_array_tools)) $_array_tools = array($_array_tools);
		if(!$_array_tools) $_array_tools = array_keys($this->_params_cookie);
		if (in_array(JA_TOOL_FONT, $_array_tools)){//show font tools
		?>
		<ul class="ja-usertools-font">
	      <li><img style="cursor: pointer;" title="<?php echo JText::_('Increase font size');?>" src="<?php echo $this->templateurl();?>/images/user-increase.<?php echo $imgext;?>" alt="<?php echo JText::_('Increase font size');?>" id="ja-tool-increase" onclick="switchFontSize('<?php echo $this->template."_".JA_TOOL_FONT;?>','inc'); return false;" /></li>
		  <li><img style="cursor: pointer;" title="<?php echo JText::_('Default font size');?>" src="<?php echo $this->templateurl();?>/images/user-reset.<?php echo $imgext;?>" alt="<?php echo JText::_('Default font size');?>" id="ja-tool-reset" onclick="switchFontSize('<?php echo $this->template."_".JA_TOOL_FONT;?>',<?php echo $this->_tpl->params->get(JA_TOOL_FONT);?>); return false;" /></li>
		  <li><img style="cursor: pointer;" title="<?php echo JText::_('Decrease font size');?>" src="<?php echo $this->templateurl();?>/images/user-decrease.<?php echo $imgext;?>" alt="<?php echo JText::_('Decrease font size');?>" id="ja-tool-decrease" onclick="switchFontSize('<?php echo $this->template."_".JA_TOOL_FONT;?>','dec'); return false;" /></li>
		</ul>
		<script type="text/javascript">var CurrentFontSize=parseInt('<?php echo $this->getParam(JA_TOOL_FONT);?>');</script>
		<?php
		}
	}

CSS Files[edit]

ja_purity/css/template.css[edit]

ul.accessibility {
	position: absolute;
	top: -100%;
}

/*usertool*/
ul.ja-usertools-font {
	font-size: 11px;
	position: absolute;
	top: 8px;
	right: 70px;
}

ul.ja-usertools-font li {
	padding: 0;
	margin: 0;
	display: inline;
	background: none;
}

Image Files[edit]

  • /images/user-increase.png
  • /images/user-decrease.png
  • /images/user-reset.png

Javascript Files[edit]

ja_purity/js/ja.script.js[edit]

switchFontSize=function(ckname,val){
	var bd = $E('BODY');
	switch (val) {
		case 'inc':
			if (CurrentFontSize+1 < 7) {
				bd.removeClass('fs'+CurrentFontSize);
				CurrentFontSize++;
				bd.addClass('fs'+CurrentFontSize);
			}
		break;
		case 'dec':
			if (CurrentFontSize-1 > 0) {
				bd.removeClass('fs'+CurrentFontSize);
				CurrentFontSize--;
				bd.addClass('fs'+CurrentFontSize);
			}
		break;
		default:
			bd.removeClass('fs'+CurrentFontSize);
			CurrentFontSize = val;
			bd.addClass('fs'+CurrentFontSize);
	}
	Cookie.set(ckname, CurrentFontSize,{duration:365});
}