Add Custom Styles to AbleSet using CSS

If you're familiar with CSS, AbleSet 2 allows you to easily add custom styles to the web app. You can find the custom CSS file by clicking on "Show Custom Styles" in AbleSet's settings menu.

AbleSet will automatically apply your styles when you save changes to this file.

I've tried to give most elements and states in the web app meaningful class names, but if you find yourself trying to add a style to an element that doesn't have a good class name, feel free to reach out to me!

This is an experimental feature and your styles could break the layout of the web app, so you should know what you're doing. If you want to reset your custom styles, just delete all lines from the file and save it.

Examples

Custom Fonts

Using CSS, you can change the font of elements. For example, on the performance page:

.performance {
  font-family: Georgia, "Times New Roman", Times, serif;
}

Your browser will use the first font in the list that is available. The snippet above would look like this on macOS:

Custom Backgrounds

All files in the "custom-styles" folder are served under the "/custom-styles" path, so you could add a background image called bg.jpg to the styles folder and load it like this to show it behind the lyrics, for example:

.lyrics-page {
  background-image: url("/custom-styles/bg.jpg");
  background-size: cover;
}

This results in the lyrics page looking like this: