• 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?

CTXMedia

Formerly CyclingTribe
#1
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?
 

AndyB

Well-known member
#3
T0 increase the fonts size for your entire site I suggest you use the browsers zoom feature. Firefox has the best zoom feature.
 

EQnoble

Well-known member
#4
T0 increase the fonts size for your entire site I suggest you use the browsers zoom feature. Firefox has the best zoom feature.
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
 

AndyB

Well-known member
#5
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
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.
 

EQnoble

Well-known member
#6
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.
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...

Code:
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.