DISCUSSION: CSS Text/Font Resizing (A+ A-) on Joomla Template

[buddhaboa]

On the Joomla template they have this nice ability to resize text by clicking
A+  A-  Reset function in the upper right hand side of the header.

How does this work is a text editor like MosCE is used and the text is hardcoded in the editor to be Veranda 9pt?  Does the CSS text sizing function override it or will the text remain forever 9pt?

[eike]

Styles applied with inline-styles or font-tags will stay, styles applied by classes in a style sheet will change.

-- eike

[darkchild]

Does anyone have the addon to actually implement text resizing as seen on the joomla.org. I have searched these forums and whilst people have discussed this, I haven't found the addon anywhere.

p.s thanx in advance

[eike]

Easiest way is to steal the Javascript-File with the Styleswitcher:

http://forum.joomla.org/Themes/joomla/m ... changer.js

and include it in your template.

This implementation is extremly generic, so copyright shouldn't be an issue.

Then include some links in your template with the necessary Javascript event handlers:

Code: Select all

<a href="index.php" title="Increase size" onclick="changeFontSize(1);return false;">
larger
</a>

<a href="index.php" title="Decrease size" onclick="changeFontSize(-1);return false;">
smaller
</a>

<a href="index.php" title="Revert styles to default" onclick="revertStyles(); return false;">
set default
</a>

Or you may use alternate style sheets as described here:

http://www.alistapart.com/articles/alternate/

A Google search for "Javascript Style Switcher" should bring up some more ways to do this.

-- eike

[darkchild]

Thanks a mil, buddy. Implemented it and its working fine.

Easiest way is to steal the Javascript-File with the Styleswitcher:

http://forum.joomla.org/Themes/joomla/m ... changer.js

and include it in your template.

This implementation is extremly generic, so copyright shouldn't be an issue.

Then include some links in your template with the necessary Javascript event handlers:

Code: Select all

<a href="index.php" title="Increase size" onclick="changeFontSize(1);return false;">
larger
</a>

<a href="index.php" title="Decrease size" onclick="changeFontSize(-1);return false;">
smaller
</a>

<a href="index.php" title="Revert styles to default" onclick="revertStyles(); return false;">
set default
</a>

Or you may use alternate style sheets as described here:

http://www.alistapart.com/articles/alternate/

A Google search for "Javascript Style Switcher" should bring up some more ways to do this.

-- eike

[buddhaboa]

Hi Eike,

does the md_stylechanger automatically add the nice Text A+ and A- buttons as found on joomla.com?

Easiest way is to steal the Javascript-File with the Styleswitcher:

http://forum.joomla.org/Themes/joomla/m ... changer.js

and include it in your template.

This implementation is extremly generic, so copyright shouldn't be an issue.

Then include some links in your template with the necessary Javascript event handlers:

Code: Select all

<a href="index.php" title="Increase size" onclick="changeFontSize(1);return false;">
larger
</a>

<a href="index.php" title="Decrease size" onclick="changeFontSize(-1);return false;">
smaller
</a>

<a href="index.php" title="Revert styles to default" onclick="revertStyles(); return false;">
set default
</a>

Or you may use alternate style sheets as described here:

http://www.alistapart.com/articles/alternate/

A Google search for "Javascript Style Switcher" should bring up some more ways to do this.

-- eike

[eike]

Hi Eike,

does the md_stylechanger automatically add the nice Text A+ and A- buttons as found on joomla.com?

No, these are small images. Create some small images with ++ and -- signs and put them between the anchor tags:

Code: Select all

<a href="index.php" title="Increase size" onclick="changeFontSize(1);return false;">
<img src="imagewithplussign.png" alt="">
</a>

...

-- eike

[venus]

my problem is size too small for someone as 45 years old up. I need some one help me to have site font  A+ A- Reset, Please Recommend.

Rgd.
venus

[fierce12205]

http://forum.joomla.org/index.php/topic ... 85252.html

[venus]

i'm try, Thk

[r0tt3n]

Perhaps the title of this forum header should be changed to "solved" ?

[guilliam]

.



[ MODERATOR NOTE: thread to be moved to the FAQ's ]



.

[venus]

not 100% how to do  :-*

[pattaya]

Hi there,

This is content of the .js file I'm not sure I understand what you mean by the following instruction...what file and in what location is it reffering to?



p 5: Do all of the following:

Replace ____1____ with the location in your template folder where you saved the .js file
Replace ____2____ with the name of your A+ image
Replace ____3____ with the name of your A- image
Replace ____4____ with the name of your Reset image

Code: Select all

var prefsLoaded = false;
var defaultFontSize = 76;
var currentFontSize = defaultFontSize;

function revertStyles(){

	currentFontSize = defaultFontSize;
	changeFontSize(0);

}

function toggleColors(){
	if(currentStyle == "White"){
		setColor("Black");
	}else{
		setColor("White");
	}
}

function changeFontSize(sizeDifference){
	currentFontSize = parseInt(currentFontSize) + parseInt(sizeDifference * 5);

	if(currentFontSize > 100){
		currentFontSize = 100;
	}else if(currentFontSize < 60){
		currentFontSize = 60;
	}

	setFontSize(currentFontSize);
};

function setFontSize(fontSize){
	var stObj = (document.getElementById) ? document.getElementById('content_area') : document.all('content_area');
	document.body.style.fontSize = fontSize + '%';
	
	//alert (document.body.style.fontSize);
};


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 readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
};

window.onload = setUserOptions;

function setUserOptions(){
	if(!prefsLoaded){

		cookie = readCookie("fontSize");
		currentFontSize = cookie ? cookie : defaultFontSize;
		setFontSize(currentFontSize);
		
		prefsLoaded = true;
	}

}

window.onunload = saveSettings;

function saveSettings()
{
  createCookie("fontSize", currentFontSize, 365);
}

[translatum]

I have tried to implement this, and when I have no images only the text "larger/smaller" changes. Is there something I need to do in my stylesheet so that it applies to body text size for example?

http://www.nonsmokersclub.com/


Here is the style sheet

Code: Select all

/* SITE LAYOUT */
body {
	margin: 0;
	padding: 0;
	color: #353535;
	background: #FFFFFF;
	font: 11px Arial, Helvetica, sans-serif;
}

body#bd {
	margin: 10px 0;
	background: #585C68;
	text-align: center;
}

#container {
	width: 740px!important;
	width: 760px;
	margin: 0 auto;
	padding: 0 10px;
	background: url(../images/container-bg.gif) #FFFFFF;
	text-align: left;
}

#topnav {
	width: 740px!important;
	width: 760px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	padding: 0 10px 10px;
	background: url(../images/topnav-bg.gif) repeat-x bottom left #585C68;
	font-size: 12px;
	text-align: left;
}

#header {
	width: 100%;
	position: relative;
}

h1.header-logo {
	font-size: 20px;
	margin: 0;
	padding: 4px 10px;
	background: url(../images/logo.gif) no-repeat 10px 4px;
	height: 40px!important;
	height: 48px;
	z-index: 1;
}

h1.header-logo img {
	visibility: hidden;
}

#main {
	width: 100%;
	position: relative;
}

#leftcol {
	width: 20%;
	float: left;
	margin: 12px 26px 12px 12px;
	display: inline;
	position: relative;
}

#content {
	float: left;
	width: 73%;
	margin: 12px 0 0;
	position: relative;
	clear: right;
}

#footer {
	padding: 12px 6px 6px 0;
	color: #ABABAB;
	background: #353535;
	clear: both;
	text-align: left;
	margin-top: 12px;
}

#copyright {
	padding: 6px 12px 0;
}

#botshad {
	width: 740px!important;
	width: 760px;
	padding: 0 10px;
	margin: 0 auto;
	background: url(../images/bot-shadow.gif) repeat-x bottom left #585C68;
	height: 16px;
}

/* NAVIGATION */
#topnav ul, #footer ul {
	margin: 0;
	padding: 0;
}

#topnav li {
	display: inline;
	background: none;
	padding: 0;
}

#footer li {
	display: inline;
	line-height: normal;
	background: none;
	padding: 0;
}

ul#mainlevel li, ul#mainlevel-nav li {
	padding: 0;
	margin: 0;
	background: none;
}

#topnav a {
	border-right: 1px solid #585C68;
	padding: 0 20px 11px 1px;
	color: #E6E6E6;
	font-weight: bold;
}

#topnav a:hover, #topnav a:active {
	color: #FFFFFF;
	background: url(../images/topnav-bg-2.gif) repeat-x bottom left;
	text-decoration: none;
}

#topnav a#active_menu-top {
	color: #FFFFFF;
	background: url(../images/topnav-bg-2.gif) repeat-x bottom left;
	text-decoration: none;
}

#footer a {
	padding: 0 12px;
	border-right: 1px solid #585C68;
	color: #CCCCCC;
}

#footer a:hover, #footer a:active {
	color: #FFFFFF;
}

#leftcol a.mainlevel {
	padding-left: 12px;
	background: url(../images/arrow.png) no-repeat 0 5px;
}

a.sublevel {
	padding-left: 3px;
}

a.sublevel#active_menu {
	color: #FF6633;
	text-decoration: none;
}

/* LINKS */
a {
	color: #255EA8;
	text-decoration: none;
}

a:hover, a:active {
	color: #B91919;
	text-decoration: underline;
}

a.pagenav {
	font-weight: normal;
}

a.readon {
	padding-right: 6px;
	display: block;
	color: #B91919;
	text-decoration: none;
	text-align: right;
}

a.readon:hover, a.readon:active {
	padding-right: 0;
	color: #B91919;
	text-decoration: none;
}

#user-bar a {
	padding: 0 0 0 4px;
	background: none!important;
}

#spotlight a, #spotlight-1 a, #spotlight-2 a {
	color: #FFFFFF;
	text-decoration: underline;
}

#copyright a {
	padding: 0;
	border: none;
}

/* GENERAL */
textarea {
	padding-left: 2px;
	font: 11px/1.3em Arial, sans-serif;
}

th {
	font-weight: bold;
	font-size: 11px;
	text-align: right;
}

td {
	font-size: 12px;
}

fieldset {
	width: 538px;
	border: 0;
	margin: 0;
	padding: 6px 0 0 0;
	background: url(../images/seperator.gif) repeat-x top left;
}

fieldset a {
	font-weight: bold;
}

form {
	margin: 0;
	padding: 0;
}

h1 {
	margin: 12px 0;
	font-size: 16px;
	color: #666666;
}

h2 {
	margin: 12px 0;
	font-size: 14px;
	color: #666666;
}

h4 {
	margin: 12px 0;
	font-size: 12px;
	font-weight: bold;
	color: #666666;
}

hr {
	border-top: 1px solid #D3CCC2;
	border-right: 0;
	border-left: 0;
	border-bottom: 0;
	height: 1px;
}

input {
	margin-bottom: -1px;
	font: 11px Arial, sans-serif;
}

p {
	margin: 12px 0;
}

select {
	font: 11px Arial, sans-serif;
}

ul {
	margin: 12px;
	padding: 0;
	list-style: none;
}

ul li {
	padding-left: 12px;
	background: url(../images/arrow.png) no-repeat 0 6px;
	line-height: 140%;
}

ol {
	margin: 12px auto;
}

/* JOOMLA STYLE */
div.moduletable {
	width: auto!important;
	width: 100%;
	margin-bottom: 18px;
}

div.moduletable h3 {
	margin: 0 0 6px;
	border-top: 1px solid #F2F2F2;
	border-bottom: 1px solid #F2F2F2;
	color: #666666;
	background: url(../images/h3-bg.gif) #F2F2F2;
	font-size: 16px;
	font-weight: bold;
}

div.moduletable td {
	padding: 3px 0!important;
}

table.contentpaneopen td, table.contentpane td {
	padding: 0 2px 0 0;
	line-height: 140%;
}

table.contentpaneopen, table.contentpane, table.blog {
	width: auto!important;
	border-collapse: collapse;
	border-spacing: 0px;
}

table.moduletable {
	width: 100%;
	background: #FFFFFF;
}

table.moduletable th {
	color: #DC9B44;
	background: none;
	font-weight: bold;
	font-size: 18px;
}

.adminform textarea {
	width: 540px!important; /*Control the Frontend Editor area width*/
}

.adminform textarea.inputbox {
	width: 440px!important; /*Control the Frontend Editor area width*/
}

table.polls {
	padding: 0;
	width: 100%;
	text-align: left;
}

table.pollstableborder {
	padding: 0;
	width: 100%;
	text-align: left;
}

#content table.pollstableborder {
	width: 540px!important;
	text-align: left;
	border: none;
}

table.pollstableborder td {
	padding: 2px 4px!important;
}

table.pollstableborder img {
	vertical-align: middle;
	margin: 4px 4px 4px 0;
}

table.searchintro {
	margin: 10px 0;
	width: 100%;
	background: #F2F2F2;
}

table.searchintro td {
	padding: 0 2px!important;
}

td.buttonheading {
	padding-left: 5px!important;
}

table.contenttoc {
	border: 1px solid #666666;
	margin: 0 0 10px 10px;
	width: 150px;
	background: #F2F2F2;
}

table.contenttoc th {
	padding: 4px 6px;
	background: #666666;
	color: #FFFFFF;
}

table.contenttoc td {
	padding: 1px 6px 1px 16px;
	background: url(../images/arrow.png) no-repeat 5px 7px;
}

.blog_more {
	margin: 10px 0;
	padding: 3px;
}

.button {
	padding: 1px 4px 1px 4px;
	border: 1px solid #CCCCCC;
	margin-bottom: 2px;
	background: #585C68;
	color: #FFFFFF;
	font: 11px Arial, sans-serif;
}

.back_button {
	margin-top: 12px;
	text-align: right;
	display: block;
	width: 100%;
}

.category {
	font-weight: bold;
	font-size: 12px;
}

.code, pre {
	border: 1px solid #F0EEDE;
	width: auto;
	padding: 6px;
	background: #F7F6EE;
	font: 11px Arial, sans-serif;
}

.componentheading {
	padding-bottom: 2px;
	margin-bottom: 12px;
	color: #255EA8;
	background: url(../images/seperator.gif) repeat-x bottom left;
	font-size: 20px;
	font-weight: bold;
}

.contentdescription {
	padding: 0 0 12px!important;
	height: auto;
}

.contentheading {
	color: #666666;
	font-size: 16px;
	font-weight: bold;
}

.createdate {
	color: #666666;
	font-weight: bold;
	padding-bottom: 12px!important;
}

.error {
	color: #B91919;
}

.highlight {
	font-weight: bold;
}

.inputbox {
	padding-left: 2px;
	margin-bottom: 1px;
	font: 11px Arial, sans-serif;
}

.message {
	color: #DE9C31;
	font-weight: bold;
	font-size: 12px;
}

.modifydate {
	color: #666666;
	height: 20px;
}

.moduletable {
	padding: 0;
}

.mosimage {
	padding: 0;
	margin-right: 5px;
}

.mosimage img {
	margin: 0 6px 0 0!important;
	margin: 0 0 0 -6px;
	border: 2px solid #EFEFEF;
}

.mosimage_caption {
	margin-top: 2px;
	color: #999999;
}

.pagenav {
	padding: 2px;
}

.pagenav_prev a, .pagenav_next a {
	color: #666666;
}

.pagenav_prev a:hover, .pagenav_prev a:active, .pagenav_next a:hover, .pagenav_next a:active {
	color: #B91919;
	text-decoration: none;
}

.pagenavbar {
	padding-left: 16px;
	background: url(../images/pages.gif) no-repeat center left;
	font-weight: bold;
}

.pagenavcounter {
	padding: 0 16px 10px 16px;
	color: #666666;
	background: url(../images/pages.gif) no-repeat 0 3px;
	font-weight: bold;
}

tr.sectiontableentry1 td {
	padding: 3px 4px;
}

tr.sectiontableentry2 td {
	padding: 3px 4px;
	background: #F2F2F2;
}

.sectiontableheader {
	padding: 3px 4px!important;
	border-top: 4px solid #FFFFFF;
	background: #666666;
	color: #FFFFFF;
	font-weight: bold;
}

.sectiontableheader a, .sectiontableheader a:hover {
	color: #FFFFFF;
}

.sectiontablefooter {
	padding-bottom: 3px!important;
	background: url(../images/seperator.gif) repeat-x 0 90%;
	height: 20px;
}

.small {
	color: #666666;
}

/* PATHWAY HACKED */
#pathway {
	color: #FFFFFF;
	font-size: 0%;
	line-height: normal!important;
	line-height: 0%;
}

#pathway img {
	visibility: hidden;/* DO NOT SHOW PATHWAY DEFAULT ARROW */
}

#pathway a {
	padding-right: 10px;
	background: url(../images/arrow-off.gif) no-repeat 100% 50%;
	font-size: 11px!important;
}

#pathway a:hover, #pathway a:active {
	background: url(../images/arrow-on.gif) no-repeat 100% 50%;
	text-decoration: none;
}

#search {
	float: right;
	padding: 6px 16px 6px;
	background: url(../images/h3-bg.gif) repeat-y center right;
	position: absolute;
	top: 8px;
	right: 0;
}

.search {
	padding-left: 16px;
	background: url(../images/search-icon.gif) no-repeat center left;
}

/* MIS. */
#user-bar {
	position: absolute;
	right: 12px;
	top: 0;
	height: 10px;
}

#user-bar li, #user-bar ul {
	padding: 0;
	margin: 0;
}

#spotlight {
	background: #76B428;
	color: #FFFFFF;
	text-align: right;
	border-bottom: 1px solid #999999;
	padding: 12px 0; 
}

#spotlight div {
	padding: 0;
	margin: 0;
}

#spotlight h3 {
	margin: 0 100px 6px 0;
	border: none;
	color: #FFFFFF;
	background: none;
	font-size: 16px;
}

#spotlight table {
	background: url(../images/spotlight-bg.gif) repeat-y top left #83BD3B;
	color: #FFFFFF;
	text-align: right;
}

#spotlight td {
	padding: 8px 100px 8px 60px!important;
}

#spotlight-1 {
	width: 262px!important;
	width: 264px;
	background: #B91919;
	color: #FFFFFF;
	float: left;
	border: 1px solid #C6C6C6;
}

#spotlight-1 div {
	padding: 6px 12px;
	margin: 0;
	background: url(../images/spotlight-bg-red.gif) repeat-y top left #C12E2E;
}

#spotlight-1 h3 {
	background: #B91919;
	color: #FFFFFF;
	border: none;
	margin: -6px -12px 6px -6px;
	padding: 6px;
}

#spotlight-2 {
	width: 262px!important;
	width: 264px;
	background: #255EA8;
	color: #FFFFFF;
	float: right;
	border: 1px solid #C6C6C6;
}

#spotlight-2 div {
	padding: 6px 12px;
	margin: 0;
	background: url(../images/spotlight-bg-blue.gif) repeat-y top left #386DB2;
}

#spotlight-2 h3 {
	background: #255EA8;
	color: #FFFFFF;
	border: none;
	margin: -6px -12px 6px -6px;
	padding: 6px;
}

#leftcol ul {
	padding: 0;
	margin: 0;
}

body.contentpane {
	margin: 12px;
}

#spotlight .article_seperator {
	display: none;
}

.article_seperator {
	display: block;
	background: url(../images/seperator.gif) repeat-x top left;
}

.clearfix:after {
	clear: both;
	display: block;
	content: ".";
	height: 0;
	visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

[translatum]

I did find a way by adding the following, the only problem is that the change of size is not remembered when changing page...

Code: Select all

div, p, table, td, th {
	font-size: 1em;
	color: #333;

I could not make the heading style though increase:

Code: Select all

.contentheading {
	color: #666666;
	font-size: 15px;
	font-weight: bold;

When I tried this:

Code: Select all

div, p, table, td, th, .contentheading {
	font-size: 1em;
	color: #333;

[gravesend46]

Is there a way to get this working on an SMF forum only - without Joomla installed (bit of a cheeky request on a Joomla forum, I know!). I tried to install as per the instructions but it didn't work.

[guilliam]

Is there a way to get this working on an SMF forum only - without Joomla installed (bit of a cheeky request on a Joomla forum, I know!). I tried to install as per the instructions but it didn't work.

im figuring out how to make this work with SMF also which is wrapped via joomla-smf.

on your second concern, it works for me.. check the site show case here: http://forum.joomla.org/index.php/topic,30461.0.html

check back on this thread on how or where you went wrong.

- g

[magsglass]

I recognize that there are some of you who are sort of scratching your heads wondering how to get from where your site is now to where joomla.org's is.  So for those of you wanting it layed out all the way, here's a more detailed instruction set that summarizes and extends what has already been said through the course of this thread: ~snip~

This was awesome!  Thank you, r0tt3n!

~Mag

[cvc505]

I am trying to implement this in the solarflareII template, I can get the A+, A- and reset button to appear, and when they are clicked on they seem to do something but I am not able to get the text to resize. even though the JS script is in the root of the template/solarflare  folder. Any suggestions?

[guilliam]

try yo check solarflares css if it has fixed fonts sizes like 12px etc.. there should be no fixed font sizes in the css.

- g

[GraeSmith]

I am trying to implement this in the solarflareII template, I can get the A+, A- and reset button to appear, and when they are clicked on they seem to do something but I am not able to get the text to resize. even though the JS script is in the root of the template/solarflare  folder. Any suggestions?

I seem to be having exactly the same problem.  However, I've removed all the absolute foxt-sizes, but it still doesn't work.  Is there an example of the css we can use?  Its got to be something really simple that I'm doing wrong as everything else looks to be in place and ready to work!

Thanks.

[guilliam]

try this instead:

1.

Code: Select all

<script type="text/javascript" language="javascript" src="<?php echo $mosConfig_live_site;?>/templates/TEMPLATE_NAME_HERE/stylechanger.js"></script>

place the stylechanger.js in the top of the template folder where the index.php and templateDetails.xml is located.

2. try making the "div, p, table, td, th" on the same class.


- g

[GraeSmith]

try this instead:.....

......2. try making the "div, p, table, td, th" on the same class.


- g

So I have to create a new class defining all these?  Sorry and thanks for trying, but its a steep learning curve and probably too steep for this sort of forum.

[Joomlawebber]

First step to do is have the right path to the .js file in your templates index.php file.

I have created a folder called js, where i put in all my javascripts.
That way it easier to manage (for me)

Calling the javascript i do like this:

/templates/yourtemplatename/js/textstyleswitcher.js">

Besides that i have in my css document stated that default font size is to be 80%, and in the rest of the css i use ems, and that is working for me.

If you need any heklp, i woud gladly help yo set it up

/K

[guilliam]

try this instead:.....

......2. try making the "div, p, table, td, th" on the same class.


- g

So I have to create a new class defining all these?  Sorry and thanks for trying, but its a steep learning curve and probably too steep for this sort of forum.

basically, YES. should look like this:

Code: Select all

td, tr, p, div {
  font-family       : Arial, Helvetica, sans-serif;
  color             : #666666;
}

- g

[guilliam]

not 100% how to do  :-*

its right in here sir/mam: http://forum.joomla.org/index.php/topic,36474.0.html

further question can be done here: http://forum.joomla.org/index.php/topic,10264.0.html

- g

[shaikat]

Hi, i tried making this work, i have included the javascript link (the .js file link) in between the HEAD tags, and applied the following code (did nt use images)
but when i click the larger or smaller link, only the font size of these 3 links (bigger, smaller and set default) gets changed, not the whole page.

im not sure what to do, can anyone help me on this please.
thanks in advance.

Code: Select all

<a href="index.php" title="Increase size" onclick="changeFontSize(1);return false;">
larger
</a>

<a href="index.php" title="Decrease size" onclick="changeFontSize(-1);return false;">
smaller
</a>

<a href="index.php" title="Revert styles to default" onclick="revertStyles(); return false;">
set default
</a>

[guilliam]

1. try making a call to a separate .js file and dont place it on the head. as per the instruction given

- g

[shaikat]

thanks for the reply g

just to let you know, i put the following code -

Code: Select all

<script type="text/javascript" language="javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/[b]md_stylechanger.js[/b]"></script>
<a href="index.php" title="Increase size" onclick="changeFontSize(1);return false;">larger</a>

and so on ..
i put the .js file in the same directory where the index.php file is, in the template folder (the template that is set to default)
and the code is placed in the index.php file of that template (do i need to place in some specific place ?)

the thing is, the font size of the links are changing, but the page remains the same
im not an expert in these stuffs, so please dont mind my ignorance