Actions

J1.5

Customising the JA Purity template/header

From Joomla! Documentation

< J1.5:Customising the JA Purity template
Revision as of 07:30, 13 June 2009 by Jwwicks (Talk | contribs)

Replacement filing cabinet.png
This Namespace has been archived - Please Do Not Edit or Create Pages in this namespace. Pages contain information for a Joomla! version which is no longer supported. It exists only as a historical reference, will not be improved and its content may be incomplete.


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, are in the following directories:

    templates/ja_purity
                 index.php
                 ja_templatetools.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
                 ja_templatetools.php
                 css/
                     template.css

HTML and PHP Files

ja_purity/index.php

  1. <!-- BEGIN: HEADER -->
    
  2. <div id="ja-headerwrap">
    
  3. 	<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';?>;">
    
  4.  
    
  5. 	<div class="ja-headermask">&nbsp;</div>
    
  6.  
    
  7. 	<?php
    
  8. 		$siteName = $tmpTools->sitename();
    
  9. 		if ($tmpTools->getParam('logoType')=='image'): ?>
    
  10. 		<h1 class="logo">
    
  11. 			<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $siteName; ?></span></a>
    
  12. 		</h1>
    
  13. 	<?php else:
    
  14. 		$logoText = (trim($tmpTools->getParam('logoText'))=='') ? $config->sitename : $tmpTools->getParam('logoText');
    
  15. 		$sloganText = (trim($tmpTools->getParam('sloganText'))=='') ? JText::_('SITE SLOGAN') : $tmpTools->getParam('sloganText');	?>
    
  16. 		<h1 class="logo-text">
    
  17. 			<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a>
    
  18. 		</h1>
    
  19. 		<p class="site-slogan"><?php echo $sloganText;?></p>
    
  20. 	<?php endif; ?>
    
  21.  
    
  22. 	<?php $tmpTools->genToolMenu(JA_TOOL_FONT, 'png'); ?>
    
  23.  
    
  24. 	<?php if($this->countModules('user4')) : ?>
    
  25. 		<div id="ja-search">
    
  26. 			<jdoc:include type="modules" name="user4" />
    
  27. 		</div>
    
  28. 	<?php endif; ?>
    
  29.  
    
  30. 	</div>
    
  31. </div>
    
  32. <!-- END: HEADER -->
    

ja_purity/ja_templatetools.php

getParam method

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

genToolsMenu method

  1. 	function genToolMenu($_array_tools=null, $imgext = 'gif'){
    
  2. 		if(!is_array($_array_tools)) $_array_tools = array($_array_tools);
    
  3. 		if(!$_array_tools) $_array_tools = array_keys($this->_params_cookie);
    
  4. 		if (in_array(JA_TOOL_FONT, $_array_tools)){//show font tools
    
  5. 		?>
    
  6. 		<ul class="ja-usertools-font">
    
  7. 	      <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>
    
  8. 		  <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>
    
  9. 		  <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>
    
  10. 		</ul>
    
  11. 		<script type="text/javascript">var CurrentFontSize=parseInt('<?php echo $this->getParam(JA_TOOL_FONT);?>');</script>
    
  12. 		<?php
    
  13. 		}
    
  14. 	}
    

templateurl method

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

getRandomImage method

  1. 	function getRandomImage ($img_folder) {
    
  2. 		$imglist=array();
    
  3.  
    
  4. 		mt_srand((double)microtime()*1000);
    
  5.  
    
  6. 		//use the directory class
    
  7. 		$imgs = dir($img_folder);
    
  8.  
    
  9. 		//read all files from the  directory, checks if are images and ads them to a list (see below how to display flash banners)
    
  10. 		while ($file = $imgs->read()) {
    
  11. 			if (eregi("gif", $file) || eregi("jpg", $file) || eregi("png", $file))
    
  12. 				$imglist[] = $file;
    
  13. 		}
    
  14. 		closedir($imgs->handle);
    
  15.  
    
  16. 		if(!count($imglist)) return '';
    
  17.  
    
  18. 		//generate a random number between 0 and the number of images
    
  19. 		$random = mt_rand(0, count($imglist)-1);
    
  20. 		$image = $imglist[$random];
    
  21.  
    
  22. 		return $image;
    
  23. 	}
    

sitename method

  1. 	function sitename() {
    
  2. 		$config = new JConfig();
    
  3. 		return $config->sitename;
    
  4. 	}
    

CSS Files

ja_purity/css/template.css

  1. /* HEADER
    
  2. --------------------------------------------------------- */
    
  3. #ja-headerwrap {
    
  4. 	background: #333333;
    
  5. 	color: #CCCCCC;
    
  6. 	line-height: normal;
    
  7. 	height: 80px;
    
  8. }
    
  9.  
    
  10. #ja-header {
    
  11. 	position: relative;
    
  12. 	height: 80px;
    
  13. }
    
  14.  
    
  15. .ja-headermask {
    
  16. 	width: 602px;
    
  17. 	display: block;
    
  18. 	background: url(../images/header-mask.png) no-repeat top right;
    
  19. 	height: 80px;
    
  20. 	position: absolute;
    
  21. 	top: 0;
    
  22. 	right: -1px;
    
  23. }
    
  24.  
    
  25. #ja-header a {
    
  26. 	color: #CCCCCC;
    
  27. }
    
  28.  
    
  29. h1.logo, h1.logo-text {
    
  30. 	margin: 0 0 0 5px;
    
  31. 	padding: 0;
    
  32. 	font-size: 180%;
    
  33. 	text-transform: uppercase;
    
  34. }
    
  35.  
    
  36. h1.logo a {
    
  37. 	width: 208px;
    
  38. 	display: block;
    
  39. 	background: url(../images/logo.png) no-repeat;
    
  40. 	height: 80px;
    
  41. 	position: relative;
    
  42. 	z-index: 100;
    
  43. }
    
  44.  
    
  45. h1.logo a span {
    
  46. 	position: absolute;
    
  47. 	top: -1000px;
    
  48. }
    
  49.  
    
  50. h1.logo-text a {
    
  51. 	color: #CCCCCC !important;
    
  52. 	text-decoration: none;
    
  53. 	outline: none;
    
  54. 	position: absolute;
    
  55. 	bottom: 40px;
    
  56. 	left: 5px;
    
  57. }
    
  58.  
    
  59. p.site-slogan {
    
  60. 	margin: 0;
    
  61. 	padding: 0;
    
  62. 	padding: 2px 5px;
    
  63. 	color: #FFFFFF;
    
  64. 	background: #444444;
    
  65. 	font-size: 92%;
    
  66. 	position: absolute;
    
  67. 	bottom: 20px;
    
  68. 	left: 0;
    
  69. }
    
  70.  
    
  71. /* Search */
    
  72. #ja-search {
    
  73. 	padding-left: 20px;
    
  74. 	background: url(../images/icon-search.gif) no-repeat center left;
    
  75. 	position: absolute;
    
  76. 	bottom: 15px;
    
  77. 	right: 0;
    
  78. }
    
  79.  
    
  80. #ja-search .inputbox {
    
  81. 	width: 120px;
    
  82. 	border: 1px solid #333333;
    
  83. 	padding: 3px 5px;
    
  84. 	color: #999999;
    
  85. 	background: #444444;
    
  86. 	font-size: 92%;
    
  87. }
    

ja_purity/css/template_rtl.css

  1. /* HEADER
    
  2. --------------------------------------------------------- */
    
  3. .ja-headermask {
    
  4. 	background-position: top left;
    
  5. 	left: -1px;
    
  6. 	right: auto;
    
  7. }
    
  8.  
    
  9. h1.logo-text a {
    
  10. 	right: 5px;
    
  11. 	left: auto;
    
  12. }
    
  13.  
    
  14. p.site-slogan {
    
  15. 	right: 0;
    
  16. 	left: auto;
    
  17. }
    
  18.  
    
  19. /* Search */
    
  20. #ja-search {
    
  21. 	background-position: center right;
    
  22. 	left: 0;
    
  23. 	right: auto;
    
  24. }
    

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