Whether or not WP Accessibility’s toolbar will be able to enlarge your text depends significantly on how your theme defines styles. WP Accessibility does provide a means to add your own custom styles to be applied by the toolbar, but you do need to know some CSS to implement them.
If you have somebody who can help you with that, you just need to add a few lines of CSS to your theme’s stylesheet to pass custom font sizes through.
I know some very basic CSS. The customization notes say:
Define custom styles for large print by assigning them in the body class .fontsize in your theme stylesheet.
Can you give me a purely hypothetical example of what a rule might look like that could do this? Might it be something like putting #body.fontsize {font-size: 26px;} somewhere in my style.css file? I understand that you would need a lot more info to be sure it would work, but it would be great to have some simple code to experiment with.
For example, something like:
.fontsize h1 { font-size: 3em!important; }
.fontsize h2 { font-size: 2.5em!important; }
.fontsize h3 { font-size: 2em!important; }
.fontsize p { font-size: 1.6em!important; }
You may not actually need !important, but given this context, you do want these styles to take precedence, and it’s easier than figuring out the right level of specificity.
(And yes, in your style.css file.)
I know that this has been dormant for 3 months, but I have the same problem. I just downloaded your plugin which is exceptional!
However, My page content is actually reduced when the “Large A” is clicked. The text is then enlarged (Site default sizes) when the “Small A” is clicked.
I tried your solution in this thread with no success. I even attempted to remove your !important thinking they beat my !important.
Help
Thanx
Every theme potentially requires different settings; it’s impossible for me to create a set of font size adjustments that will universally increase font sizes evenly or predict exactly what changes need to be made.
I may be able to help if you can provide a URL for me to look at.
Thank for your response,
I am at the end of evaluating the possibility of converting an existing site to WordPress. Unfortunately, I have no URL to share with you today.
Its’ clearly understandable that you cannot predict individual website font standards. I fully expected to have some CSS work.
Here is my problem:
Reference:
- Standard view indicates that the visitor is in default site defined font styling.
- Accessibility view indicates that the visitor is in WP Accessibility large font styling.
- 1. Install and activate WP accessibility plug-in and enable the tool bar (nothing else). Use default 1.5em size.
- 2. View web site
- 3. I am placed in Standard view
- 4. I now click on the ‘A’ to go into Accessibility
view. What happens is the smaller toolbar appears and the site is in very small print). <h1> appear more like <h4> or <h5>.
I attempted to configure Accessibility view by defining new font sizes in my style file.
\
.fontsize h1 { font-size: 175% !important; }
.fontsize h2 { font-size: 160% !important; }
.fontsize h3, p, span, label, li, input, select, textarea, legend, code, pre { font-size: 145% !important; line-height: 1em !important}
etc…
\
I expected this to modify the small fonts. Instead it modified my Standard view fonts. In other words,
Standard view is perfect
Accessibility view – I can’t get out of small font mode. How do I change these?
Thanx.
I’m not sure I can help you very much without seeing things; but I’ll try.
1) Font size changing: what happens when the button is clicked is that the ‘fontsize’ class is added to the body element of your page, and then those styles are applied. They should not apply at all when in the default view.
2) Frequently, you need to check what unit is being used for font sizes on your theme in order to be able to increase the font size reliably. If the fonts are sized in rems, you can only increase them properly if you use rems in the increased font size as well.
Does that help at all?
Hi Joe its Joe,
Thanks for your reply, but I’m a bit confused. Should I not see ‘fontsize’ in the BODY tag when I view source?
Definitely working with fonts sized in rems.
Part of the problem has to do with another plug-in called TOC+ which automatically builds a Table of contents on every page with multiple heading tags. To do so, it embeds a <span id=… inside each heading tag it finds. I had to add the following:
\
.fontsize h1 span { font-size: 3em !important; }
\
The other problem is that Enigma has many different font classes for different sections of their theme. Could you please verify that the code below is the proper usage of your plugin?
\
.fontsize .carousel-text h1 { font-size: 3em !important; }
\
I really appreciate your responsiveness and your help!
Your plugin is definitely doing it’s job! 5 stars.
Thanx
If you do a view source (e.g. Ctrl+U), you should absolutely never see a fontsize class attached to the body element, regardless of the button state, because it’s added using javascript. If you’re using a browser inspector, on the other hand, you would see the class when the button is in the ‘on’ state, but not in the ‘off’ state.
.fontsize .carousel-text h1 { font-size: 3em !important; }
Yes, that’s a plausible use of the code; I can’t guarantee that it’s correct, because I don’t know the HTML in question, but it’s certainly plausible. With that code in place, when the fontsize button is turned on, the font should change to a size of 3em. What size that actually is is dependent on context, since the size of an ’em’ varies depending on the CSS in use within all containers that apply to the element.
Joe
You have been extremely helpful!
I consider this topic resolved and closed. Unfortunately, I cannot do either since I did not initiate the topic.
Thank you again.
Joe
That’s one of the problems with jumping into somebody else’s support thread – given that the original poster never followed up to confirm whether their issue was resolved, I’m going to go ahead and close this as resolved.
As a piece of general advice with the WordPress support forums, it’s almost always better to start your own thread, even if the symptoms of your issue sound the same as another.
Thanks!
Here is what I implemented and all is working perfectly. Maybe it will help someone else.
\
/* Set toolbar resizing */
.a11y-toolbar { top: 33% !important; }
.a11y-toolbar { font-size: 1.2em !important; }
.fontsize .a11y-toolbar { font-size: 3em !important; }
/* Set site fonts at 100% */
html, body { font-size: 100% !important; }
/* Increase font size on toolbar click */
.fontsize html, body { font-size: 120% !important; }
/* Insure that Carousel H1 and Heading H3
maintain default font size when fonts are increased. */
.fontsize .carousel-text h1 { font-size: 3em !important; }
.fontsize .enigma_heading_title h3 { font-size: 2em !important; }
\
Joe
