Actions

J1.5

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

From Joomla! Documentation

< J1.5:Customising the JA Purity template
m (Start edit session)
m (Fixing the tutorialtemplate)
(7 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{stub}}
 
{{stub}}
{{inuse}}
+
{{:Customising the JA Purity template/tutorialtemplate|index.php and template.css|<pre>
<noinclude>
+
    <location of template>/
[[Category:Beginners]]
+
        index.php
[[Category:JA Purity template]]
+
        css/
[[Category:Tutorials]]
+
            template.css
</noinclude>
+
</pre>}}
 +
==HTML and PHP Files==
 +
===ja_purity/index.php===
 +
<source lang="php" line start="99">
 +
<body id="bd" class="fs<?php echo $tmpTools->getParam(JA_TOOL_FONT);?> <?php echo $tmpTools->browser();?>" >
 +
<a name="Top" id="Top"></a>
 +
<ul class="accessibility">
 +
<li><a href="#ja-content" title="<?php echo JText::_("Skip to content");?>"><?php echo JText::_("Skip to content");?></a></li>
 +
<li><a href="#ja-mainnav" title="<?php echo JText::_("Skip to main navigation");?>"><?php echo JText::_("Skip to main navigation");?></a></li>
 +
<li><a href="#ja-col1" title="<?php echo JText::_("Skip to 1st column");?>"><?php echo JText::_("Skip to 1st column");?></a></li>
 +
<li><a href="#ja-col2" title="<?php echo JText::_("Skip to 2nd column");?>"><?php echo JText::_("Skip to 2nd column");?></a></li>
 +
</ul>
 +
 
 +
<div id="ja-wrapper">
 +
 
 +
<!-- 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 -->
 +
 
 +
<!-- BEGIN: MAIN NAVIGATION -->
 +
<?php if ($this->countModules('hornav')): ?>
 +
<div id="ja-mainnavwrap">
 +
<div id="ja-mainnav" class="clearfix">
 +
<jdoc:include type="modules" name="hornav" />
 +
</div>
 +
</div>
 +
<?php endif; ?>
 +
<!-- END: MAIN NAVIGATION -->
 +
 
 +
<div id="ja-containerwrap<?php echo $divid; ?>">
 +
<div id="ja-containerwrap2">
 +
<div id="ja-container">
 +
<div id="ja-container2" class="clearfix">
 +
 
 +
<div id="ja-mainbody<?php echo $divid; ?>" class="clearfix">
 +
 
 +
<!-- BEGIN: CONTENT -->
 +
<div id="ja-contentwrap">
 +
<div id="ja-content">
 +
 
 +
<jdoc:include type="message" />
 +
 
 +
<?php if(!$tmpTools->isFrontPage()) : ?>
 +
<div id="ja-pathway">
 +
<jdoc:include type="module" name="breadcrumbs" />
 +
</div>
 +
<?php endif ; ?>
 +
 
 +
<jdoc:include type="component" />
 +
 
 +
<?php if($this->countModules('banner')) : ?>
 +
<div id="ja-banner">
 +
<jdoc:include type="modules" name="banner" />
 +
</div>
 +
<?php endif; ?>
 +
 
 +
</div>
 +
</div>
 +
<!-- END: CONTENT -->
 +
 
 +
<?php if ($this->countModules('left')): ?>
 +
<!-- BEGIN: LEFT COLUMN -->
 +
<div id="ja-col1">
 +
<jdoc:include type="modules" name="left" style="xhtml" />
 +
</div><br />
 +
<!-- END: LEFT COLUMN -->
 +
<?php endif; ?>
 +
 
 +
</div>
 +
 
 +
<?php if ($this->countModules('right')): ?>
 +
<!-- BEGIN: RIGHT COLUMN -->
 +
<div id="ja-col2">
 +
<jdoc:include type="modules" name="right" style="jarounded" />
 +
</div><br />
 +
<!-- END: RIGHT COLUMN -->
 +
<?php endif; ?>
 +
 
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
 
 +
<?php
 +
$spotlight = array ('user1','user2','top','user5');
 +
$botsl = $tmpTools->calSpotlight ($spotlight,99,22);
 +
if( $botsl ) :
 +
?>
 +
<!-- BEGIN: BOTTOM SPOTLIGHT -->
 +
<div id="ja-botslwrap">
 +
<div id="ja-botsl" class="clearfix">
 +
 
 +
  <?php if( $this->countModules('user1') ): ?>
 +
  <div class="ja-box<?php echo $botsl['user1']['class']; ?>" style="width: <?php echo $botsl['user1']['width']; ?>;">
 +
<jdoc:include type="modules" name="user1" style="xhtml" />
 +
  </div>
 +
  <?php endif; ?>
 +
 
 +
  <?php if( $this->countModules('user2') ): ?>
 +
  <div class="ja-box<?php echo $botsl['user2']['class']; ?>" style="width: <?php echo $botsl['user2']['width']; ?>;">
 +
<jdoc:include type="modules" name="user2" style="xhtml" />
 +
  </div>
 +
  <?php endif; ?>
 +
 
 +
  <?php if( $this->countModules('top') ): ?>
 +
  <div class="ja-box<?php echo $botsl['top']['class']; ?>" style="width: <?php echo $botsl['top']['width']; ?>;">
 +
<jdoc:include type="modules" name="top" style="xhtml" />
 +
  </div>
 +
  <?php endif; ?>
 +
 
 +
  <?php if( $this->countModules('user5') ): ?>
 +
  <div class="ja-box<?php echo $botsl['user5']['class']; ?>" style="width: <?php echo $botsl['user5']['width']; ?>;">
 +
<jdoc:include type="modules" name="user5" style="xhtml" />
 +
  </div>
 +
  <?php endif; ?>
 +
 
 +
</div>
 +
</div>
 +
<!-- END: BOTTOM SPOTLIGHT -->
 +
<?php endif; ?>
 +
 
 +
<!-- BEGIN: FOOTER -->
 +
<div id="ja-footerwrap">
 +
<div id="ja-footer" class="clearfix">
 +
 
 +
<div id="ja-footnav">
 +
<jdoc:include type="modules" name="user3" />
 +
</div>
 +
 
 +
<div class="copyright">
 +
<jdoc:include type="modules" name="footer" />
 +
</div>
 +
 
 +
<div class="ja-cert">
 +
<jdoc:include type="modules" name="syndicate" />
 +
    <a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank" title="<?php echo JText::_("CSS Validity");?>" style="text-decoration: none;">
 +
<img src="<?php echo $tmpTools->templateurl(); ?>/images/but-css.gif" border="none" alt="<?php echo JText::_("CSS Validity");?>" />
 +
</a>
 +
<a href="http://validator.w3.org/check/referer" target="_blank" title="<?php echo JText::_("XHTML Validity");?>" style="text-decoration: none;">
 +
<img src="<?php echo $tmpTools->templateurl(); ?>/images/but-xhtml10.gif" border="none" alt="<?php echo JText::_("XHTML Validity");?>" />
 +
</a>
 +
</div>
 +
 
 +
<br />
 +
</div>
 +
</div>
 +
<!-- END: FOOTER -->
 +
 
 +
</div>
 +
 
 +
<jdoc:include type="modules" name="debug" />
 +
 
 +
</body>
 +
</source>
 +
==CSS Files==
 +
===ja_purity/css/template.css===
 +
<source lang="css" line>
 +
/* COMMON STYLE
 +
--------------------------------------------------------- */
 +
html, body, form, fieldset {
 +
margin: 0;
 +
padding: 0;
 +
}
 +
 
 +
body {
 +
color: #000000;
 +
background: #FFFFFF;
 +
font-family: Arial, Helvetica, sans-serif;
 +
line-height: 150%;
 +
}
 +
 
 +
body#bd {
 +
color: #333333;
 +
background: #F2F2F2;
 +
}
 +
 
 +
body.contentpane {
 +
width: auto; /* Printable Page */
 +
margin: 1em 2em;
 +
line-height: 1.3em;
 +
margin: 0px 0px 0px 0px;
 +
font-size: 12px;
 +
color: #333;
 +
}
 +
 
 +
body.fs1 {
 +
font-size: 10px;
 +
}
 +
 
 +
body.fs2{
 +
font-size: 11px;
 +
}
 +
 
 +
body.fs3{
 +
font-size: 12px;
 +
}
 +
 
 +
body.fs4{
 +
font-size: 13px;
 +
}
 +
 
 +
body.fs5{
 +
font-size: 14px;
 +
}
 +
 
 +
body.fs6{
 +
font-size: 15px;
 +
}
 +
</source>
 +
==Image Files==
 +
==Javascript Files==

Revision as of 14:56, 15 January 2011

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, 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
        css/
            template.css

Contents

HTML and PHP Files

ja_purity/index.php

  1. <body id="bd" class="fs<?php echo $tmpTools->getParam(JA_TOOL_FONT);?> <?php echo $tmpTools->browser();?>" >
    
  2. <a name="Top" id="Top"></a>
    
  3. <ul class="accessibility">
    
  4.         <li><a href="#ja-content" title="<?php echo JText::_("Skip to content");?>"><?php echo JText::_("Skip to content");?></a></li>
    
  5.         <li><a href="#ja-mainnav" title="<?php echo JText::_("Skip to main navigation");?>"><?php echo JText::_("Skip to main navigation");?></a></li>
    
  6.         <li><a href="#ja-col1" title="<?php echo JText::_("Skip to 1st column");?>"><?php echo JText::_("Skip to 1st column");?></a></li>
    
  7.         <li><a href="#ja-col2" title="<?php echo JText::_("Skip to 2nd column");?>"><?php echo JText::_("Skip to 2nd column");?></a></li>
    
  8. </ul>
    
  9.  
    
  10. <div id="ja-wrapper">
    
  11.  
    
  12. <!-- BEGIN: HEADER -->
    
  13. <div id="ja-headerwrap">
    
  14.         <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';?>;">
    
  15.  
    
  16.         <div class="ja-headermask">&nbsp;</div>
    
  17.  
    
  18.         <?php
    
  19.                 $siteName = $tmpTools->sitename();
    
  20.                 if ($tmpTools->getParam('logoType')=='image'): ?>
    
  21.                 <h1 class="logo">
    
  22.                         <a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $siteName; ?></span></a>
    
  23.                 </h1>
    
  24.         <?php else:
    
  25.                 $logoText = (trim($tmpTools->getParam('logoText'))=='') ? $config->sitename : $tmpTools->getParam('logoText');
    
  26.                 $sloganText = (trim($tmpTools->getParam('sloganText'))=='') ? JText::_('SITE SLOGAN') : $tmpTools->getParam('sloganText');      ?>
    
  27.                 <h1 class="logo-text">
    
  28.                         <a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a>
    
  29.                 </h1>
    
  30.                 <p class="site-slogan"><?php echo $sloganText;?></p>
    
  31.         <?php endif; ?>
    
  32.  
    
  33.         <?php $tmpTools->genToolMenu(JA_TOOL_FONT, 'png'); ?>
    
  34.  
    
  35.         <?php if($this->countModules('user4')) : ?>
    
  36.                 <div id="ja-search">
    
  37.                         <jdoc:include type="modules" name="user4" />
    
  38.                 </div>
    
  39.         <?php endif; ?>
    
  40.  
    
  41.         </div>
    
  42. </div>
    
  43. <!-- END: HEADER -->
    
  44.  
    
  45. <!-- BEGIN: MAIN NAVIGATION -->
    
  46. <?php if ($this->countModules('hornav')): ?>
    
  47. <div id="ja-mainnavwrap">
    
  48.         <div id="ja-mainnav" class="clearfix">
    
  49.         <jdoc:include type="modules" name="hornav" />
    
  50.         </div>
    
  51. </div>
    
  52. <?php endif; ?>
    
  53. <!-- END: MAIN NAVIGATION -->
    
  54.  
    
  55. <div id="ja-containerwrap<?php echo $divid; ?>">
    
  56. <div id="ja-containerwrap2">
    
  57.         <div id="ja-container">
    
  58.         <div id="ja-container2" class="clearfix">
    
  59.  
    
  60.                 <div id="ja-mainbody<?php echo $divid; ?>" class="clearfix">
    
  61.  
    
  62.                 <!-- BEGIN: CONTENT -->
    
  63.                 <div id="ja-contentwrap">
    
  64.                 <div id="ja-content">
    
  65.  
    
  66.                         <jdoc:include type="message" />
    
  67.  
    
  68.                         <?php if(!$tmpTools->isFrontPage()) : ?>
    
  69.                         <div id="ja-pathway">
    
  70.                                 <jdoc:include type="module" name="breadcrumbs" />
    
  71.                         </div>
    
  72.                         <?php endif ; ?>
    
  73.  
    
  74.                         <jdoc:include type="component" />
    
  75.  
    
  76.                         <?php if($this->countModules('banner')) : ?>
    
  77.                         <div id="ja-banner">
    
  78.                                 <jdoc:include type="modules" name="banner" />
    
  79.                         </div>
    
  80.                         <?php endif; ?>
    
  81.  
    
  82.                 </div>
    
  83.                 </div>
    
  84.                 <!-- END: CONTENT -->
    
  85.  
    
  86.                 <?php if ($this->countModules('left')): ?>
    
  87.                 <!-- BEGIN: LEFT COLUMN -->
    
  88.                 <div id="ja-col1">
    
  89.                         <jdoc:include type="modules" name="left" style="xhtml" />
    
  90.                 </div><br />
    
  91.                 <!-- END: LEFT COLUMN -->
    
  92.                 <?php endif; ?>
    
  93.  
    
  94.                 </div>
    
  95.  
    
  96.                 <?php if ($this->countModules('right')): ?>
    
  97.                 <!-- BEGIN: RIGHT COLUMN -->
    
  98.                 <div id="ja-col2">
    
  99.                         <jdoc:include type="modules" name="right" style="jarounded" />
    
  100.                 </div><br />
    
  101.                 <!-- END: RIGHT COLUMN -->
    
  102.                 <?php endif; ?>
    
  103.  
    
  104.         </div>
    
  105.         </div>
    
  106. </div>
    
  107. </div>
    
  108.  
    
  109. <?php
    
  110. $spotlight = array ('user1','user2','top','user5');
    
  111. $botsl = $tmpTools->calSpotlight ($spotlight,99,22);
    
  112. if( $botsl ) :
    
  113. ?>
    
  114. <!-- BEGIN: BOTTOM SPOTLIGHT -->
    
  115. <div id="ja-botslwrap">
    
  116.         <div id="ja-botsl" class="clearfix">
    
  117.  
    
  118.           <?php if( $this->countModules('user1') ): ?>
    
  119.           <div class="ja-box<?php echo $botsl['user1']['class']; ?>" style="width: <?php echo $botsl['user1']['width']; ?>;">
    
  120.                         <jdoc:include type="modules" name="user1" style="xhtml" />
    
  121.           </div>
    
  122.           <?php endif; ?>
    
  123.  
    
  124.           <?php if( $this->countModules('user2') ): ?>
    
  125.           <div class="ja-box<?php echo $botsl['user2']['class']; ?>" style="width: <?php echo $botsl['user2']['width']; ?>;">
    
  126.                         <jdoc:include type="modules" name="user2" style="xhtml" />
    
  127.           </div>
    
  128.           <?php endif; ?>
    
  129.  
    
  130.           <?php if( $this->countModules('top') ): ?>
    
  131.           <div class="ja-box<?php echo $botsl['top']['class']; ?>" style="width: <?php echo $botsl['top']['width']; ?>;">
    
  132.                         <jdoc:include type="modules" name="top" style="xhtml" />
    
  133.           </div>
    
  134.           <?php endif; ?>
    
  135.  
    
  136.           <?php if( $this->countModules('user5') ): ?>
    
  137.           <div class="ja-box<?php echo $botsl['user5']['class']; ?>" style="width: <?php echo $botsl['user5']['width']; ?>;">
    
  138.                         <jdoc:include type="modules" name="user5" style="xhtml" />
    
  139.           </div>
    
  140.           <?php endif; ?>
    
  141.  
    
  142.         </div>
    
  143. </div>
    
  144. <!-- END: BOTTOM SPOTLIGHT -->
    
  145. <?php endif; ?>
    
  146.  
    
  147. <!-- BEGIN: FOOTER -->
    
  148. <div id="ja-footerwrap">
    
  149. <div id="ja-footer" class="clearfix">
    
  150.  
    
  151.         <div id="ja-footnav">
    
  152.                 <jdoc:include type="modules" name="user3" />
    
  153.         </div>
    
  154.  
    
  155.         <div class="copyright">
    
  156.                 <jdoc:include type="modules" name="footer" />
    
  157.         </div>
    
  158.  
    
  159.         <div class="ja-cert">
    
  160.                 <jdoc:include type="modules" name="syndicate" />
    
  161.     <a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank" title="<?php echo JText::_("CSS Validity");?>" style="text-decoration: none;">
    
  162.                 <img src="<?php echo $tmpTools->templateurl(); ?>/images/but-css.gif" border="none" alt="<?php echo JText::_("CSS Validity");?>" />
    
  163.                 </a>
    
  164.                 <a href="http://validator.w3.org/check/referer" target="_blank" title="<?php echo JText::_("XHTML Validity");?>" style="text-decoration: none;">
    
  165.                 <img src="<?php echo $tmpTools->templateurl(); ?>/images/but-xhtml10.gif" border="none" alt="<?php echo JText::_("XHTML Validity");?>" />
    
  166.                 </a>
    
  167.         </div>
    
  168.  
    
  169.         <br />
    
  170. </div>
    
  171. </div>
    
  172. <!-- END: FOOTER -->
    
  173.  
    
  174. </div>
    
  175.  
    
  176. <jdoc:include type="modules" name="debug" />
    
  177.  
    
  178. </body>
    

CSS Files

ja_purity/css/template.css

  1. /* COMMON STYLE
    
  2. --------------------------------------------------------- */
    
  3. html, body, form, fieldset {
    
  4.         margin: 0;
    
  5.         padding: 0;
    
  6. }
    
  7.  
    
  8. body {
    
  9.         color: #000000;
    
  10.         background: #FFFFFF;
    
  11.         font-family: Arial, Helvetica, sans-serif;
    
  12.         line-height: 150%;
    
  13. }
    
  14.  
    
  15. body#bd {
    
  16.         color: #333333;
    
  17.         background: #F2F2F2;
    
  18. }
    
  19.  
    
  20. body.contentpane {
    
  21.         width: auto; /* Printable Page */
    
  22.         margin: 1em 2em;
    
  23.         line-height: 1.3em;
    
  24.         margin: 0px 0px 0px 0px;
    
  25.         font-size: 12px;
    
  26.         color: #333;
    
  27. }
    
  28.  
    
  29. body.fs1 {
    
  30.         font-size: 10px;
    
  31. }
    
  32.  
    
  33. body.fs2{
    
  34.         font-size: 11px;
    
  35. }
    
  36.  
    
  37. body.fs3{
    
  38.         font-size: 12px;
    
  39. }
    
  40.  
    
  41. body.fs4{
    
  42.         font-size: 13px;
    
  43. }
    
  44.  
    
  45. body.fs5{
    
  46.         font-size: 14px;
    
  47. }
    
  48.  
    
  49. body.fs6{
    
  50.         font-size: 15px;
    
  51. }
    

Image Files

Javascript Files