Joomla! Documentation™

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 and template.css, 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

HTML and PHP Files

ja_purity/index.php

<!-- BEGIN: HEADER -->
<div id="ja-headerwrap">
	<div id="ja-header" class="clearfix" style="background: url(<?php echo $tmpTools->templateurl(); ?>/images/header/<?php echo $tmpTools->getRandomImage(dirname(__FILE__).DS.'images/header'); ?>) no-repeat top <?php if($this->direction == 'rtl') echo 'left'; else echo 'right';?>;">

	<div class="ja-headermask">&nbsp;</div>

	<?php
		$siteName = $tmpTools->sitename();
		if ($tmpTools->getParam('logoType')=='image'): ?>
		<h1 class="logo">
			<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $siteName; ?></span></a>
		</h1>
	<?php else:
		$logoText = (trim($tmpTools->getParam('logoText'))=='') ? $config->sitename : $tmpTools->getParam('logoText');
		$sloganText = (trim($tmpTools->getParam('sloganText'))=='') ? JText::_('SITE SLOGAN') : $tmpTools->getParam('sloganText');	?>
		<h1 class="logo-text">
			<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a>
		</h1>
		<p class="site-slogan"><?php echo $sloganText;?></p>
	<?php endif; ?>

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

	<?php if($this->countModules('user4')) : ?>
		<div id="ja-search">
			<jdoc:include type="modules" name="user4" />
		</div>
	<?php endif; ?>

	</div>
</div>
<!-- END: HEADER -->

ja_purity/ja_templatetools.php

getParam method

	function getParam ($param, $default='') {
		if (isset($this->_params_cookie[$param])) {
			return preg_replace('/[\x00-\x1F\x7F<>;\/\"\'%()]/', '', $this->_params_cookie[$param]);
		}
		return preg_replace('/[\x00-\x1F\x7F<>;\/\"\'%()]/', '', $this->_tpl->params->get($param, $default));
	}

genToolsMenu method

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

templateurl method

	function templateurl(){
		return JURI::base()."templates/".$this->template;
	}

getRandomImage method

	function getRandomImage ($img_folder) {
		$imglist=array();

		mt_srand((double)microtime()*1000);

		//use the directory class
		$imgs = dir($img_folder);

		//read all files from the  directory, checks if are images and ads them to a list (see below how to display flash banners)
		while ($file = $imgs->read()) {
			if (eregi("gif", $file) || eregi("jpg", $file) || eregi("png", $file))
				$imglist[] = $file;
		}
		closedir($imgs->handle);

		if(!count($imglist)) return '';

		//generate a random number between 0 and the number of images
		$random = mt_rand(0, count($imglist)-1);
		$image = $imglist[$random];

		return $image;
	}

sitename method

	function sitename() {
		$config = new JConfig();
		return $config->sitename;
	}

CSS Files

ja_purity/css/template.css

/* HEADER
--------------------------------------------------------- */
#ja-headerwrap {
	background: #333333;
	color: #CCCCCC;
	line-height: normal;
	height: 80px;
}

#ja-header {
	position: relative;
	height: 80px;
}

.ja-headermask {
	width: 602px;
	display: block;
	background: url(../images/header-mask.png) no-repeat top right;
	height: 80px;
	position: absolute;
	top: 0;
	right: -1px;
}

#ja-header a {
	color: #CCCCCC;
}

h1.logo, h1.logo-text {
	margin: 0 0 0 5px;
	padding: 0;
	font-size: 180%;
	text-transform: uppercase;
}

h1.logo a {
	width: 208px;
	display: block;
	background: url(../images/logo.png) no-repeat;
	height: 80px;
	position: relative;
	z-index: 100;
}

h1.logo a span {
	position: absolute;
	top: -1000px;
}

h1.logo-text a {
	color: #CCCCCC !important;
	text-decoration: none;
	outline: none;
	position: absolute;
	bottom: 40px;
	left: 5px;
}

p.site-slogan {
	margin: 0;
	padding: 0;
	padding: 2px 5px;
	color: #FFFFFF;
	background: #444444;
	font-size: 92%;
	position: absolute;
	bottom: 20px;
	left: 0;
}

/* Search */
#ja-search {
	padding-left: 20px;
	background: url(../images/icon-search.gif) no-repeat center left;
	position: absolute;
	bottom: 15px;
	right: 0;
}

#ja-search .inputbox {
	width: 120px;
	border: 1px solid #333333;
	padding: 3px 5px;
	color: #999999;
	background: #444444;
	font-size: 92%;
}

ja_purity/css/template_rtl.css

/* HEADER
--------------------------------------------------------- */
.ja-headermask {
	background-position: top left;
	left: -1px;
	right: auto;
}

h1.logo-text a {
	right: 5px;
	left: auto;
}

p.site-slogan {
	right: 0;
	left: auto;
}

/* Search */
#ja-search {
	background-position: center right;
	left: 0;
	right: auto;
}

ja_purity/styles/header/blue/style.css

#ja-headerwrap {
	background: #006699;
	color: #C3DFED;
}

.ja-headermask {
	background: url(images/header-mask.png) no-repeat top right;
}

#ja-header a {
	color: #C3DFED;
}

h1.logo-text a {
	color: #C3DFED !important;
}

p.site-slogan {
	background: #1E7CAB;
}

#ja-search {
	background: url(images/icon-search.gif) no-repeat center left;
}

#ja-search .inputbox {
	border: 1px solid #005A87;
	color: #C3DFED;
	background: #1E7CAB;
}

ja_purity/styles/header/green/style.css

#ja-headerwrap {
	background: #7BA566;
	color: #E4EFDF;
}

.ja-headermask {
	background: url(images/header-mask.png) no-repeat top right;
}

#ja-header a {
	color: #E4EFDF;
}

h1.logo-text a {
	color: #E4EFDF !important;
}

p.site-slogan {
	background: #9DBF8C;
}

#ja-search {
	background: url(images/icon-search.gif) no-repeat center left;
}

#ja-search .inputbox {
	border: 1px solid #658854;
	color: #E4EFDF;
	background: #9DBF8C;
}