1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.2 Increase size of ALL text in a style with one CSS line?

Discussion in 'Styling and Customization Questions' started by CyclingTribe, Nov 24, 2013.

  1. CyclingTribe

    CyclingTribe Well-Known Member

    I'd like to create a sibling 'Larger Text' style that has a single, simple change - increase the size of all text by 150%

    Is there any easy way to do this globally - maybe a line in EXTRA.css?
  2. Brogan

    Brogan XenForo Moderator Staff Member

    You can try something like this but I doubt the results will be that great.

    font-size: 150%;
    CyclingTribe likes this.
  3. AndyB

    AndyB Well-Known Member

    T0 increase the fonts size for your entire site I suggest you use the browsers zoom feature. Firefox has the best zoom feature.
  4. EQnoble

    EQnoble Well-Known Member

    I think that his whole point is to have an accessibility style with larger text for visually impaired or struggling without changing the scale of the html layout
  5. AndyB

    AndyB Well-Known Member

    For the visually impaired (most old persons over 50 years like me) the zoom feature is fantastic. Not only is the text made larger but the images and everything else.
  6. EQnoble

    EQnoble Well-Known Member

    No doubt...and don't dispute it, when a page is made right you can usually zoom with no problems, I do it when I am in bed and am finishing something on the 40" from 15' away, but if he wants to make a simple clone of a style and only enlarge specific text ares things would need to be more specific.

    He was asking about adding one line, where one line wont suffice because different classes have different font-sizes specified so a rule within the confines of a single line that works might not have a very visually appealing outcome...

    there is nothing stopping someone from adding this to their extra.css...

    html, body, .messageText, .titleBar h1, #pageDescription, .navTabs, .navTabs .navTab.selected .tabLinks a, .message .messageMeta, .blockLinksList, .breadcrumb, .footer .pageContent, .footerLegal .pageContent {
        font-size: 100%;
    ...but it is so generic that playing with that number is going to make things get ugly quick...to make a clone style for the visually impaired which only enlarges the appearance of important functionality and content, one would have to create rules for individual classes or at the very least not try to make one style to rule them all.

Share This Page