Hi! I’m trying to make the text smaller and the weight lighter in the font of these custom widgets. Could anyone share the CSS for this? Thanks!
Hi! I’m trying to make the text smaller and the weight lighter in the font of these custom widgets. Could anyone share the CSS for this? Thanks!
This code will drill down to a specific page where your box is located. My page happened to be 180. You’ll have to look up in the inspector to see what your page is.
/** Adjust the subtitle font of a custom widget **/
#doc-widget-180 > custom-content-box-widget div.subtitle {
font-size: 10px;
font-weight: lighter;
}
Here is the effect of my changes using the code above. Adjust to your desired look.
Be sure to test thoroughly and make sure there aren’t any other conflicts.
Hopefully this gets you going.
I think you mean widget where page is, just for clarifying since you can also specify by page if you wanted.
Thanks so much! If you don’t mind me asking, how can I see the page number?
I think you mean widget where page is, just for clarifying since you can also specify by page if you wanted.
oops - Yes - I am specifying the widget.
I think you mean widget where page is, just for clarifying since you can also specify by page if you wanted.
oops - Yes - I am specifying the widget.
How can I see the widget number? Thanks again!
I think you mean widget where page is, just for clarifying since you can also specify by page if you wanted.
Would it be #doc-page-180 (180 being the actual page number?
Thanks so much! If you don’t mind me asking, how can I see the page number?
You can pull up the inspector by placing your cursor on the item you wish to inspect on your page and doing a right-click - then choosing Inspect at the bottom.
This should bring up a panel on the right with the item you right-clicked on being highlighted.
Please note that you may not always be able to hit the item you want exactly and it may take a little digging but it will usually get you close.
Now back-track up from your subtitle text - shouldn’t be super far up - you will find the id of that specific widget.
Hopefully that makes some sense.
If you back-track up a little further you can find the id for the page as a whole.
Two notes:
My inspector is basically always open and it is just habit to look there.
My inspector is basically always open and it is just habit to look there.
Samsies….but not everyone lives that way, and is quicker if you only want a page number.
Two notes:
I tried doing and it didn’t work for me. My page is 32. Is it correct?
#doc-page-32 > custom-content-box-widget div.subtitle { font-size: 10px; font-weight: lighter; }
If you target the page instead of the widget just take out the angle bracket like so…
#doc-page-32 custom-content-box-widget div.subtitle {
font-size: 10px;
font-weight: lighter;
}
If you target the page instead of the widget just take out the angle bracket like so…
#doc-page-32 custom-content-box-widget div.subtitle {
font-size: 10px;
font-weight: lighter;
}
This worked! Thanks so much for your help!!!
This worked! Thanks so much for your help!!!
Awesome! 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 E-mail address. We'll send you an e-mail with instructions to reset your password.