Free CSS: Make the table of contents appear on the left

  • 28 July 2022
  • 6 replies
  • 58 views

Userlevel 4
Badge +1

For docebo-native course player

 

I want to match articulate rise and articulate storyline courses where the ToC is on the left


6 replies

Userlevel 4
Badge +1
/*player ToC on the left*/

.mdl-grid.course-player-elements__wrapper.mdl-cell--12-col{

    flex-direction: row-reverse !important;

}

 

Enjoy!

Userlevel 7
Badge +5

This is mad clever this adjustment...most people read from left to right - so having the TOC element on the left is MOST welcome.

Userlevel 4
Badge +1

Apparently I can also horizontally flip the ToC icon, tbd

Userlevel 4
Badge +1

transform property

Userlevel 4
Badge +1

My rotation of the ToC icon isn’t working, any idea @dklinger ?

i.zmdi-mode-full.bg-accent.bg-circle-button.mdl-cell--hide-tablet.mdl-cell--hide-phone.ng-star-inserted {

    transform: rotate(180deg) !important;

}

 

And thank you for the praise :) 

Userlevel 2

Thank so much for sharing this with everyone@lrodman! I just wanted to let you all know about how you can post code in community to avoid being picked up by the spam filter.

You can put code inside a box so the spam filter knows it's code!

You can find this feature by clicking the ellipsis menu and selecting Code when drafting your reply. Here’s a quick video to demonstrate:

 

 

I hope you find this useful, and thank you again!

Reply