31
WP-Plugin: jQuery Font Scaling
6 Comments · Posted by Devolux in WP Code, WP Plugins, jQuery
Description
The plug-in offers three links to change the font size of your blog. They can be inserted anywhere on your website by including a simple PHP-function (-> Installation). These links change the font size value of the most outward html element of the page: the body element. All values of the elements inside the html body must therefore have relative font size values. Only text that you want not to change its font size at all must have an absolute value.
Here is an example for better understanding: The default font size value of the body element must be set to “10px” (-> Installation). By clicking the “A+”-link this value will be set to “11px”. All elements with relative font size values like
p {font-size: 100%;}
will then be automatically adjusted to the new top-level font size. In this case the font size of a “p”-element will switch from 10px (100% of 10px = 10px) to 11px (100% of 11px = 11px). Font size values of other elements will change likewise (a value of 120% will result in a new font size of 13.2px).
Important: Relative font size values are calculated from the direct parent element. This means: An element B which has a 100% font size and which lays inside an element A that has a 120% font size will have the font size values of the element A (12px/13.2px), not the values calculated in proportion to the body element (10px/11px).
Installation
1. Upload the plug-in to the “/wp-content/plugins/” directory.
2. Activate the plug-in through the “Plug-ins” menu in WordPress.
3. Place “<?php resize_links(); ?>” in one of your templates to provide the scaling links on your website.
4. Go to your style.css file and assign a font size of 10px to the body element of your website: “body {font-size: 10px;}”.
5. This is the most important step: All other font size values in your style sheets must be relative values. Only elements with text that you want not to change its font size at all must have an absolute value.
Ted · October 1, 2010 at 03:04
Hello folks,
Like this theme but having a problem with text resizing in escalating size down the page.
Is there a simple fix or must I learn CSS.
Can anyone offer assistance,thanks.
Ted
miki · February 25, 2010 at 06:13
hi!
i was wondering to use this nice theme but also how to change something like the font resizer. i like it but at the moment I don’t need it so..how to remove it from the code? here I see your installation faq but when I installed the theme I saw that It was already installed. can you help me?
thanks a lot,
cheers
miki
Admin comment by Devolux · February 25, 2010 at 18:08
Just remove the resizing links from sidebar.php. In that case you just have to put them back there if you want to use the function in the future.
Nicole · November 24, 2009 at 20:59
Hi!
I love this text resizer…I can´t seem to find the download link for this particular plugin on your site. Is it still available?
Admin comment by Devolux · November 25, 2009 at 17:38
Yes, it is. But it’s not working too well, so I suggest that you download my theme and take all necessary files from there.
Admin comment by Devolux · October 18, 2009 at 16:37
I unfortunately have to say that the plug-in isn’t very stable yet. I don’t have the time to have a look at it but I hope to get this done soon.
On the whole, the font resizing works very well, it is a part of all my themes. For now, there’s the possibility to download one of these and see how it is done there.