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

  • 28 July 2022
  • 7 replies
  • 117 views
lrodman
Rank
Userlevel 7
Badge +5

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

 

7 replies

lrodman
Rank
Userlevel 7
Badge +5 
/*player ToC on the left*/

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

    flex-direction: row-reverse !important;

}

 

Enjoy!

dklinger
Rank
Userlevel 7
Badge +6

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

lrodman
Rank
Userlevel 7
Badge +5

Apparently I can also horizontally flip the ToC icon, tbd

lrodman
Rank
Userlevel 7
Badge +5

transform property

lrodman
Rank
Userlevel 7
Badge +5

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

elliott.vickrey
Rank
Userlevel 6
Badge

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!

Elliott V.
lrodman
Rank
Userlevel 7
Badge +5

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


Terms & ConditionsCookie settings