Actions

J1.5

Difference between revisions of "Customising the JA Purity template/header/accessibility"

From Joomla! Documentation

< J1.5:Customising the JA Purity template‎ | header
m
Line 1: Line 1:
 
{{stub}}
 
{{stub}}
 
The original JA Purity template was provided from JoomlArt.com as a zip but the latest files have been installed along with Joomla.
 
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, XXXXX and XXXX, are in the following directories:<br />
+
The relevant files, XXXXX, ja.script.js and user-increase.png, user-decrease.png, user-reset.png, are in the following directories:<br />
 +
 
<pre>
 
<pre>
 
     templates/ja_purity
 
     templates/ja_purity
                 XXXXX.php
+
                 index.php
 +
                ja_templatetools.php
 
                 css/
 
                 css/
                     XXXXX.css
+
                     template.css
 +
                images/
 +
                    user-increase.png
 +
                    user-decrease.png
 +
                    user-reset.png
 +
                js/
 +
                    ja.script.js
 
</pre>
 
</pre>
  
Line 12: Line 20:
 
<pre>
 
<pre>
 
     templates/my_japurity
 
     templates/my_japurity
                 XXXXX
+
                 index.php
 +
                ja_templatetools.php
 
                 css/
 
                 css/
                     XXXXXX
+
                     template.css
 +
                images/
 +
                    user-increase.png
 +
                    user-decrease.png
 +
                    user-reset.png
 +
                js/
 +
                    ja.script.js
 
</pre>
 
</pre>
 
==HTML and PHP Files==
 
==HTML and PHP Files==
===ja_purity/XXXXX.php===
+
===ja_purity/index.php===
<source lang="php" line start="">
+
<source lang="php" line start="101">
 +
<ul class="accessibility">
 +
<li><a href="#ja-content" title="<?php echo JText::_("Skip to content");?>"><?php echo JText::_("Skip to content");?></a></li>
 +
<li><a href="#ja-mainnav" title="<?php echo JText::_("Skip to main navigation");?>"><?php echo JText::_("Skip to main navigation");?></a></li>
 +
<li><a href="#ja-col1" title="<?php echo JText::_("Skip to 1st column");?>"><?php echo JText::_("Skip to 1st column");?></a></li>
 +
<li><a href="#ja-col2" title="<?php echo JText::_("Skip to 2nd column");?>"><?php echo JText::_("Skip to 2nd column");?></a></li>
 +
</ul>
 +
</source>
 +
===ja_purity/index.php===
 +
<source lang="php" line start="131">
 +
<?php $tmpTools->genToolMenu(JA_TOOL_FONT, 'png'); ?>
 +
</source>
 +
===ja_purity/ja_templatetools.php===
 +
<source lang="php" line start="69">
 +
function genToolMenu($_array_tools=null, $imgext = 'gif'){
 +
if(!is_array($_array_tools)) $_array_tools = array($_array_tools);
 +
if(!$_array_tools) $_array_tools = array_keys($this->_params_cookie);
 +
if (in_array(JA_TOOL_FONT, $_array_tools)){//show font tools
 +
?>
 +
<ul class="ja-usertools-font">
 +
      <li><img style="cursor: pointer;" title="<?php echo JText::_('Increase font size');?>" src="<?php echo $this->templateurl();?>/images/user-increase.<?php echo $imgext;?>" alt="<?php echo JText::_('Increase font size');?>" id="ja-tool-increase" onclick="switchFontSize('<?php echo $this->template."_".JA_TOOL_FONT;?>','inc'); return false;" /></li>
 +
  <li><img style="cursor: pointer;" title="<?php echo JText::_('Default font size');?>" src="<?php echo $this->templateurl();?>/images/user-reset.<?php echo $imgext;?>" alt="<?php echo JText::_('Default font size');?>" id="ja-tool-reset" onclick="switchFontSize('<?php echo $this->template."_".JA_TOOL_FONT;?>',<?php echo $this->_tpl->params->get(JA_TOOL_FONT);?>); return false;" /></li>
 +
  <li><img style="cursor: pointer;" title="<?php echo JText::_('Decrease font size');?>" src="<?php echo $this->templateurl();?>/images/user-decrease.<?php echo $imgext;?>" alt="<?php echo JText::_('Decrease font size');?>" id="ja-tool-decrease" onclick="switchFontSize('<?php echo $this->template."_".JA_TOOL_FONT;?>','dec'); return false;" /></li>
 +
</ul>
 +
<script type="text/javascript">var CurrentFontSize=parseInt('<?php echo $this->getParam(JA_TOOL_FONT);?>');</script>
 +
<?php
 +
}
 +
}
 
</source>
 
</source>
 
==CSS Files==
 
==CSS Files==
===ja_purity/css/XXXXX.css===
+
===ja_purity/css/template.css===
<source lang="css" line start="">
+
<source lang="css" line start="1482">
 +
ul.accessibility {
 +
position: absolute;
 +
top: -100%;
 +
}
 +
 
 +
/*usertool*/
 +
ul.ja-usertools-font {
 +
font-size: 11px;
 +
position: absolute;
 +
top: 8px;
 +
right: 70px;
 +
}
 +
 
 +
ul.ja-usertools-font li {
 +
padding: 0;
 +
margin: 0;
 +
display: inline;
 +
background: none;
 +
}
 +
 
 
</source>
 
</source>
 
==Image Files==
 
==Image Files==
 +
* /images/user-increase.png
 +
* /images/user-decrease.png
 +
* /images/user-reset.png
 
==Javascript Files==
 
==Javascript Files==
===ja_purity/js/XXXXX.js===
+
===ja_purity/js/ja.script.js===
<source lang="javascript" line start="">
+
<source lang="javascript" line start="83">
 +
switchFontSize=function(ckname,val){
 +
var bd = $E('BODY');
 +
switch (val) {
 +
case 'inc':
 +
if (CurrentFontSize+1 < 7) {
 +
bd.removeClass('fs'+CurrentFontSize);
 +
CurrentFontSize++;
 +
bd.addClass('fs'+CurrentFontSize);
 +
}
 +
break;
 +
case 'dec':
 +
if (CurrentFontSize-1 > 0) {
 +
bd.removeClass('fs'+CurrentFontSize);
 +
CurrentFontSize--;
 +
bd.addClass('fs'+CurrentFontSize);
 +
}
 +
break;
 +
default:
 +
bd.removeClass('fs'+CurrentFontSize);
 +
CurrentFontSize = val;
 +
bd.addClass('fs'+CurrentFontSize);
 +
}
 +
Cookie.set(ckname, CurrentFontSize,{duration:365});
 +
}
 +
 
 
</source>
 
</source>
 
<noinclude>
 
<noinclude>

Revision as of 21:00, 24 June 2009

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, XXXXX, ja.script.js and user-increase.png, user-decrease.png, user-reset.png, are in the following directories:

    templates/ja_purity
                 index.php
                 ja_templatetools.php
                 css/
                     template.css
                 images/
                     user-increase.png
                     user-decrease.png
                     user-reset.png
                 js/
                     ja.script.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
                 ja_templatetools.php
                 css/
                     template.css
                 images/
                     user-increase.png
                     user-decrease.png
                     user-reset.png
                 js/
                     ja.script.js

HTML and PHP Files

ja_purity/index.php

  1. <ul class="accessibility">
    
  2. 	<li><a href="#ja-content" title="<?php echo JText::_("Skip to content");?>"><?php echo JText::_("Skip to content");?></a></li>
    
  3. 	<li><a href="#ja-mainnav" title="<?php echo JText::_("Skip to main navigation");?>"><?php echo JText::_("Skip to main navigation");?></a></li>
    
  4. 	<li><a href="#ja-col1" title="<?php echo JText::_("Skip to 1st column");?>"><?php echo JText::_("Skip to 1st column");?></a></li>
    
  5. 	<li><a href="#ja-col2" title="<?php echo JText::_("Skip to 2nd column");?>"><?php echo JText::_("Skip to 2nd column");?></a></li>
    
  6. </ul>
    

ja_purity/index.php

  1. 	<?php $tmpTools->genToolMenu(JA_TOOL_FONT, 'png'); ?>
    

ja_purity/ja_templatetools.php

  1. 	function genToolMenu($_array_tools=null, $imgext = 'gif'){
    
  2. 		if(!is_array($_array_tools)) $_array_tools = array($_array_tools);
    
  3. 		if(!$_array_tools) $_array_tools = array_keys($this->_params_cookie);
    
  4. 		if (in_array(JA_TOOL_FONT, $_array_tools)){//show font tools
    
  5. 		?>
    
  6. 		<ul class="ja-usertools-font">
    
  7. 	      <li><img style="cursor: pointer;" title="<?php echo JText::_('Increase font size');?>" src="<?php echo $this->templateurl();?>/images/user-increase.<?php echo $imgext;?>" alt="<?php echo JText::_('Increase font size');?>" id="ja-tool-increase" onclick="switchFontSize('<?php echo $this->template."_".JA_TOOL_FONT;?>','inc'); return false;" /></li>
    
  8. 		  <li><img style="cursor: pointer;" title="<?php echo JText::_('Default font size');?>" src="<?php echo $this->templateurl();?>/images/user-reset.<?php echo $imgext;?>" alt="<?php echo JText::_('Default font size');?>" id="ja-tool-reset" onclick="switchFontSize('<?php echo $this->template."_".JA_TOOL_FONT;?>',<?php echo $this->_tpl->params->get(JA_TOOL_FONT);?>); return false;" /></li>
    
  9. 		  <li><img style="cursor: pointer;" title="<?php echo JText::_('Decrease font size');?>" src="<?php echo $this->templateurl();?>/images/user-decrease.<?php echo $imgext;?>" alt="<?php echo JText::_('Decrease font size');?>" id="ja-tool-decrease" onclick="switchFontSize('<?php echo $this->template."_".JA_TOOL_FONT;?>','dec'); return false;" /></li>
    
  10. 		</ul>
    
  11. 		<script type="text/javascript">var CurrentFontSize=parseInt('<?php echo $this->getParam(JA_TOOL_FONT);?>');</script>
    
  12. 		<?php
    
  13. 		}
    
  14. 	}
    

CSS Files

ja_purity/css/template.css

  1. ul.accessibility {
    
  2. 	position: absolute;
    
  3. 	top: -100%;
    
  4. }
    
  5.  
    
  6. /*usertool*/
    
  7. ul.ja-usertools-font {
    
  8. 	font-size: 11px;
    
  9. 	position: absolute;
    
  10. 	top: 8px;
    
  11. 	right: 70px;
    
  12. }
    
  13.  
    
  14. ul.ja-usertools-font li {
    
  15. 	padding: 0;
    
  16. 	margin: 0;
    
  17. 	display: inline;
    
  18. 	background: none;
    
  19. }
    

Image Files

  • /images/user-increase.png
  • /images/user-decrease.png
  • /images/user-reset.png

Javascript Files

ja_purity/js/ja.script.js

  1. switchFontSize=function(ckname,val){
    
  2. 	var bd = $E('BODY');
    
  3. 	switch (val) {
    
  4. 		case 'inc':
    
  5. 			if (CurrentFontSize+1 < 7) {
    
  6. 				bd.removeClass('fs'+CurrentFontSize);
    
  7. 				CurrentFontSize++;
    
  8. 				bd.addClass('fs'+CurrentFontSize);
    
  9. 			}
    
  10. 		break;
    
  11. 		case 'dec':
    
  12. 			if (CurrentFontSize-1 > 0) {
    
  13. 				bd.removeClass('fs'+CurrentFontSize);
    
  14. 				CurrentFontSize--;
    
  15. 				bd.addClass('fs'+CurrentFontSize);
    
  16. 			}
    
  17. 		break;
    
  18. 		default:
    
  19. 			bd.removeClass('fs'+CurrentFontSize);
    
  20. 			CurrentFontSize = val;
    
  21. 			bd.addClass('fs'+CurrentFontSize);
    
  22. 	}
    
  23. 	Cookie.set(ckname, CurrentFontSize,{duration:365});
    
  24. }