J1.5:Customising the JA Purity template/header/accessibility

From Joomla! Documentation
< J1.5:Customising the JA Purity template | header(Difference between revisions)
Jump to: navigation, search
m
m (Applied tutorial template and removed categories)
(2 intermediate revisions by 2 users not shown)
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.
+
{{:Customising the JA Purity template/tutorialtemplate|index.php, ja_templatetools.php, template.css, ja.script.js and user-increase.png, user-decrease.png, user-reset.png|<pre>
−
The relevant files, XXXXX and XXXX, are in the following directories:<br />
+
     <location of template>/
−
<pre>
+
        index.php
−
     templates/ja_purity
+
        ja_templatetools.php
−
                XXXXX.php
+
        css/
−
                css/
+
            template.css
−
                    XXXXX.css
+
        images/
−
</pre>
+
            user-increase.png
−
 
+
            user-decrease.png
−
If you've been following the [[Tutorial:Customising_the_JA_Purity_template|tutorial]] you can download a tutorial version of the template that installs to the following directory:<br/>
+
            user-reset.png
−
<pre>
+
        js/
−
    templates/my_japurity
+
            ja.script.js
−
                XXXXX
+
</pre>}}
−
                css/
+
−
                    XXXXXX
+
−
</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>
 
−
[[Category:Beginners]]
 
−
[[Category:JA Purity template]]
 
−
[[Category:Tutorials]]
 
−
</noinclude>
 

Revision as of 15:09, 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.
Quill icon.png
 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, ja_templatetools.php, template.css, ja.script.js and user-increase.png, user-decrease.png, user-reset.png, 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
        ja_templatetools.php
        css/
            template.css
        images/
            user-increase.png
            user-decrease.png
            user-reset.png
        js/
            ja.script.js

Contents

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. }
Retrieved from "http://docs.joomla.org/index.php?title=J1.5:Customising_the_JA_Purity_template/header/accessibility&oldid=35143"
Personal tools
Namespaces

Variants
Actions
Navigation
Joomla! Sites
Toolbox