Have you used CSS on the course player to change the look / feel? Would love some ideas on what people have come up with!

  • 19 October 2021
  • 4 replies
  • 126 views

Userlevel 3
Badge

Have you used CSS on the course player to change the look / feel?  If so, I’d love to see a screenshot & a little bit of understanding as to what you’re able to accomplish w the added CSS. 

 

Would love some ideas on what people have come up! 

 

Cheers!


4 replies

Userlevel 4
Badge

Hi @josefinarod 

Nothing significant - yet - but we have made one minor tweak to hide the panel that sits under the content player. This one:

 

It seemed superfluous and just added clutter, so we disappeared it! This is the CSS:

 

/* Removes the Click Start Learning Now to begin your course bar */

.chapter-info__wrapper {
visibility: hidden!important;
}

.course-player-elements__navigation{
height: 510px;
}

 

Alan

Userlevel 6
Badge +2

Hi @josefinarod 

Nothing significant - yet - but we have made one minor tweak to hide the panel that sits under the content player. This one:

 

It seemed superfluous and just added clutter, so we disappeared it! This is the CSS:

 

/* Removes the Click Start Learning Now to begin your course bar */

.chapter-info__wrapper {
visibility: hidden!important;
}

.course-player-elements__navigation{
height: 510px;
}

 

Alan

Oooh!  Thank you for sharing @Alan!  I am going to take this back to my team to see if we can implement!

Userlevel 4
Badge

Question - I added that to my css but then I get an open area between the course player and the description widget.  I am not good at css, so i am not sure how to fix this...can you help?

 

Userlevel 4
Badge

Hi @JeanetteMcVeigh 

That’s true and it was bugging me a bit too, so I played around with it some more. I found that you can reduce the gap by using “display: none !important;”, so the revised CSS would be:

/* Removes the Click Start Learning Now to begin your course bar */
.chapter-info__wrapper {
display: none!important;
}
.course-player-elements__navigation{
height: 510px;
}

Kind regards,

Alan

Reply