Customising the JA Purity template/header
From Joomla! Documentation
< J1.5:Customising the JA Purity templateRevision as of 07:25, 13 June 2009 by Jwwicks (talk | contribs) (→ja_purity/ja_templatetools.php: Added more functions used in header from ja_templatetools.php)
Revision as of 07:25, 13 June 2009 by Jwwicks (talk | contribs) (→ja_purity/ja_templatetools.php: Added more functions used in header from ja_templatetools.php)
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.
This article is a stub and needs to be expanded. If you can provide information or finish this article you're welcome to do so. Please remove this message afterwards or replace with {{inuse}} while making major edits. - Thank you. |
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 and template.css, are in the following directories:
templates/ja_purity index.php css/ template.css
If you've been following the tutorial you can download a tutorial version of the template that installs to the following directory:
templates/my_japurity index.php css/ template.css
HTML and PHP Files[edit]
ja_purity/index.php[edit]
<!-- 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"> </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[edit]
getParam method[edit]
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[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
}
}
templateurl method[edit]
function templateurl(){
return JURI::base()."templates/".$this->template;
}
getRandomImage method[edit]
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;
}
CSS Files[edit]
ja_purity/css/template.css[edit]
/* 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[edit]
/* 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[edit]
#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[edit]
#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;
}