Ja purity template header

From Joomla! Documentation

Jump to: navigation, search
 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, 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

Contents

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

Retrieved from "http://docs.joomla.org/Ja_purity_template_header"
Personal tools