Support Joomla!

1.5 Template Project

The Joomla! Documentation Working Group is running a project to develop detailed reference and tutorial material on Joomla! 1.5 templates.  There is a project page on the documentation wiki where you can see the work in progress and help us by contributing your knowledge.

Who's Online

We have 69 guests online

Help Site License

The Joomla! Help Site content is copyright © 2005 - 2008 by the individual contributors and can be used in accordance with the Creative Commons License, Attribution NonCommercial ShareAlike 2.5. Some parts of this website may be subject to other licenses.
Home arrow FAQs

CSS Text/Font Resizing (A+ A-) on Joomla Template
Author(s):r0tt3nExperience level:Intermediate
Contributors:Joomla! version:1.0
Date added:Friday, 18 May 2007Date last changed:Friday, 18 May 2007
 
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:

Step 1 - download joomla.org's font style switcher file ( http://forum.joomla.org/Themes/joomla/md_stylechanger.js )
Step 2 - put that file somewhere in the folder of the template you are using
Step 3 - put A+, A-, and Reset images in your template's image folder
Step 4 - paste the following code snippet somewhere in your template's index.php file

<script type="text/javascript" language="javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/____1____"></script>
<a href="index.php" title="Increase size" onclick="changeFontSize(1);return false;">
<img src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/images/____2____" alt="" border="0" />
</a>
<a href="index.php" title="Decrease size" onclick="changeFontSize(-1);return false;">
<img src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/images/____3____" alt="" border="0" />
</a>
<a href="index.php" title="Revert styles to default" onclick="revertStyles(); return false;">
<img src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/images/____4____" alt="" border="0" />
</a>

Step 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

Step 6: Do one of the following:
  • Bask in the awesomeness that is session font resizing
  • Start figuring out why the buttons do nothing (either because your site doesn't use style classes, or because I messed up somewhere)

Last Updated Friday, 18 May 2007
Tags: templates
< Prev   Next >

Powered by EasyFAQ © 2006 Joomla-addons.org