Adding a Font Resizer to your Joomla Template PDF Print E-mail

Joomla Extensions Font Resizer

Before we start:  Important -- your CSS file fonts must be in % or EMs and not in Pixels (PX).  Not sure what percentage to use? -- go to http://www.pxtoem.com/ -- PXtoEM conversion made simple.

 

Relative units vs. absolute units

"For accessibility purposes, it is best to use relative units to specify font sizes. Browsers are more likely to allow the users to resize relatively-sized fonts than absolutely-sized fonts. Though there is some disagreement as to which units are "relative" and which ones are "absolute," in practical terms, the preferred units are percentages (%) and "ems" (em). Units best avoided for font size include points (pt), pixels (px), centimeters (cm), millimeters (mm), and inches (in)." - http://www.webaim.org/techniques/fonts/#font_size

Joomla Administration Panel -- CSS File

Open up your CSS file in the Joomla! Administration Panel.  Extensions >> Template Manager >> Select your Template >> Edit >> Edit CSS

Find the CSS file where all your fonts are located - e.g., 'template.css' - EDIT

I find it easier to copy the coding and use my own editor (HTMLKit) to do modifications.  That way, you can save the original CSS file and make a copy to work on.  To copy and paste into your html editor, press CTRL-A to select all, CTRL-C to copy from your Joomla CSS file; then go to your editor and create a new document, then press CTRL-V to past the content.

Change PX fonts to % 

Find all fonts with PX and replace with %.  For example: 12px change to 90%, that is assuming that you have changed your body font-size to 100%.

body {
 font-family: Tahoma, Arial, Verdana, sans-serif;
 margin: 0;
 padding: 0;
font-size: 100%;}

 

Grab all the new CSS changes from your editor -- CTRL-A to select all >> CTRL-C to copy from your editor

 

Go to your Joomla editor that is open in your Joomla Administration Panel >> CTRL-A to select all the 'old' unedited CSS; CTRL-V to paste the new coding.  Then rather that 'Save', select 'Apply' so that you can leave the editor window open and go to check your output in your Browser window.  Adjust your fonts if you find something that is not just right yet.  Once you are happy with the fonts, now you will add the font resizer.

  

Adding Font Resizer

Go to: http://www.undesign.com/au/font-resizer.html -- a Joomla 1.5 module download for a simple font resizer.  Download and save the zip file to your harddrive.  Go to the Extensions option in your Joomla Administration Panel and install the module.

 

If you have any problems, contact me directly and I'll try to walk you through the process personally.

 

 

 

 

 

 

Total Visitors

mod_vvisit_counterTo Date:1247347

Today: Apr 24, 2014