Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Change basic font size

    I want all fonts to be slightly bigger than default. I believe that size is the same for all skins, thus 11px. What I now did, is the following:

    * Copy the /isomorphic/skins/Enterprise directory to another directory.
    * In skin_styles.css I copied all styles to the end of the file (so everything in it is there twice). This way, I can always copy (overwrite) the original contents at the beginning of the file.
    * Replaced all CSS rules "font-size: 11px;" with "font-size: 12px;".
    * Removed all other CSS rules and if that left an empty body, removed the body as well.

    Although, this works, I wonder if there isn't an easier approach, because if I need to change the 12px to 13px (or something else), I need to replace them all. Of course I can use "replace all" but only for the latter part of the file.

    #2
    Hi,

    I had the same issue - our customers complained that the standard font sizes were too small. My solution was some JavaScript that scans the style sheets and increments all font sizes.
    Code:
    var fontIncrement = 1;
    for (var i = 0; i < document.styleSheets.length; i++) {
        var rules = [];
        if (document.styleSheets[i].rules)
            rules = document.styleSheets[i].rules;
        else if (document.styleSheets[i].cssRules)
            rules = document.styleSheets[i].cssRules;
        else
            alert("No stylesheet rules found for this browser");
        var sizes = [];
        for (var j = 0; j < rules.length; j++) {
            var style = rules[j].style;
            if (style && style.fontSize && style.fontSize.indexOf("px") > 0)
                sizes.push(parseInt(style.fontSize));
        }
        for (var j = 0; j < rules.length; j++) {
            var style = rules[j].style;
            if (style && style.fontSize && style.fontSize.indexOf("px") > 0)
                style.fontSize = (sizes.shift() + fontIncrement) + "px";
        }
    }
    There are two inner loops because I found that on one browser (IE I think), simply incrementing every font size resulted in some styles having font sizes incremented more than once. Solution was to store all font sizes in a list and then set them all to the incremented value.

    Hope this is helpful,
    Andrew

    Comment


      #3
      Awesome! This was really helpful! Thanks a lot!

      Comment


        #4
        This is now a feature of 11.0! Awesome.

        Comment

        Working...
        X