Hi everyone,
In order to be fully accessible we need a way to superimpose screen readable text over an image. For example, a banner. We can’t upload an image with text as it won’t be readable to someone who has accessibility needs. I’ve tried to add a content title which works, BUT I need control over making the font a minimum of 24-28 points (if not larger). Is there a workaround or is this custom CSS?
Thanks
Best Answer
Need to make font on content title's banner much-much larger for accessibility reasons
+1Best answer by gstager
I believe you’ll need the CSS.
Something like this would change the size of text for the titles of many widgets.
Is this what you’re after?
/** Change size of the font for widgets **/
div.common-widget-title {
font-size: 30px;
}
+8I believe you’ll need the CSS.
Something like this would change the size of text for the titles of many widgets.
Is this what you’re after?
/** Change size of the font for widgets **/
div.common-widget-title {
font-size: 30px;
}
+8Otherwise you can try this…
/** Resize the Content Title on Widgets **/
div.titles-container > div.title {
font-size: 30px;
}
Hope these help.
+1Hi
Yes this is what I’m after. I’d like to get the content title I typed overtop of this .jpg banner to be the same size as the text in the image. (Then I would simply re-upload a blank banner so it’d become a string.)
I tried copying and pasting your code but maybe I didn’t do it right?
+8Hmm…
Perhaps I am not addressing the right code.
The two examples I shared above correspond to these two items regarding the widget.
Where are you typing your text?
+1
+8Did you try the second option I posted?
That is the one that corresponds with the Content Title.
/** Resize the Content Title on Widgets **/
div.titles-container > div.title {
font-size: 30px;
}
+1Maybe I’m not copying and pasting correctly?
+8My content text adjusts ok…
What widget are you using?
Mine is a Custom Content Box.
+8Another thought is browser related…
What browser are you using and have you tried any others for testing?
+1Just checked, it too is a Custom Content Box.
I’m using Chrome. I just tried logging in using an incognito window same thing. I just tried MS Edge and same thing.
+1I took away the image. it’s a custom content box:
+8Hmm…
That all seems good.
Couple more things to try.
- Do a refresh of the browser after you save out of the Branding and Look area
- Although I didn’t need to - try adding !important to the CSS like so…
/** Resize the Content Title on Widgets **/
div.titles-container > div.title {
font-size: 30px !important;
}
Greg
+1Success!
Fire the cupcake cannon!
Thank you soooooo much!
+8Success!
Fire the cupcake cannon!
Thank you soooooo much!
Glad to hear it!
+3I’m bringing this back to the top! This helped, but I need a font size that appears to be bigger than the box that contains it…
Any idea how to make it so my content doesn’t get cut off.
The top box is a Custom Content Box
The Middle Box is a an image inside an HTML Widget Box because we’re testing an alternative (but I don’t think this route will help users who use screen reader)
The third box is also a custom content box.
Any idea how to make it so we an see the full text?
That’s the code I’m using… I think 80 PX is the right Size
/** Resize the Content Title on Widgets **/
div.titles-container > div.title {
font-size: 80px !important;
}
/** End Resize the Content Title on Widgets **/
Log in to Docebo Community
Enter your email address or username and password below to log in to Docebo Community. No account yet? Create an account
Docebo Employee Login
or
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.