How to increase the default font sizes

[ColdWabmaster]

I have installed modern theme and is best suited for my case but I want to increase the font size a bit. Is there any way I can achieve that....   

My website: http://goo.gl/aRhuq7

[tomshaft]

You must be much more specific. Font sizes can be changed in the css file but there are several different fonts such as category names, Sub-cat names, and on and on.
 
Example: in style.css, line 141 if you changed the h1 font size then ALL fonts using the h1 will change size. font: 18px Georgia, Times, 'Times New Roman', serif;
 
On line 142 you can change from normal to bolder which also effects the same h1 fonts:
 
font-weight: normal;
 
 
State exactly what font(s) you want changed.
 
Tom

[ColdWabmaster]

Actually I want to change the font size of all the things ... and my modern theme is not mobile compatible why the fonts appear very small and while in bender the site automatically changes to mobile screen fit. Is there any solution for this in case of modern theme.   

[teseo]

***CORRECTED***

Hi,

The recommended procedure is described in the first answer of this page. Quite a work changing the css.

But you could try this neat jQuery trick*:

Code: [Select]

<script type="text/javascript">
    $(document).ready(function(){
        var zoom = 1.5;

        var currentFontSize = $('html').css('font-size');
        var currentFontSizeNum = parseFloat(currentFontSize, 10);
        var newFontSize = currentFontSizeNum*zoom;
        $('html').css('font-size', newFontSize);

    });
</script>
Add this at the end of your theme footer.php, just above last </body></html>

And change zoom variable to your liking, check out that all the pages are looking good with that level of "zoom".

Regards

* Seems to work fine at least with Bender. For Modern see post below.

[tomshaft]

@teseo,
As usual, you gave a great answer.
 
Tom

[ColdWabmaster]

Zoom has no effect on the pages they are as it is even I changed var zoom =10.0 Will a more customizable modern will ever be released any where near soon ..?  Or is there any place I can buy some awesome osclass themes ..?

[teseo]

You're right, Modern seems to have a whole different CSS structure, but the procedure can be refined:

Code: [Select]

<script type="text/javascript">
    $(document).ready(function(){
        var zoom = 1.1;

        $('*').not('div').each(function(){
            var currentFontSize = $(this).css('font-size');
            var currentFontSizeNum = parseFloat(currentFontSize, 10);
            var newFontSize = currentFontSizeNum*zoom;
            $(this).css('font-size', newFontSize);
        });

        $('p').css('font-size', 80-((zoom-1)*100) '%');
        $('strong').css('font-size', '100%');
    });
</script>
Put it almost at the bottom of footer.php, just above <?php osc_run_hook('footer'); ?>

Maybe some given element would need individual CSS adjustment, but this seems to looks fine on main, search and add item pages.

Regards

PS.- There is a really annoying bug in this forum software, plus signs tends to disappear, this line:

$('p').css('font-size', 80-((zoom-1)*100) '%');

should be:
$('p').css('font-size', 80-((zoom-1)*100) [plus sign] '%');

[keerthi]

thats a cool answer teseo. How do you come up. You are a "creative code pro."

[teseo]

You both are so kind, but at least the starting point is at hand for everyone knowing a bit about the power of jQuery, Google jquery increase all fonts size, you'll see several options:

- Simulate browser zoom (didn't try this because there is a warning about this not being exactly the desired effect)

- StackOverflow site answers similar to what I pointed in my previous post as "recommended procedure" (seems earlier I used slightly different keywords, not showing now with these ones).

- And this is the "philosopher's stone" here, so the merits to the ShopDev editor.

Such is the power of publicly shared knowledge, and that's what I'm trying to do here, just do my bit.

Regards

[ColdWabmaster]

It changed the font but certain other text got reverse effect ..... The ad description and login infos got minimized and buttons got disarranged .... look at the snapshot attached...   

Please provide some info to make a get some premium theme .. its too much to make changes all the time ..

[ColdWabmaster]

@keerthi   A free premium theme  tell me where I can get it ... 
                I like the way modern is but little better one is good .. like bender fixed with modern fixed with olx theme ...

[teseo]

Maybe some given element would need individual CSS adjustment, but this seems to looks fine on main, search and add item pages.

You're welcome, bye bye.