Lyrics page Section header size

General
1

Is it possible to adjust the size of the song section headers on the lyrics pages? I know you can turn them off altogether, but I’d like to be able to keep them, and just make them smaller. I’m using the [tiny] tag for my lyrics, and the section headers just feel kind of obtrusive. I don’t think it’s the size of the text in the header that’s an issue for me, so much as the extra space/padding that the bubble around it uses… just wondering if there’s any customization ability for those. Everything on the canvas is so customizable now, that I’m just getting nitpicky. Haha. You guys are doing amazing work. Thanks!

2

Hey Josh,

Yes, you can make the section headers feel less obtrusive using Custom Styles.

Since in your case it’s mostly the bubble padding (not the text size itself), try pasting this into your styles.css(click the AbleSet tray icon → gear icon → “Show Global Custom Styles”):

/* Lyrics section headers */
.lyrics-page .section h3.clickable {
  padding: 0.15em 0.55em !important;
  margin: 0.15em 0 !important;
  line-height: 1.05 !important;
  border-radius: 0.9em !important;
}

/* Optional: reduce spacing of the whole section header row */
.lyrics-page .section {
  margin: 0.2em 0 !important;
}

That will tighten up the bubble and reduce the extra vertical space.

If you’d also like to experiment with smaller header text, you can add this and tweak the font-size value to taste:

/* Reduce only the section header text size */
.lyrics-page .section h3.clickable {
  font-size: 4em !important;   /* adjust this value to your liking */
}

Just modify the font-size until it feels balanced with your [tiny] lyrics setup.

Hope this helps!