HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


[SOLVED] Font-sizer not resizing

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#102909 (In Topic #20154)
Avatar

Well-settled

Greetings,

I recently discovered that the font-sizer has stopped working in the case of my custom theme, though it's working perfectly in zones that display in the Default theme. There are no differences in the font-sizer.css files of the two themes, and, in the returned "View source" pages for each, the references to the font-sizer are also identical.

Would anybody be able to tell me how to fix this, please?

Thanks for reading!


Last edit: by RichT
Back to the top
 
Posted
Rating:
#102912
Avatar

If you use non-em (i.e. non-relative) font sizes, it will put a stop for relative proportioning at the point of that setting in the DOM tree.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#102916
Avatar

Well-settled

Thanks for that, Chris. Got to admit I never knew that - basically important know-how I'd never seen in print, so I always presumed one can happily use both relative and absolute values side-by-side. It would explain a good many issues I had with font-sizing in developing my custom theme, for which I changed the base-value "normal" font-size (in #body .main_website) from em to px. Subsequently, wherever I encountered an em-declared selector that wasn't outputting the font-size I was expecting, I simply fixed the issue in each case by substituting a px value without spotting the common cause of such issues generally.

However, I'm afraid I'm not clear as to how I can apply your point to fixing my current problem, because the font-sizing selectors in font_sizer.css  (in both the default theme and my own) are declared as absolute, not relative values, (13px, 14px, 17px) as installed. In addition, the spreadsheet does include em-value properties (for margins and padding) alongside these.

So, in a word, I'm still stuck. Quite possibly I'm overlooking some missing rule that needs to be declared or an existing rule somewhere that needs to be adjusted, or maybe I'm just not interpreting your point sufficiently to recognize the "obvious" fix, viewed strictly DOM-wise. Or could there be something else responsible? If you've any further suggestions, Chris, I'd be really grateful to you!

Best regards, 

Richard.
Back to the top
 
Posted
Rating:
#102923
Avatar

I'll add a note about this to the themeing tutorial.

The font sizer works by setting a larger base font size (yes, an absolute one - but that's the reference point). The default theme sizes almost everything relatively (using 'em'), so a larger base font size has an effect that cascades through everything.

If you change things to 'pt' or 'px' them that is absolute and hence the cascade will be stopped at that point.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#102930
Avatar

Well-settled

Happy to report having finally tracked down the causes, which date back to my first days of working on the custom theme. In trying to get a satisfactory degree of control over font-sizing, in global.css I'd declared the base font-size reference under body#main_website #main_website_inner as a px value and added a rule declaring the font-size of <p>, likewise as an absolute value; I've just discovered either one of these would override the output of the font_sizer.css rules. 

What prompted me to try those adjustments was puzzlement about exactly where in the CSS the absolute value for the base font-size needs to be declared. In the default global.css, the first and only selector of global scope with an absolute value is body.website_body, #htmlarea, set at 13px. But adjusting this seemed to have no impact on the default size of paragraph-text, unlike my aforementioned adjustments. The reason for that is now clear in the light of restoring the font-sizer to working order: any font-size value declared in body.website_body is immediately overridden by the absolute values declared in font_sizer.css and indeed the font-sizer will provide base-value settings for global.css even if no value is declared in body.website_body.

It's pleasing to have resolved this issue - and thanks, Chris, for providing the hint I needed for tracing its causes (after some amount of head-scratching!) - but I'm left wondering, given the overriding role of font_sizer.css's values, why the seemingly redundant 13px value for body.website_body is included at all. In hindsight I would very likely have addressed the matter of setting default font sizes without making the adjustments that caused this issue! 

Thanks again,

Richard
Back to the top
 
Posted
Rating:
#102934
Avatar

But adjusting this seemed to have no impact on the default size of paragraph-text, unlike my aforementioned adjustments.

Will comment it more clearly within the CSS.

why the seemingly redundant 13px value for body.website_body is included at all

We can't rely on Javascript-powered stuff for basic layout. Besides, the font sizer may be removed from a theme.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#102935
Avatar

Well-settled

We can't rely on Javascript-powered stuff for basic layout. Besides, the font sizer may be removed from a theme.

Thanks for that, Chris!
I hadn't taken the Javascript factor into account - the content of font_sizer.tpl, at a guess. As to your second point, yeah, that occurred to me moments after submitting the post (i.e. when I could sit back and start thinking about this "outside of the box" for once)! 

Many thanks for steering me through and best regards!

Richard
Back to the top
 
Posted
Rating:
#102936
Avatar

Well-settled

I forgot to ask just now, a propos of you adding a comment to global.css, if you wouldn't mind also looking at this one (near the top of the second section)
Our little "typing" effect*/    input[type="text"]:focus, input[type="password"]:focus


Could you perhaps explicate what the effect actually is, please (not for me, but for puzzled newbies?)

Thanks!
Back to the top
 
Posted
Rating:
#102937
Avatar

ok


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: