How to format subtitles in a widget

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?

oops - Yes - I am specifying the widget.

How can I see the widget number? Thanks again!

Would it be #doc-page-180 (180 being the actual 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:

1. You can also get the page as a whole from the URL of the page, easier to just grab. i.e. if this is my page’s URL: https://demo.docebosaas.com/pages/107/salt-test , 107 is the page id so you can use doc-page-107 as an id.
2. Widget numbers will change if you do layout changes on pages, so be careful how much you focus down to specific widgets with customizations. Page level is great if you don’t want to a universal change, but widget level equals more  maintenance and breaking potential.

@Bfarkas - I always forget to look at the URL.

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.

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; }

@idalisses

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;
}

#doc-page-32 custom-content-box-widget div.subtitle {
    font-size: 10px;
    font-weight: lighter;
}

This worked! Thanks so much for your help!!!

Awesome! Glad to hear it.