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 by gstager
View original
+5
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;
}
+5
Otherwise you can try this…
/** Resize the Content Title on Widgets **/
div.titles-container > div.title {
font-size: 30px;
}
Hope these help.
Hi
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?
+5
Hmm…
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?
+5
Did 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;
}
Maybe I’m not copying and pasting correctly?
+5
My content text adjusts ok…
What widget are you using?
Mine is a Custom Content Box.
+5
Another thought is browser related…
What browser are you using and have you tried any others for testing?
Just 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.
I took away the image. it’s a custom content box:
+5
Hmm…
That all seems good.
Couple more things to try.
/** Resize the Content Title on Widgets **/
div.titles-container > div.title {
font-size: 30px !important;
}
Success!
Fire the cupcake cannon!
Thank you soooooo much!
+5
Success!
Fire the cupcake cannon!
Thank you soooooo much!
Glad to hear it!
Enter your email address or username and password below to log in to Docebo Community. No account yet? Create an account
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.