Best Answer

Where can I edit the New Course Page look and feel and banner


Userlevel 1

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 ? 

icon

Best answer by thaldane 22 May 2023, 23:00

View original

10 replies

Userlevel 3
Badge

@Matt270888 

I think this may help, since I asked a similar question 

 

Userlevel 1

Thanks @Isram 
Its the back ground colours, as I can’t seem to see where this colour scheme is coming from… 

Example below:

 

Userlevel 3
Badge

Theres an idea to change this….please vote

 

Userlevel 3

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.

Userlevel 3

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. 

Userlevel 3

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

 

Userlevel 3

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.

Userlevel 1
Badge

 

 

Userlevel 1
Badge

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!

Userlevel 1
Badge

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

 

Reply