Best Answer

How to change the background colour of a single widget

  • 25 November 2022
  • 11 replies
  • 1402 views
James A
Rank
Userlevel 2

Hi. I seem to be stuck on seemingly an easy task of changing the background colour of an html widget from the usual “Docebo grey”. I’m trying to create a really simple title on top of the background colour but having exhausted all options, I can’t seem to get beyond the following:

 

 

I’ve attempted three different routes:

  1. Applied a “background colour” directly to the widget id in css.
  2. Created a style class which has a black background colour.
  3. Added a black background colour to the font style class.

 

None of the above approaches seem to work. Any help would be greatly appreciated for what seems like something so trivial.

 

Thanks in advance. Tagging in @gstager and @Bfarkas who are always extremely helpful.

 

Code couldn’t be simpler:

html

<div class="GlobalHSbackground">
<div class="GlobalTitleSettings">Quick Links.</div></div>

 

Css:

  #doc-widget-3977{background-color: #000000;}

 

.GlobalHSbackground{background-color: #000000;}

 

.GlobalTitleSettings{

    font-family: montserrat;

    position: absolute;

    background-color: #000000;

    padding: 0px 0px 0px 0px;

    text-decoration: none;

    color: #ffffff;

    font-size: 90px;

    font-weight: 600;

}

icon

Best answer by Bfarkas 25 November 2022, 16:39

View original

11 replies

Bfarkas
Rank
Userlevel 7
Badge +3

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.

[More posted below!  ↓ ]

Bfarkas
Rank
Userlevel 7
Badge +3

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.
Bfarkas
Rank
Userlevel 7
Badge +3

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.

James A
Rank
Userlevel 2

@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.  

James A
Rank
Userlevel 2

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!).

Bfarkas
Rank
Userlevel 7
Badge +3

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.

 

 

James A
Rank
Userlevel 2

Thanks @Bfarkas I will give this a test later.

orobinson
Rank
Userlevel 1

@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?

Bfarkas
Rank
Userlevel 7
Badge +3

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

orobinson
Rank
Userlevel 1

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. 

Bfarkas
Rank
Userlevel 7
Badge +3

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.

Reply


Terms & ConditionsCookie settings