Customizing chapters via CSS


Has anyone had experience customizing the look and feel of the Chapters widget?

I know there are a few things you can change with the plugin’s UI Variables, but those aren’t what I’m looking change.

Some of the things I’d like to change:

  • Change the colors of the text and background
  • Have the list items hug the top rather than the bottom
  • (When chapters are on the right-hand side of the player) have the chapters element NOT move to the next line if the window is too small to accommodate

If anyone has experience or ideas for any of the above, I am happy to hear you out!


You can check this test page to see how to customize the Chapters look and feel:

Hey, I have the same question. I have a user who would like to style their chaptering using the player composer. The UI vars I found (chaptersView.plugin : true and related) don’t seem to change the player in the composer at all.