J1.5

Customising the JA Purity template/header

< J1.5:Customising the JA Purity template(Redirected from Ja purity template header)

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

110 <!-- BEGIN: HEADER -->
111 <div id="ja-headerwrap">
112 	<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';?>;">
113 
114 	<div class="ja-headermask">&nbsp;</div>
115 
116 	<?php
117 		$siteName = $tmpTools->sitename();
118 		if ($tmpTools->getParam('logoType')=='image'): ?>
119 		<h1 class="logo">
120 			<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $siteName; ?></span></a>
121 		</h1>
122 	<?php else:
123 		$logoText = (trim($tmpTools->getParam('logoText'))=='') ? $config->sitename : $tmpTools->getParam('logoText');
124 		$sloganText = (trim($tmpTools->getParam('sloganText'))=='') ? JText::_('SITE SLOGAN') : $tmpTools->getParam('sloganText');	?>
125 		<h1 class="logo-text">
126 			<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a>
127 		</h1>
128 		<p class="site-slogan"><?php echo $sloganText;?></p>
129 	<?php endif; ?>
130 
131 	<?php $tmpTools->genToolMenu(JA_TOOL_FONT, 'png'); ?>
132 
133 	<?php if($this->countModules('user4')) : ?>
134 		<div id="ja-search">
135 			<jdoc:include type="modules" name="user4" />
136 		</div>
137 	<?php endif; ?>
138 
139 	</div>
140 </div>
141 <!-- END: HEADER -->

ja_purity/ja_templatetools.php

getParam method

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

genToolsMenu method

69 	function genToolMenu($_array_tools=null, $imgext = 'gif'){
70 		if(!is_array($_array_tools)) $_array_tools = array($_array_tools);
71 		if(!$_array_tools) $_array_tools = array_keys($this->_params_cookie);
72 		if (in_array(JA_TOOL_FONT, $_array_tools)){//show font tools
73 		?>
74 		<ul class="ja-usertools-font">
75 	      <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>
76 		  <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>
77 		  <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>
78 		</ul>
79 		<script type="text/javascript">var CurrentFontSize=parseInt('<?php echo $this->getParam(JA_TOOL_FONT);?>');</script>
80 		<?php
81 		}
82 	}

templateurl method

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

getRandomImage method

173 	function getRandomImage ($img_folder) {
174 		$imglist=array();
175 
176 		mt_srand((double)microtime()*1000);
177 
178 		//use the directory class
179 		$imgs = dir($img_folder);
180 
181 		//read all files from the  directory, checks if are images and ads them to a list (see below how to display flash banners)
182 		while ($file = $imgs->read()) {
183 			if (eregi("gif", $file) || eregi("jpg", $file) || eregi("png", $file))
184 				$imglist[] = $file;
185 		}
186 		closedir($imgs->handle);
187 
188 		if(!count($imglist)) return '';
189 
190 		//generate a random number between 0 and the number of images
191 		$random = mt_rand(0, count($imglist)-1);
192 		$image = $imglist[$random];
193 
194 		return $image;
195 	}

sitename method

201 	function sitename() {
202 		$config = new JConfig();
203 		return $config->sitename;
204 	}

CSS Files

ja_purity/css/template.css

 921 /* HEADER
 922 --------------------------------------------------------- */
 923 #ja-headerwrap {
 924 	background: #333333;
 925 	color: #CCCCCC;
 926 	line-height: normal;
 927 	height: 80px;
 928 }
 929 
 930 #ja-header {
 931 	position: relative;
 932 	height: 80px;
 933 }
 934 
 935 .ja-headermask {
 936 	width: 602px;
 937 	display: block;
 938 	background: url(../images/header-mask.png) no-repeat top right;
 939 	height: 80px;
 940 	position: absolute;
 941 	top: 0;
 942 	right: -1px;
 943 }
 944 
 945 #ja-header a {
 946 	color: #CCCCCC;
 947 }
 948 
 949 h1.logo, h1.logo-text {
 950 	margin: 0 0 0 5px;
 951 	padding: 0;
 952 	font-size: 180%;
 953 	text-transform: uppercase;
 954 }
 955 
 956 h1.logo a {
 957 	width: 208px;
 958 	display: block;
 959 	background: url(../images/logo.png) no-repeat;
 960 	height: 80px;
 961 	position: relative;
 962 	z-index: 100;
 963 }
 964 
 965 h1.logo a span {
 966 	position: absolute;
 967 	top: -1000px;
 968 }
 969 
 970 h1.logo-text a {
 971 	color: #CCCCCC !important;
 972 	text-decoration: none;
 973 	outline: none;
 974 	position: absolute;
 975 	bottom: 40px;
 976 	left: 5px;
 977 }
 978 
 979 p.site-slogan {
 980 	margin: 0;
 981 	padding: 0;
 982 	padding: 2px 5px;
 983 	color: #FFFFFF;
 984 	background: #444444;
 985 	font-size: 92%;
 986 	position: absolute;
 987 	bottom: 20px;
 988 	left: 0;
 989 }
 990 
 991 /* Search */
 992 #ja-search {
 993 	padding-left: 20px;
 994 	background: url(../images/icon-search.gif) no-repeat center left;
 995 	position: absolute;
 996 	bottom: 15px;
 997 	right: 0;
 998 }
 999 
1000 #ja-search .inputbox {
1001 	width: 120px;
1002 	border: 1px solid #333333;
1003 	padding: 3px 5px;
1004 	color: #999999;
1005 	background: #444444;
1006 	font-size: 92%;
1007 }

ja_purity/css/template_rtl.css

172 /* HEADER
173 --------------------------------------------------------- */
174 .ja-headermask {
175 	background-position: top left;
176 	left: -1px;
177 	right: auto;
178 }
179 
180 h1.logo-text a {
181 	right: 5px;
182 	left: auto;
183 }
184 
185 p.site-slogan {
186 	right: 0;
187 	left: auto;
188 }
189 
190 /* Search */
191 #ja-search {
192 	background-position: center right;
193 	left: 0;
194 	right: auto;
195 }

ja_purity/styles/header/blue/style.css

 1 #ja-headerwrap {
 2 	background: #006699;
 3 	color: #C3DFED;
 4 }
 5 
 6 .ja-headermask {
 7 	background: url(images/header-mask.png) no-repeat top right;
 8 }
 9 
10 #ja-header a {
11 	color: #C3DFED;
12 }
13 
14 h1.logo-text a {
15 	color: #C3DFED !important;
16 }
17 
18 p.site-slogan {
19 	background: #1E7CAB;
20 }
21 
22 #ja-search {
23 	background: url(images/icon-search.gif) no-repeat center left;
24 }
25 
26 #ja-search .inputbox {
27 	border: 1px solid #005A87;
28 	color: #C3DFED;
29 	background: #1E7CAB;
30 }

ja_purity/styles/header/green/style.css

 1 #ja-headerwrap {
 2 	background: #7BA566;
 3 	color: #E4EFDF;
 4 }
 5 
 6 .ja-headermask {
 7 	background: url(images/header-mask.png) no-repeat top right;
 8 }
 9 
10 #ja-header a {
11 	color: #E4EFDF;
12 }
13 
14 h1.logo-text a {
15 	color: #E4EFDF !important;
16 }
17 
18 p.site-slogan {
19 	background: #9DBF8C;
20 }
21 
22 #ja-search {
23 	background: url(images/icon-search.gif) no-repeat center left;
24 }
25 
26 #ja-search .inputbox {
27 	border: 1px solid #658854;
28 	color: #E4EFDF;
29 	background: #9DBF8C;
30 }

Image Files

Javascript Files

Advertisement