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 | + | 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 | ||
− | + | index.php | |
+ | ja_templatetools.php | ||
css/ | 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 | ||
− | + | index.php | |
+ | ja_templatetools.php | ||
css/ | css/ | ||
− | + | 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/ | + | ===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/ | + | ===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/ | + | ===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 22:00, 24 June 2009
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, 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[edit]
ja_purity/index.php[edit]
<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>
ja_purity/index.php[edit]
<?php $tmpTools->genToolMenu(JA_TOOL_FONT, 'png'); ?>
ja_purity/ja_templatetools.php[edit]
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
}
}
CSS Files[edit]
ja_purity/css/template.css[edit]
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;
}
Image Files[edit]
- /images/user-increase.png
- /images/user-decrease.png
- /images/user-reset.png
Javascript Files[edit]
ja_purity/js/ja.script.js[edit]
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});
}