Actions

J1.5

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

From Joomla! Documentation

< J1.5:Customising the JA Purity template
m (New page: {{stub}} <noinclude> Category:Beginners Category:JA Purity template Category:Tutorials </noinclude>)
 
m (Applied tutorial template and removed categories)
(7 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
{{stub}}
 
{{stub}}
<noinclude>
+
{{:Customising the JA Purity template/tutorialtemplate|index.php, template.css and bullet.gif|<pre>
[[Category:Beginners]]
+
    <location of template>/
[[Category:JA Purity template]]
+
        index.php
[[Category:Tutorials]]
+
        css/
</noinclude>
+
            template.css
 +
        images/
 +
            bullet.gif
 +
        js/
 +
            ja.rightcol.js
 +
</pre>}}
 +
==HTML and PHP Files==
 +
===ja_purity/index.php===
 +
<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>
 +
==CSS Files==
 +
===ja_purity/css/template.css===
 +
<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>
 +
==Image Files==
 +
* bullet.gif
 +
==Javascript Files==
 +
===ja_purity/js/ja.rightcol.js===
 +
<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>

Revision as of 14:19, 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, 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

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