Customizing Styles - jzohrab/lute GitHub Wiki


This documentation is deprecated/obsolete. Lute v2 has been replaced by Lute v3, a full Python rewrite. Please see the Lute v3 manual which includes notes on installation. If you have Lute v2, you can easily migrate to v3. Thank you!


Customizing styles

Lute doesn't have "theming" support yet, but you can modify the styles with a simple CSS file, data/custom_styles/custom_styles.css. Create your own data/custom_styles/custom_styles.css with whatever styles you want.

Below are some examples:

/* Change reading text font. */
span.textitem { font-size: 16px; }

/* Change background color etc for statuses: */
span.status1 { background-color: pink; }   /* status2-5 for the rest */

/* Ignored is 98 */
span.status98 { background-color: lightgrey; }

/* Well-known is 99 */
span.status99 { background-color: none; color: red; }

With those rather ugly styles, some text might look like this:

image

It's also possible to get a bit more fancy with CSS. For example, you might want to remove all background colors, except when you hover over a term:

 span[class*="status"] { background-color: transparent; }
 span.status0 { background-color: #D5FFFF; }
 span.status1:hover { background-color: #F5B8A9; }
 span.status2:hover { background-color: #F5B8A9; }
 span.status3:hover { background-color: #F5E1A9; }
 span.status4:hover { background-color: #F5E1A9; }
 span.status5:hover { background-color: #DDFFDD; }

Notes:

  • The file custom_styles.css must be valid CSS, as it is picked up verbatim and inserted into the HTML.
  • Some of the current css class names are bad (e.g. "status98" means "ignored", but that's pretty hard to follow). If those class names get changed in a future release, I'll add a note in the release notes.
  • Using css is pretty tricky, but it works for now!
⚠️ **GitHub.com Fallback** ⚠️