Skip to main content

Hi there! For those who have activated the latest docebo features, has anyone successfully removed the gradient from the header image using CSS? This is the course overview page one lands on when they click on an unenrolled course from the course catalog. I know Docebo University has coded the gradient out for their own purposes but am having hard time figuring out the CSS in this particular instance where a page ID isn’t evident. Note: i have not activated the new features yet, and am not sure if that impacts what I’m looking at in the code. Thank you all!

 

Hi there,

I assume you’re talking about the gradient from transparent to black?

For me, it works using this code:

dcb-te-content-overview-header .dcb-te-content-overview-header-wrapper.dcb-te-content-overview-header-with-background-color, dcb-te-content-overview-header .dcb-te-content-overview-header-wrapper.dcb-te-content-overview-header-with-background-image {
    background-image:linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)) !important;
}

Basically just by removing the black from the gradient. Maybe give it a try and see if it works. 

@StefanW Thank so much for replying! Yes, that did work. I actually forgot to include !important; However, I guess I would have to use CSS to insert an image since it ignores whatever I try to upload under Properties.

@StefanW Thank so much for replying! Yes, that did work. I actually forgot to include !important; However, I guess I would have to use CSS to insert an image since it ignores whatever I try to upload under Properties.

Oh that’s too bad, so you end up sacrificing the image to get rid of the gradient? I agree that it is really dark and having a way to at least lighten it a bit would be nice.

@JEntis Unless someone can offer another way? I wasn’t able to keep the image in.

The gradient throws off our brand colors and I think it’d be better if Docebo actually didn’t include a gradient by default. If I really wanted one, I would create an image that included a gradient.

@BCunha1 

You’re welcome!

What the code I posted actually does it applies a gradient from transparent to transparent. So basically you don’t see anything, it still leaves you an easy option to replace the black from the original with another color of your choice, like white for example if you want it brighter.

You should be able to apply an image using the code, but using an image instead of the gradient. Haven’t tried that myself though.

 This was very helpful thank you!

 

The CSS worked for me, but it’s a bit silly that I now can’t customize the image per course.

I put in an idea: 


Also for anyone unsure where to put their URL for the image, here’s where that goes in the CSS
 

dcb-te-content-overview-header .dcb-te-content-overview-header-wrapper.dcb-te-content-overview-header-with-background-color, dcb-te-content-overview-header .dcb-te-content-overview-header-wrapper.dcb-te-content-overview-header-with-background-image

{background-image:linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("IMAGE URL GOES HERE") !important;}

 

i’m very late in this game, but where do you input this CSS coding for the course overview header?

Reply


Terms & ConditionsCookie settings