Hello, all.
I am working on a page layout and have three custom content boxes (see image).
I want to change the CSS so that every custom content box on this page will have a border-radius: 20px.
My attempts aren’t working. I am struggling to know how to apply universal CSS to an entire page in terms of correctly referencing the targeted widgets. I could use some help. Here’s how I’m referencing it in my CSS file:
#doc-page-23 custom-content-box-widget {
border-radius: 20px;
}
Thank you!
Best answer by Ian
#doc-page-23 custom-content-box-widget div {
border-radius: 20px;
}You were close! You just needed another descendant selector to catch the div elements within the custom-content-box element. (I say “another” because you’re already using a descendant selector to specify that you only want this to apply on the specific page.)
#doc-page-23 custom-content-box-widget div {
border-radius: 20px;
}You were close! You just needed another descendant selector to catch the div elements within the custom-content-box element. (I say “another” because you’re already using a descendant selector to specify that you only want this to apply on the specific page.)
Thank you so much,
Happy that it worked,
I think the best advice I can offer is to familiarise yourself with how your browser’s Dev Tools can help – here’s an example tutorial for Google Chrome.
Beyond that, I don’t have a ton of Docebo-specific tips, to be honest. You already seem to know about the #doc-page-x thing, which lets you apply different CSS to different pages if needed. It’s also a good idea to steer clear of e.g. :nth-child selectors as Docebo could update the underlying list without warning, and then you’ve restyled (or worse, hidden) the wrong element. Maybe the last thing to note is that Docebo for some reason has a few unusual custom elements in its html – case in point, the custom-content-box-widget.
But yeah, mostly I just use trial and error together with the dev tools. The inspector stylesheet is way faster for testing purposes than saving your CSS in Docebo with every change. Refer to the W3C or Mozilla reference docs of course. ChatGPT or Copilot are pretty helpful as well in my experience. They don’t really know Docebo but again, they don’t particularly need to – it’s mostly just CSS.
Hope this helps, and happy styling!
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.