Skip to main content

Hi,

It seems like the new hero banner that is at the top of the new course pages has darkening/shading on it that results in any image I upload being darker than it’s supposed to be. For example, I uploaded a light blue image, and after saving the page’s changes, I noticed that the image is actually rendering on the page as dark blue, like it has been shaded. I’ve tried this with various images, and each time, the image is much darker than it’s supposed to be like there’s a shading filter applied to the hero banner’s style. Is there a way to remove the shading/darkening so that the image looks like it does originally? I’ve looked all over in the branding section and don’t see a setting that can be changed.

Thank you,

Becky

Hi,

The darkening effect is probably due to a gradient overlay that’s making your images appear darker than they should.

You would likely need to remove it with some CSS.

There are several posts you may want to review…

I also have this CSS code (found here but cannot find the post) - as usual with CSS please make sure to test, test, test. Not sure this code still has any effect with the new light/dark settings now built in…

/* Light Theme */
lrn-course-player-play-area {
  --ui-color-layout-contrast: rgba(255, 255, 255, 1);
  --ui-color-typography-negative: rgba(33, 39, 33, 1);
  --ui-color-border-accessibility-default: rgba(228, 230, 229, 1);
  --ui-color-layout-overlay-dark: rgb(233, 241, 245,0.8);
}
lrn-training-material-header,
.lrn-course-player-table-of-contents-header,
.lrn-course-player-training-material-idle-view-content {
  --ui-color-icon-negative: rgb(73, 43, 43);
  --ui-color-icon-neutral: rgb(232, 223, 223);
}
lrn-training-material-header button,
.lrn-course-player-table-of-contents-header button,
dcb-ui-list-item-training-material-content,
.lrn-course-player-training-material-idle-view-content {
  --ui-color-border-accessibility-negative: rgba(102, 102, 102, 1);
  --ui-color-interaction-ripple-light: rgba(0, 0, 0, 0.08);
  --ui-color-interaction-hover-light: rgba(0, 0, 0, 0.08);
  --ui-color-button-label-negative: rgba(51, 51, 51, 1);
}

 

Reply


Terms & ConditionsCookie settings