Difference between revisions of "Customising the JA Purity template/right"
From Joomla! Documentation
< J1.5:Customising the JA Purity template
m |
m (Applied tutorial template and removed categories) |
||
(6 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
{{stub}} | {{stub}} | ||
− | + | {{:Customising the JA Purity template/tutorialtemplate|index.php, template.css and bullet.gif|<pre> | |
− | + | <location of template>/ | |
− | < | + | index.php |
− | + | css/ | |
− | + | template.css | |
− | + | images/ | |
− | + | bullet.gif | |
− | + | js/ | |
− | + | ja.rightcol.js | |
− | + | </pre>}} | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | </pre> | ||
==HTML and PHP Files== | ==HTML and PHP Files== | ||
− | ===ja_purity/ | + | ===ja_purity/index.php=== |
− | <source lang="php" line start=""> | + | <source lang="php" line start="194"> |
+ | <?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; ?> | ||
</source> | </source> | ||
==CSS Files== | ==CSS Files== | ||
− | ===ja_purity/css/ | + | ===ja_purity/css/template.css=== |
− | <source lang="css" line start=""> | + | <source lang="css" line start="1267"> |
+ | /* 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; | ||
+ | } | ||
</source> | </source> | ||
==Image Files== | ==Image Files== | ||
+ | * bullet.gif | ||
==Javascript Files== | ==Javascript Files== | ||
− | ===ja_purity/js/ | + | ===ja_purity/js/ja.rightcol.js=== |
− | <source lang="javascript" line start= | + | <source lang="javascript" line> |
+ | //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')); | ||
+ | }); | ||
</source> | </source> | ||
− | |||
− | |||
− | |||
− | |||
− |
Revision as of 15:19, 15 January 2011
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.
This article is a stub and needs to be expanded. If you can provide information or finish this article you're welcome to do so. Please remove this message afterwards or replace with {{inuse}} while making major edits. - Thank you. |
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[edit]
ja_purity/index.php[edit]
<?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[edit]
ja_purity/css/template.css[edit]
/* 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[edit]
- bullet.gif
Javascript Files[edit]
ja_purity/js/ja.rightcol.js[edit]
//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'));
});