Best Answer

CSS Question: Removing Gradient from Course Overview Header

  • 10 June 2023
  • 7 replies
  • 182 views
B
Rank
Userlevel 1

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!

 

icon

Best answer by StefanW 13 June 2023, 13:43

View original

7 replies

S
Rank
Userlevel 3

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. 

B
Rank
Userlevel 1

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

JEntis
Rank
Userlevel 4
Badge

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

B
Rank
Userlevel 1

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

S
Rank
Userlevel 3

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

A
Rank
Userlevel 1
Badge

 This was very helpful thank you!

 

ktbadham
Rank
Userlevel 3
Badge

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

 

Reply


Terms & ConditionsCookie settings