Hi everyone,
New course pages I’ve exited the preview mode and now I want to edit the look and feel and also see what we can achieve with the banner also. But I cannot find where I can edit the course description look and feel.
I may be missing something… Can anyone point me in the right ?
Best answer by thaldane
Hi everyone,
New course pages I’ve exited the preview mode and now I want to edit the look and feel and also see what we can achieve with the banner also. But I cannot find where I can edit the course description look and feel.
I may be missing something… Can anyone point me in the right ?
The banner is a setting in the Configure Branding and Look page at the bottom. You might need to change it to “Basic Page Layout” and save, then change it back. That worked for me.
As for the background colors for the rest of the player, I had to hack it a bit with CSS. I thought the default was oppressively dark and wanted to tone it up a bit and match our branding. Of course you would want to replace the hex codes below (#ababab) with your colors. Just note that the completed message background apparently has a slightly transparent white overlay so it will come in lighter:
/*1.new player syllabus header recolor*/ #play-area div.lrn-course-player-table-of-contents-header.ui-color-typography-negative {background-color:#909195 !important;}
/*2.new player content header recolor*/ #play-area lrn-training-material-header > div.lrn-training-material-header-wrapper.ng-star-inserted {background-color:#909195 !important;}
/*3.new player completed message background recolor*/ #play-area div.lrn-course-player-training-material-idle-view-overlay {background-color: #35A2B3 !important;}
/*4.new player syllabus list recolor*/ #play-area lrn-course-player-table-of-contents.ng-star-inserted {background-color:#292A2E !important;}
+1I think this may help, since I asked a similar question
Thanks
Its the back ground colours, as I can’t seem to see where this colour scheme is coming from…
Example below:
+1Theres an idea to change this….please vote
Hi Matt,
I don’t think there’s a way to do it via a menu or so. But at least right now you can do it using CSS:
The banner is basically an “image” with a gradient from black to transparent put over the background colour. Using CSS you can play around with different colours etc., but in the end it would be the same for every course.
Personally, I’d love to be able to change the banner for every course individually and maybe even upload images instead of just using colours.
It’s disappointing that this change is being implemented with no options to change the branding of it. We would like to have the capability to change the colors and have control over the new look. Even if it’s just uniform across all courses.
Hi everyone,
New course pages I’ve exited the preview mode and now I want to edit the look and feel and also see what we can achieve with the banner also. But I cannot find where I can edit the course description look and feel.
I may be missing something… Can anyone point me in the right ?
The banner is a setting in the Configure Branding and Look page at the bottom. You might need to change it to “Basic Page Layout” and save, then change it back. That worked for me.
As for the background colors for the rest of the player, I had to hack it a bit with CSS. I thought the default was oppressively dark and wanted to tone it up a bit and match our branding. Of course you would want to replace the hex codes below (#ababab) with your colors. Just note that the completed message background apparently has a slightly transparent white overlay so it will come in lighter:
/*1.new player syllabus header recolor*/ #play-area div.lrn-course-player-table-of-contents-header.ui-color-typography-negative {background-color:#909195 !important;}
/*2.new player content header recolor*/ #play-area lrn-training-material-header > div.lrn-training-material-header-wrapper.ng-star-inserted {background-color:#909195 !important;}
/*3.new player completed message background recolor*/ #play-area div.lrn-course-player-training-material-idle-view-overlay {background-color: #35A2B3 !important;}
/*4.new player syllabus list recolor*/ #play-area lrn-course-player-table-of-contents.ng-star-inserted {background-color:#292A2E !important;}
Thanks for the code, saved me quite some time!
For the overlay, you should be able to change it using this code:
/* Completed background message Opacity */
lrn-training-material-idle-view .lrn-course-player-training-material-idle-view-overlay {
opacity: 1 !important;
}
I completely removed opacity since I feel it gives a little bit more control over the final look.
Hi Matt,
I don’t think there’s a way to do it via a menu or so. But at least right now you can do it using CSS:
The banner is basically an “image” with a gradient from black to transparent put over the background colour. Using CSS you can play around with different colours etc., but in the end it would be the same for every course.
Personally, I’d love to be able to change the banner for every course individually and maybe even upload images instead of just using colours.
Hey just curious if you have played around with any css for this and would be willing to share. We want to get rid of the gradient black and have it as a solid color. Thanks!
Hi Matt,
I don’t think there’s a way to do it via a menu or so. But at least right now you can do it using CSS:
The banner is basically an “image” with a gradient from black to transparent put over the background colour. Using CSS you can play around with different colours etc., but in the end it would be the same for every course.
Personally, I’d love to be able to change the banner for every course individually and maybe even upload images instead of just using colours.
Hey just curious if you have played around with any css for this and would be willing to share. We want to get rid of the gradient black and have it as a solid color. Thanks!
Never mind I found it in this article if anyone else was interested
Enter your email address or username and password below to log in to Docebo Community. No account yet? Create an account
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
