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

/*player ToC on the left*/

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

    flex-direction: row-reverse !important;

}

Enjoy!

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

Apparently I can also horizontally flip the ToC icon, tbd

transform property

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 :) 

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:

https://docebo.wistia.com/medias/8rvv09ldt2

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

update: for both ToC icons

/*player ToC on the left*/
.mdl-grid.course-player-elements__wrapper.mdl-cell--12-col{
    flex-direction: row-reverse !important;
}
i.zmdi-mode-full.bg-accent.bg-circle-button.mdl-cell--hide-tablet.mdl-cell--hide-phone, i.zmdi-mode-compact.bg-accent.bg-circle-button.mdl-cell--hide-tablet.mdl-cell--hide-phone {
    transform: rotate(180deg) !important;
}