There’s a few ways to do this, going to post them individually here, but essentially:

1. Use the title and body of the html widget for their purposes and then restyle them using the central CSS.
2. Do what you are doing and insert your own structure and use the central CSS to style them.
3. Insert your own structure and use inline CSS so that it holds up regardless of if the central CSS is applied or not (i.e. mobile app). This one has limitations and requires you to update everywhere individually.

For the first one, insert the CSS below into the central look/feel area:

#doc-widget-3977 .common-widget-title {
background-color: #000000;
color: #ffffff;
margin-bottom: 0;
}
#doc-widget-3977 .htmlwidget {
background-color: #FF0000;
color: #ffffff;
}

Should look like this:

Couple Notes:

• This will only impact the widget id 3977, as always widget ID’s can change when moving items, plus require you to apply this to each widget. If possible go to at least the page level for your own sanity.
• I used placeholder colors just as examples, update them as needed. The top section controls the background and font color of the title bar, the bottom section controls the background and font color of the body area.
• This leverages the built in structure of using the title and body area of an HTML widget.

  

   

• This will only work on html widgets completely as each widget type has different classes that need to be used.

uMore posted below!  ↓ ]

For the second technique, adding your own structure and central style, used your html from above:

<div class="GlobalHSbackground">
<div class="GlobalTitleSettings">Quick Links.</div>
This is the main area.
</div>

I added some text not in the title just to put some content.

The only CSS really needed for this is widget agnostic since you are inserting your own classes:

.GlobalTitleSettings {
background-color: #000000;
color: #ffffff;
}

.GlobalHSbackground {
background-color: #ff0000;
height: 100%
}

You could add the widget ID’s prior if you want to distinguish between multiple, but at that point why not just use a different class since you are controlling them?

Result is:

Couple Notes:

• Same issue as the previous, using the central CSS store so won’t work in certain locations, make sure it falls back well in those cases.
• Colors were just to prove concept, update to what you want.
• Highly recommend using highly unique class id’s for things like this so you never run into an overlap with platform improvements. I often add a short series of random characters to my classes as a safety net.
• You don’t need the height: 100%, the background color will just naturally fill the extent of your content. I added it so it would always fill the background of the widget box, up to you which is better for your use case.

For the third technique, going all inline. Almost identical to the previous, except don’t need classes as it is all inline. Here’s the HTML for the widget:
 

<div style="height: 100%; background-color: #ff0000;">
<div style="background-color: #000000; color: #ffffff;">Quick Links.</div>
This is the main area.
</div>

This gives the same result as above:

All the same caveats as the previous one, except this will work on any view, but needs to be individually updated at each instance.

@Bfarkas thanks again for your help and going to the effort of explaining all three methods. It seems neglecting the ‘height’ tag for my background colour tripped me up initially as the approach seemed sound!

I wasn’t aware we could utilise inline css so again, this has been an extremely helpful revelation.

Much appreciated.  

Final thread on this...how do you go about making the background of a widget transparent? My initial approach was to use an rgba tag for the background colour, which applies the alpha... but inherently the widget has a grey/white background that I seemingly can’t remove (i.e, a value such as rgba (0, 0, 0, 0.1) is actually a very light grey rather than a translucent black).

I noticed in the course “https://university.docebo.com/share/asset/view/69” you can change the login box to be transparent - would I be right in applying similar tags such as “{background: transparent !important;} and adding in a “’.bg-white-opacity” tag but to the specific widget id? Has anyone been able to successfully do this as I’d like some of the page background to appear through some of my widgets? 

Tagging in @Bfarkas again (hope you don’t mind!).

So you have to make sure you are getting the actual widget container’s background, if you just apply it to the html you insert, the container will still be shown which is what sounds like is happening to you.

In the case of an HTML widget it is:

.htmlwidget {
    background: transparent;
}

This class is specific to the HTML Widget, so would need to find the appropriate one for diff widget types.

Thanks @Bfarkas I will give this a test later.

@Bfarkas wondeful tips - thank you for sharing them. Do you happen to know how to make an inline adjustment to remove the border of the HTML widget?

Do you mean the border or the border and dropshadow?

.htmlwidget {
border:   none;
}

.wrapper-shadow {
    box-shadow: none;
}

This would do both, but would apply to all widgets for the drop shadow and to all html widgets for the border. You will need to look up the page id and/or widget specific ID and add it in to these to keep it specific to a specific widget. Note that is the easiest modification to break. Theres info here about making these page/widget specific:

https://help.docebo.com/hc/en-us/articles/360020080720-Introduction-to-Pages-and-Menus

Edit: Got it working - thank you so much!

Thank you @Bfarkas I mean the border and dropshadow. Hoping to do it inline so I can make the adjustment on specific pages and not for the widget platform wide.

But I think if I’m understanding now, you can use the CSS at the brand/look menu - and adjust the code for a page by using it’s custom ID. 

I assume you got it, but just to clarify for others, you can’t do this inline since we don’t have higher control over pre-built elements, only within your own content can you do that. The only way to isolate the page/widget is to use the id’s of the poages/widgets, and it will not work on mobile app.