How do I change the percentage that the font increases with via the font resizer on in the item toolbar?

 

I have styled my Intro text to 120 % and it doesn't change when clicking the increase icon, only the body text (74 %) changes.

 

Rgds

A client of mine had this problem as well and here is how I fixed it:

1. Go to your file directory and open the file: /components/com_k2/js/k2.js
2. Look for the Text Resizer section of the code (around line 31) and make this change:

Change this:
// Text Resizer
if ($('fontDecrease')) {
$('fontDecrease').addEvent('click', function(e){
new Event(e).stop();
$$('.itemFullText').removeClass('largerFontSize');
$$('.itemFullText').addClass('smallerFontSize');
});
}
if ($('fontIncrease')) {
$('fontIncrease').addEvent('click', function(e){
new Event(e).stop();
$$('.itemFullText').removeClass('smallerFontSize');
$$('.itemFullText').addClass('largerFontSize');
});
}

To this:
// Text Resizer
if ($('fontDecrease')) {
$('fontDecrease').addEvent('click', function(e){
new Event(e).stop();
$$('.itemIntroText').removeClass('largerFontSize');
$$('.itemFullText').removeClass('largerFontSize');
$$('.itemIntroText').addClass('smallerFontSize');
$$('.itemFullText').addClass('smallerFontSize');
});
}
if ($('fontIncrease')) {
$('fontIncrease').addEvent('click', function(e){
new Event(e).stop();
$$('.itemIntroText').removeClass('smallerFontSize');
$$('.itemFullText').removeClass('smallerFontSize');
$$('.itemIntroText').addClass('largerFontSize');
$$('.itemFullText').addClass('largerFontSize');
});
}

3. Now you can check the frontend to make sure the font resizer works for both the introtext and fulltext.
4. To change the smaller and larger font sizes, open the file: /components/com_k2/css/k2.css
5. Scroll down a bit (or do a code search) and find the classes: .smallerFontSize and .largerFontSize
6. Change these to whatever font sizes suit your needs.

Hope that helps. Cheers.

Hi,
I tried your solution but it didn't seem to have any effect on the intro text. Only the body text is resizing after the alterations of the k2.js file. This result was kinda strange since your solution seemed quite straight forward and very logical. But no, the problem with the intro text still exist.

I found the css class now. Thanks!

Hmm.... in your K2 admin parameters, do you have it set to show 1 editor for introtext/fulltext or 2 separate editors?

I have set it to 2 separate editors

Try changing this to the single editor option. I know there have been various issues with the 2-editor system, so give it a shot and see if the font resizer works now. Also, if you have any type of caching system running (joomla built-in system or 3rd party plugin), make sure you clear the cache or temporarily disable it.

I picked up the trail and checked if there was any difference between 1 or 2 editors, but sadly it was the same result with only one editor. I use no Joomla cache except the cache that some modules more or less compulsory creates (which I emptied) and I have no 3-party cache installed.

But I noticed when I checked the source code of the generated HTML-pages that if I only write text in intro it gets the css class="itemFullText", thus allowing everything to work. But I guess this has nothing to do with it.

I was prepared to abandon K2:s font resizer and use some other script, but then I discovered that such scripts seem to collide with PNG-fix script for IE6 so I am in a cul-de-sac.

Try looking at the source code again on an item page that has both intro and full text (I highly recommend downloading the Firebug plugin for Firefox - if you don't already have it). Make sure that the intro text portion is wrapped in a div with the class "itemIntroText" and the full text portion is wrapped in a div with the class "itemFullText".

The way the font resizer feature works is that when you click the increase/decrease font button, the javascript searches the page for both of the div tags I mentioned above. Once it finds them, it inserts a new css class into both of them. So before you click an increase/decrease button, the introtext code should look like this:

{div class="itemIntroText"},{p}Your introtext here......{/p}
{/div}

After you click the font increase/decrease button it should look like this (if you're using Firebug):

{div class="itemIntroText largerFontSize"},{p}Your introtext here......{/p}
{/div}

* I had to use the curly brackets ( {} ) in this response box because it was stripping out my regular brackets ( <> ) *
If this change does not occur, you might need to recheck your javascript again to make sure you copied it correctly (happens to me all the time).

I use Chromium when I check what's happening behind the scenes. It seems that the class is added:



But the result is still like this:



What's peculiar is the strike-through on the attbributes on the .largerfontsize

Rgds

It looks like your css styles are being overridden (strike-through), perhaps by something in one of your template's stylesheets. Try changing the larger & smaller font size classes to this:

.largerFontSize {font-size: XXX% !important;line-height: XXX% !important;}
.smallerFontSize {font-size: XXX% !important;line-height: XXX% !important;}

Brilliant!!!

It works. Thanks a lot for your patience and great help!

Rgds

No problem, happy to help.

Cheers

hi I have a question: how can i make the the font size of introtext & fulltext change simultaneously while clicking on the tools? Because I noticed that while i click on the tool buttons only the full text font size is changed, if we have both intro and full text displayed on the item page. Thanks in advance!