J1.5:Customising the JA Purity template/right

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

HTML and PHP Files

ja_purity/index.php

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

CSS Files

ja_purity/css/template.css

/* LEFT COLUMN + RIGHT COLUMN
--------------------------------------------------------- */
#ja-col1 {
	float: left;
	width: 24.99%;
	padding-top: 10px;
	overflow: hidden;
}

#ja-col2 {
	float: right;
	width: 20%;
	overflow: hidden;
}

#ja-col1 table,
#ja-col2 table {
	border-collapse: collapse;
	border-spacing: 0;
}

#ja-col1 ul li,
#ja-col2 ul li {
	padding-left: 15px;
	margin: 0;
	background: url(../images/bullet.gif) no-repeat 5px 50%;
}

#ja-col1 ul, #ja-col2 ul {
	margin: 0;
}

#ja-col1 ol, #ja-col2 ol {
	margin-left: 5px;
}

#ja-col1 .article_separator,
#ja-col2 .article_separator {
	display: none;
}

Image Files

• bullet.gif

Javascript Files

ja_purity/js/ja.rightcol.js

//JS script for Joomla template

var JA_Collapse_Mod = new Class({

	initialize: function(myElements) {
		options = Object.extend({
			transition: Fx.Transitions.quadOut
		}, {});
		this.myElements = myElements;
		var exModules = excludeModules.split(',');
		exModules.each(function(el,i){exModules[i]='Mod'+el});
		myElements.each(function(el, i){
			el.elmain = $E('.jamod-content',el);
			el.titleEl = $E('h3',el);
			if(!el.titleEl) return;

			if (exModules.contains(el.id)) {
				el.titleEl.className = '';
				return;
			}

			el.titleEl.className = rightCollapseDefault;
			el.status = rightCollapseDefault;
			el.openH = el.elmain.getStyle('height').toInt();
			el.elmain.setStyle ('overflow','hidden');

			el.titleEl.addEvent('click', function(e){
				e = new Event(e).stop();
				el.toggle();
			});

			el.toggle = function(){
				if (el.status=='hide') el.show();
				else el.hide();
			}

			el.show = function() {
				el.titleEl.className='show';
				var ch = el.elmain.getStyle('height').toInt();
				new Fx.Style(el.elmain,'height',{onComplete:el.toggleStatus}).start(ch,el.openH);
			}
			el.hide = function() {
				el.titleEl.className='hide';
				var ch = (rightCollapseDefault=='hide')?0:el.elmain.getStyle('height').toInt();
				new Fx.Style(el.elmain,'height',{onComplete:el.toggleStatus}).start(ch,0);
			}
			el.toggleStatus = function () {
				el.status=(el.status=='hide')?'show':'hide';
				Cookie.set(el.id,el.status,{duration:365});
			}

			if(!el.titleEl.className) el.titleEl.className=rightCollapseDefault;
			if(el.titleEl.className=='hide') el.hide();
		});
	}
});

window.addEvent ('load', function(e){
	var jamod = new JA_Collapse_Mod ($ES('.jamod'));
});