J1.5

Customising the JA Purity template/right

< J1.5:Customising the JA Purity template

The "J1.5" namespace is an archived namespace. This page contains information for a Joomla! version which is no longer supported. It exists only as a historical reference, it will not be improved and its content may be incomplete and/or contain broken links.

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

HTML and PHP Files

ja_purity/index.php

194 		<?php if ($this->countModules('right')): ?>
195 		<!-- BEGIN: RIGHT COLUMN -->
196 		<div id="ja-col2">
197 			<jdoc:include type="modules" name="right" style="jarounded" />
198 		</div><br />
199 		<!-- END: RIGHT COLUMN -->
200 		<?php endif; ?>

CSS Files

ja_purity/css/template.css

1267 /* LEFT COLUMN + RIGHT COLUMN
1268 --------------------------------------------------------- */
1269 #ja-col1 {
1270 	float: left;
1271 	width: 24.99%;
1272 	padding-top: 10px;
1273 	overflow: hidden;
1274 }
1275 
1276 #ja-col2 {
1277 	float: right;
1278 	width: 20%;
1279 	overflow: hidden;
1280 }
1281 
1282 #ja-col1 table,
1283 #ja-col2 table {
1284 	border-collapse: collapse;
1285 	border-spacing: 0;
1286 }
1287 
1288 #ja-col1 ul li,
1289 #ja-col2 ul li {
1290 	padding-left: 15px;
1291 	margin: 0;
1292 	background: url(../images/bullet.gif) no-repeat 5px 50%;
1293 }
1294 
1295 #ja-col1 ul, #ja-col2 ul {
1296 	margin: 0;
1297 }
1298 
1299 #ja-col1 ol, #ja-col2 ol {
1300 	margin-left: 5px;
1301 }
1302 
1303 #ja-col1 .article_separator,
1304 #ja-col2 .article_separator {
1305 	display: none;
1306 }

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 });
Advertisement