Tiện ích user tool trong Joomla Template JoomArt

Thay đổi cỡ chữ, màu nền, độ rộng trang trong Joomla Template JoomArt. Chèn mã HTML vào vị trí bạn muốn Tool này xuất hiện.
Mã HTML:

<div id="ja-usertoolswrap">
<div id="ja-usertools">
<span class="ja-usertools">
<div id="fontsize">
 <script type="text/javascript">
 //<![CDATA[
 document.write('<h3><?php echo JText::_('FONTSIZE'); ?></h3><p class="fontsize">');
 document.write('<a href="/cntt/index.php" title="<?php echo JText::_('Increase size'); ?>" onclick="changeFontSize(2); return false;" class="larger"><?php echo JText::_('bigger'); ?></a><span class="unseen"> </span>');
 document.write('<a href="/cntt/index.php" title="<?php echo JText::_('Decrease size'); ?>" onclick="changeFontSize(-2); return false;" class="smaller"><?php echo JText::_('smaller'); ?></a><span class="unseen"> </span>');
 document.write('<a href="/cntt/index.php" title="<?php echo JText::_('Revert styles to default'); ?>" onclick="revertStyles(); return false;" class="reset"><?php echo JText::_('reset'); ?></a></p>');
 //]]>
 </script>
 </div>
<a onclick="setScreenType('narrow');return false;" href="#Narrow">
</a>
<a onclick="setScreenType('wide');return false;" href="#Wide">
</a>
<a onclick="setScreenType('auto');return false;" href="#Auto">
</a>
<a onclick="changeFontSize(1); return false;" href="#Increase">
</a>
<a onclick="changeFontSize(-1); return false;" href="#Decrease">
</a>
<a onclick="revertStyles(3); return false;" href="#Default">
<img id="ja-tool-reset" alt="Default font size" src="/images/user-reset.gif" title="Default size"/>
</a>
</span>
<script type="text/javascript">

var curtool = document.getElementById('ja-tool-wide');

</script>
<div id="ja-search">
</div>
</div>
</div>

Mã Javascript lưa vào file ja.script.js:

<script type="text/javascript">
var currentFontSize = 4;

function revertStyles(fontsize){
	currentFontSize = fontsize;
	changeFontSize(0);
}
function changeFontSize(sizeDifference){
	//get css font size
	var rule = getRuleByName("body.fs" + (currentFontSize + sizeDifference));
	if (rule){
		document.body.style.fontSize = rule.style.fontSize;
		currentFontSize = currentFontSize + sizeDifference;
		createCookie("ja_pollux_ja_font", currentFontSize, 365);
	}
	return;
	
};

function getRuleByName(ruleName){
	for (i=0; i<document.styleSheets.length; i++){
		var style = document.styleSheets[i];
		var rules = style.cssRules?style.cssRules:style.rules;
		if (rules){
			for (j = 0; j<rules.length; j++){
				if (rules[j].selectorText.trim().toUpperCase() == ruleName.trim().toUpperCase()){
					return rules[j];
				}
			}
		}
	}
	return null;
}

function setActiveStyleSheet(title) {
	createCookie("ja_pollux_ja_color", title, 365);
	window.location.reload();
	return;

  var i, a, main, arr;
  arr = document.getElementsByTagName("link");
  for(i=0; (a = arr[i]); i++) {
  	var ltitle = a.getAttribute("title");
    if(a.getAttribute("rel").indexOf("style") != -1 && ltitle) {
      a.disabled = true;
      if(ltitle == title) a.disabled = false;
    }
  }
  createCookie("ja_pollux_ja_color", title, 365);
}

function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

function setScreenType(screentype){
	bclass = document.body.className.trim();
	
	if (bclass.indexOf(' ') > 0){
		bclass = bclass.replace(/^\w+/,screentype);
	}else{
		bclass = screentype + ' ' + bclass;
	}
	
	document.body.className = bclass;
	createCookie("ja_pollux_ja_screen", screentype, 365);
}

String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g, ""); };

function changeToolHilite(oldtool, newtool) {
	if (oldtool != newtool) {
		if (oldtool) {
			oldtool.src = oldtool.src.replace(/-hilite/,'');
		}
		newtool.src = newtool.src.replace(/.gif$/,'-hilite.gif');
	}
}

//addEvent - attach a function to an event
function addEvent(obj, evType, fn){ 
 if (obj.addEventListener){ 
   obj.addEventListener(evType, fn, false); 
   return true; 
 } else if (obj.attachEvent){ 
   var r = obj.attachEvent("on"+evType, fn); 
   return r; 
 } else { 
   return false; 
 } 
}

</script>