Change color of new Course and Learning Plan Player (CSS) - Light Mode

pmo
Rank
Userlevel 7
Badge +2
  • pmo
  • Docebian
  • 195 replies

Here’s some CSS that will adjust the new course player to “light mode” if you don’t like the default look and feel. 

Insert the following into the CSS editor:

/* 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: rgba(255, 255, 255, 1);
}
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: rgba(255, 255, 255, 1);
}
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);
}


And it will update your course player to look like this (not currently live in DU at this moment)
 

 

40 replies

E
Rank

Can I check, if we add this into the CSS editor it will only affect the new course player? While I’d like to test this out, ideally I don’t want to change anything on the live platform.

K
Rank
Userlevel 6
Badge +1

When i tried this it left black text on a grey button.  can i change this?

 

lrnlab
Rank
Userlevel 7
Badge +7

following 

JEntis
Rank
Userlevel 4
Badge

Can confirm this worked in our sandbox, I really like it! Thank you for figuring this out, will definitely use if Docebo opts not to give us a toggle in the final version of the new player.

This will hopefully not make the new player such a drastic visual change for our learners. And you can actually see the background now, yay!

 

C
Rank
Userlevel 4
Badge +2

This is great! Thanks for sharing this!!

dandrews
Rank
Userlevel 4

Hello! Novice CSS here. I tried adding this to our sandbox with the below steps but not seeing it updated. I’m on Extended Enterprise and wondering if I’m not doing it in the right spot.

  1. Go to Admin Menu > Configure Branding and Look
  2. Custom Styles > Enter in the CSS to the 7.0 Custom CSS 
  3. Click Save 

Any ideas what I’m doing wrong?

Thanks!

lrnlab
Rank
Userlevel 7
Badge +7

Hello! Novice CSS here. I tried adding this to our sandbox with the below steps but not seeing it updated. I’m on Extended Enterprise and wondering if I’m not doing it in the right spot.

  1. Go to Admin Menu > Configure Branding and Look
  2. Custom Styles > Enter in the CSS to the 7.0 Custom CSS 
  3. Click Save 

Any ideas what I’m doing wrong?

Thanks!

yes that sounds right but hard to tell without seeing your screen. I just applied the code and it works well...you can also play around with the colours and transparency which is helpful 

pmo
Rank
Userlevel 7
Badge +2

@dandrews You need to apply the code within the domain itself. (Gear Icon.>Extended Enterprise>Manage> Configure Branding Look and Feel)

Apply that code there and you should see it within that extended enterprise domain.

pmo
Rank
Userlevel 7
Badge +2

When i tried this it left black text on a grey button.  can i change this?

 



Can you take a larger screenshot and some steps to reproduce? I haven’t seen this issue yet. Also I might suggest reapplying the code.

One other question - do you have a lot of other CSS adjustments in your platform?

pcarr
Rank
Userlevel 4
Badge

When i tried this it left black text on a grey button.  can i change this?

 



Can you take a larger screenshot and some steps to reproduce? I haven’t seen this issue yet. Also I might suggest reapplying the code.

One other question - do you have a lot of other CSS adjustments in your platform?

I had a similar issue - my resume or start training box is typically a darker blue with white type and when i switched to this, I couldn’t see the text and the box was dark gray.

pmo
Rank
Userlevel 7
Badge +2

When i tried this it left black text on a grey button.  can i change this?

 



Can you take a larger screenshot and some steps to reproduce? I haven’t seen this issue yet. Also I might suggest reapplying the code.

One other question - do you have a lot of other CSS adjustments in your platform?

I had a similar issue - my resume or start training box is typically a darker blue with white type and when i switched to this, I couldn’t see the text and the box was dark gray.


Could you give me the steps necessary to recreate that resume training button? I’m having a hard time in my platform.

pmo
Rank
Userlevel 7
Badge +2

It’s hard to know where you’re seeing this without seeing a full screenshot. 

edit: I see it in the above screenshot by another user. 

Still trying to recreate it in my platform but no success.

D
Rank

I need to change just the Agenda and the course player header to be black text on a white background and not change any of the other things (like the Resume Training button, etc.). I have implemented no other CSS in my platform. 

Would that initial CSS code make these changes for me without altering other things?

And can I test this in Preview mode so if I mess it up, it doesn’t negatively impact the users who are actively in the system (doesn’t activate for all until I can fully troubleshoot it)?

Thanks so much!

Deb

aswartz
Rank
Userlevel 5
Badge

Can I check, if we add this into the CSS editor it will only affect the new course player? While I’d like to test this out, ideally I don’t want to change anything on the live platform.

 

Did you get an answer for this Elliot? I’m not sure if I can apply the CSS code in preview mode or if I have to wait till we’ve fully switched to the new player. We don’t have a sandbox. 

Thanks,

Aimee

A
Rank
Userlevel 1
Badge

Can I check, if we add this into the CSS editor it will only affect the new course player? While I’d like to test this out, ideally I don’t want to change anything on the live platform.

 

Did you get an answer for this Elliot? I’m not sure if I can apply the CSS code in preview mode or if I have to wait till we’ve fully switched to the new player. We don’t have a sandbox. 

Thanks,

Aimee

I have been using css in preview mode and it only seems to affect the new course player.

lrnlab
Rank
Userlevel 7
Badge +7

yes, same here...it only applies to the new course player

E
Rank

I hadn’t had an answer no, but thanks both for confirming! 

S
Rank
Userlevel 3

Thank you very much for sharing this! We will have a closer look at how we will design the new course player and this is very helpful. 🙂

However, a word of caution here: Using the Angular variables to customize the CSS may cause failures in the future. We experienced this recently with the prefix change from “--hyd-” to “--ui-”. You should keep this in mind while making changes. 😉

FionaR
Rank
Userlevel 3

Thank you for this CSS code, we’ve implemented in our system as we don’t like the dark theme. 

We did notice, however, that it doesn’t work well when you use folders in a course beause the folder icon and dropdown arrow disappear:

We’ve found the tag to adjust this “--ui-color-icon-negative” but as you can see from the right side of the image, colours other than white don’t work well with the learning object colours, i.e., html objects, video objects, etc. 

Has anyone come up with a colour combination for the light theme that works for the icons as well?

Thanks! 

Fiona

J
Rank

Hi, the light theme is great but I cannot see the video controls (play/stop etc) because they are white and my videos have a mostly white background. Can I change the colour of the controls to black? Any help would be much appreciated.

KMallette
Rank
Userlevel 7
Badge +5

@dandrews You need to apply the code within the domain itself. (Gear Icon.>Extended Enterprise>Manage> Configure Branding Look and Feel)

Apply that code there and you should see it within that extended enterprise domain.

When I follow these steps in my SANDBOX, the Configure Branding Look/Feel button takes me back to my production domain. I don’t want to make any changes in production.

How do I implement the “light theme” in the sandbox? The new course player is activated for all of my EE domains so I THINK that should eliminate the need to add the light them to each domain. I have also added the code to the Custom Styles section of Configure Branding and Look. When I review any course from the Learner mode, I just get the original theme. I have also cleared my browser history/cache.

KMallette/Viasat, Inc.
KMallette
Rank
Userlevel 7
Badge +5

@dandrews You need to apply the code within the domain itself. (Gear Icon.>Extended Enterprise>Manage> Configure Branding Look and Feel)

Apply that code there and you should see it within that extended enterprise domain.

When I follow these steps in my SANDBOX, the Configure Branding Look/Feel button takes me back to my production domain. I don’t want to make any changes in production.

How do I implement the “light theme” in the sandbox? The new course player is activated for all of my EE domains so I THINK that should eliminate the need to add the light them to each domain. I have also added the code to the Custom Styles section of Configure Branding and Look. When I review any course from the Learner mode, I just get the original theme. I have also cleared my browser history/cache.

I figured out how to do this … not straight forward and not sure what other ramifications it will have on my sandbox environment. But hey, what are sandboxes for 😄

In the sandbox,

  1. Go to EE > a domain > Edit button next to Configure Branding Look/Feel.
  2. Change from “New Domain” to “Subfolder of sandbox domain”
    1. Note: my PROD environment is set to use New Domains for each of my tenants so I can customize the URL appropriately.
  3. Use the Configure Branding Look/Feel to add the customized light theme CSS.
KMallette/Viasat, Inc.
pmo
Rank
Userlevel 7
Badge +2

@dandrews You need to apply the code within the domain itself. (Gear Icon.>Extended Enterprise>Manage> Configure Branding Look and Feel)

Apply that code there and you should see it within that extended enterprise domain.

When I follow these steps in my SANDBOX, the Configure Branding Look/Feel button takes me back to my production domain. I don’t want to make any changes in production.

How do I implement the “light theme” in the sandbox? The new course player is activated for all of my EE domains so I THINK that should eliminate the need to add the light them to each domain. I have also added the code to the Custom Styles section of Configure Branding and Look. When I review any course from the Learner mode, I just get the original theme. I have also cleared my browser history/cache.

I figured out how to do this … not straight forward and not sure what other ramifications it will have on my sandbox environment. But hey, what are sandboxes for 😄

In the sandbox,

  1. Go to EE > a domain > Edit button next to Configure Branding Look/Feel.
  2. Change from “New Domain” to “Subfolder of sandbox domain”
    1. Note: my PROD environment is set to use New Domains for each of my tenants so I can customize the URL appropriately.
  3. Use the Configure Branding Look/Feel to add the customized light theme CSS.

I think you can avoid these steps by making sure to login through your docebosaas.com url.

KMallette
Rank
Userlevel 7
Badge +5

@dandrews You need to apply the code within the domain itself. (Gear Icon.>Extended Enterprise>Manage> Configure Branding Look and Feel)

Apply that code there and you should see it within that extended enterprise domain.

When I follow these steps in my SANDBOX, the Configure Branding Look/Feel button takes me back to my production domain. I don’t want to make any changes in production.

How do I implement the “light theme” in the sandbox? The new course player is activated for all of my EE domains so I THINK that should eliminate the need to add the light them to each domain. I have also added the code to the Custom Styles section of Configure Branding and Look. When I review any course from the Learner mode, I just get the original theme. I have also cleared my browser history/cache.

I figured out how to do this … not straight forward and not sure what other ramifications it will have on my sandbox environment. But hey, what are sandboxes for 😄

In the sandbox,

  1. Go to EE > a domain > Edit button next to Configure Branding Look/Feel.
  2. Change from “New Domain” to “Subfolder of sandbox domain”
    1. Note: my PROD environment is set to use New Domains for each of my tenants so I can customize the URL appropriately.
  3. Use the Configure Branding Look/Feel to add the customized light theme CSS.

I think you can avoid these steps by making sure to login through your docebosaas.com url.

Humm...experience would say it doesn’t matter. I always log in thru a .docebosaas.com URL, both in PROD and sandbox. But thanks for the thought :-)

KMallette/Viasat, Inc.
FionaR
Rank
Userlevel 3

Morning, all,

@pmo thanks for this CSS to help us create a light version for the new course player. 

We’ve tried it on our LMS and did like it, however, ran into an issue with the folder icons not showing up; folders end up looking like titles and it’s not clear that you have to click them to expand it to show learning assets:

I tried tagging the icon colour to change only it and make it darker but that didn’t work with the green/blue learning assets. 

In the end, the best I’ve come up with is:

  1. I’ve adjusted the “Main” platform colour from our dark blue to a lighter blue which is what populates the Assessment icon
  2. I’ve changed the shade of green for the “confirmation message” colour which controls the green “completed” circle
  3. Then I’ve added code a line of code to the “lrn-course-player-play-area” section of your code to darken the icon to a grey --ui-color-icon-negative: rgb(216, 216, 216,1);

This has brought us to:

 

It’s not ideal, but it’s the best we’ve been able to come up with since the Learning asset icons are controled by our main brand colours. This will, however, be very problematic when we work with our clients who have branded instances. 

We’re going to have to custom code each instance and with some brand colours we’re going to struggle to get an icon colour that works across all of the current icons (i.e., yellow/orange, etc.)

Thanks,

Fiona

 

Reply


Terms & ConditionsCookie settings