Actions

J1.5

Difference between revisions of "Customising the JA Purity template/header"

From Joomla! Documentation

< J1.5:Customising the JA Purity template
m
(Created basic stub)
Line 1: Line 1:
 
{{stub}}
 
{{stub}}
 +
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:<br />
 +
<pre>
 +
    templates/ja_purity
 +
                index.php
 +
                css/
 +
                    template.css
 +
</pre>
 +
 +
If you've been following the [[Tutorial:Customising_the_JA_Purity_template|tutorial]] you can download a tutorial version of the template that installs to the following directory:<br/>
 +
<pre>
 +
    templates/my_japurity
 +
                index.php
 +
                css/
 +
                    template.css
 +
</pre>
 +
==HTML and PHP Files==
 +
===ja_purity/index.php===
 +
<source lang="php" line start="110">
 +
<!-- 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 -->
 +
</source>
 +
==CSS Files==
 +
===ja_purity/css/template.css===
 +
<source lang="css" line start="921">
 +
/* 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%;
 +
}
 +
</source>
 +
===ja_purity/styles/header/blue/style.css===
 +
<source lang="css" line>
 +
#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;
 +
}
 +
</source>
 +
===ja_purity/styles/header/green/style.css===
 +
<source lang="css" line>
 +
#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;
 +
}
 +
</source>
 +
==Image Files==
 +
==Javascript Files==
 
<noinclude>
 
<noinclude>
 
[[Category:Beginners]]
 
[[Category:Beginners]]

Revision as of 04:58, 13 June 2009

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

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

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