1. in the body tag, define a font size of 76%
Code: Select all
body {
font-size:76%;
}
Code: Select all
p {
font-size:1em;
}
1 and 2 are essential, 3 is for the perfectionists
Code: Select all
body {
font-size:76%;
}
Code: Select all
p {
font-size:1em;
}
Code: Select all
var prefsLoaded = false;
var defaultFontSize = 11;
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 * 1);
if(currentFontSize > 12){
currentFontSize = 12;
}else if(currentFontSize < 10){
currentFontSize = 10;
}
setFontSize(currentFontSize);
};
function setFontSize(fontSize){
var stObj = (document.getElementById) ? document.getElementById('content_area') : document.all('content_area');
document.body.style.fontSize = fontSize + 'px';
//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);
}
Excerpt from Joomla template tutorialThe font size is set to 76.1%. The reason for this is to try and get more consistant font sizes across browsers. All font sizes are then set in em. Having line-height:1.3em helps readbility. This means that the pages will be more accessible as the viewer will be able to resize the fonts to their own preference. This is discussed more at:
An experiment in typography at The Noodle Incident (Owen Briggs)
How come in FF the text in em is little and in IE big when I do this?compass wrote: You need the 76% AND everything needs to be in em's
I tried it on a live site yesterday...compass wrote: if you are previewing a site while it is offline I have seen this happen... no idea why
Code: Select all
<html xmlns="http://www.w3.org/1999/xhtml"; xmlns:v="urn:schemas-microsoft-com:vml" <?php if ($option=='com_google_maps') { echo " style=\"font-size:76%;\""; } ?> />
Code: Select all
<?php if ($option=='com_google_maps') { echo ""; } else { echo
"<script type=\"text/javascript\" language=\"javascript\" src=\"" . $mosConfig_live_site . "/templates/" . $mainframe->getTemplate() . "/js/md_stylechanger.js\"></script>"; } ?>
I have implemented all your html code, and copyed the .js file in to my template... I still can't get it to work... is it because:r0tt3n wrote: Perhaps the title of this forum header should be changed to "solved" ?
Hi,panamaspace wrote:
Fixed my HTML tag to the following:
Reason: When the javascript to resize is turned off, the text size is set to the largest possible. Not pretty. The php if statement checks whether the com_google_maps is active, and if it is, outputs a style on the html tag.Code: Select all
<html xmlns="http://www.w3.org/1999/xhtml"; xmlns:v="urn:schemas-microsoft-com:vml" <?php if ($option=='com_google_maps') { echo " style=\"font-size:76%;\""; } ?> />
Fixed my call to the resize javascript to:
Code: Select all
<?php if ($option=='com_google_maps') { echo ""; } else { echo "<script type=\"text/javascript\" language=\"javascript\" src=\"" . $mosConfig_live_site . "/templates/" . $mainframe->getTemplate() . "/js/md_stylechanger.js\"></script>"; } ?>