Skip to main content

For docebo-native course player

 

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

 

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

 

/*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:

 

 

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

 


Reply