Actions

J1.5

Customising the JA Purity template/right

From Joomla! Documentation

< J1.5:Customising the JA Purity template
Revision as of 10:45, 25 June 2009 by Zwiastun (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, template.css and bullet.gif, are in the following directories:

    templates/ja_purity
                 index.php
                 css/
                     template.css
                 images/
                     bullet.gif
                 js/
                     ja.rightcol.js

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
                 images/
                     bullet.gif
                 js/
                     ja.rightcol.js

Contents

HTML and PHP Files

ja_purity/index.php

  1.                 <?php if ($this->countModules('right')): ?>
    
  2.                 <!-- BEGIN: RIGHT COLUMN -->
    
  3.                 <div id="ja-col2">
    
  4.                         <jdoc:include type="modules" name="right" style="jarounded" />
    
  5.                 </div><br />
    
  6.                 <!-- END: RIGHT COLUMN -->
    
  7.                 <?php endif; ?>
    

CSS Files

ja_purity/css/template.css

  1. /* LEFT COLUMN + RIGHT COLUMN
    
  2. --------------------------------------------------------- */
    
  3. #ja-col1 {
    
  4.         float: left;
    
  5.         width: 24.99%;
    
  6.         padding-top: 10px;
    
  7.         overflow: hidden;
    
  8. }
    
  9.  
    
  10. #ja-col2 {
    
  11.         float: right;
    
  12.         width: 20%;
    
  13.         overflow: hidden;
    
  14. }
    
  15.  
    
  16. #ja-col1 table,
    
  17. #ja-col2 table {
    
  18.         border-collapse: collapse;
    
  19.         border-spacing: 0;
    
  20. }
    
  21.  
    
  22. #ja-col1 ul li,
    
  23. #ja-col2 ul li {
    
  24.         padding-left: 15px;
    
  25.         margin: 0;
    
  26.         background: url(../images/bullet.gif) no-repeat 5px 50%;
    
  27. }
    
  28.  
    
  29. #ja-col1 ul, #ja-col2 ul {
    
  30.         margin: 0;
    
  31. }
    
  32.  
    
  33. #ja-col1 ol, #ja-col2 ol {
    
  34.         margin-left: 5px;
    
  35. }
    
  36.  
    
  37. #ja-col1 .article_separator,
    
  38. #ja-col2 .article_separator {
    
  39.         display: none;
    
  40. }
    

Image Files

  • bullet.gif

Javascript Files

ja_purity/js/ja.rightcol.js

  1. //JS script for Joomla template
    
  2.  
    
  3. var JA_Collapse_Mod = new Class({
    
  4.  
    
  5.         initialize: function(myElements) {
    
  6.                 options = Object.extend({
    
  7.                         transition: Fx.Transitions.quadOut
    
  8.                 }, {});
    
  9.                 this.myElements = myElements;
    
  10.                 var exModules = excludeModules.split(',');
    
  11.                 exModules.each(function(el,i){exModules[i]='Mod'+el});
    
  12.                 myElements.each(function(el, i){
    
  13.                         el.elmain = $E('.jamod-content',el);
    
  14.                         el.titleEl = $E('h3',el);
    
  15.                         if(!el.titleEl) return;
    
  16.  
    
  17.                         if (exModules.contains(el.id)) {
    
  18.                                 el.titleEl.className = '';
    
  19.                                 return;
    
  20.                         }
    
  21.  
    
  22.                         el.titleEl.className = rightCollapseDefault;
    
  23.                         el.status = rightCollapseDefault;
    
  24.                         el.openH = el.elmain.getStyle('height').toInt();
    
  25.                         el.elmain.setStyle ('overflow','hidden');
    
  26.  
    
  27.                         el.titleEl.addEvent('click', function(e){
    
  28.                                 e = new Event(e).stop();
    
  29.                                 el.toggle();
    
  30.                         });
    
  31.  
    
  32.                         el.toggle = function(){
    
  33.                                 if (el.status=='hide') el.show();
    
  34.                                 else el.hide();
    
  35.                         }
    
  36.  
    
  37.                         el.show = function() {
    
  38.                                 el.titleEl.className='show';
    
  39.                                 var ch = el.elmain.getStyle('height').toInt();
    
  40.                                 new Fx.Style(el.elmain,'height',{onComplete:el.toggleStatus}).start(ch,el.openH);
    
  41.                         }
    
  42.                         el.hide = function() {
    
  43.                                 el.titleEl.className='hide';
    
  44.                                 var ch = (rightCollapseDefault=='hide')?0:el.elmain.getStyle('height').toInt();
    
  45.                                 new Fx.Style(el.elmain,'height',{onComplete:el.toggleStatus}).start(ch,0);
    
  46.                         }
    
  47.                         el.toggleStatus = function () {
    
  48.                                 el.status=(el.status=='hide')?'show':'hide';
    
  49.                                 Cookie.set(el.id,el.status,{duration:365});
    
  50.                         }
    
  51.  
    
  52.                         if(!el.titleEl.className) el.titleEl.className=rightCollapseDefault;
    
  53.                         if(el.titleEl.className=='hide') el.hide();
    
  54.                 });
    
  55.         }
    
  56. });
    
  57.  
    
  58. window.addEvent ('load', function(e){
    
  59.         var jamod = new JA_Collapse_Mod ($ES('.jamod'));
    
  60. });