Change .song-name font size - talk to me like I am 5

User Styles
1

Ok so I have some basic css experience but I am simply trying to adjust the size of the .song-name element and I know I am probably doing something very dumb thats making it not work, but I need some help.

I see in the dev tools that the font size of the song name element is:

font-size: calc(var(–ui-size) * 14vmin);

I have tried adding both:

.song-name {
font-size: calc(var(–ui-size) * 8vmin);
}

and

.perfomance .song-name {
font-size: calc(var(–ui-size) * 8vmin);
}

I was attempting to keep the responsive resizing of the song name just limit its maximum size, but adding neither of those lines do anything. :roll_eyes:

2

Hey @calebstephen,

The song title size is a bit tricky to override since it’s dynamically calculated based on the length of the title. You can add the following CSS to force-override it with a fixed size:

.performance .song-name {
  font-size: calc(var(--ui-size) * 8vmin) !important;
}

Let me know if this helps :slight_smile:

3

Hi @leolabs
This is great for the Performance page.

When playing I like to stay on the SetList page. Is it possible to do a similar thing (Make the text of the song name bigger) on the SetList view?

Thank you
Mark

4

Hey @GuitarMark,

That’s also possible. Here’s a style that makes all song titles 24px large:

.setlist-entry .name {
  font-size: 24px;
}

Let me know if this works for you!

5

Oh yes! That works great! I have mine set to 36px and can see my Setlist on my iPad which is mounted on my mic stand at waist height (don’t like to make a wall of iPads in front of performers). And I can see the song list perfectly. Soooo much better. Thank you.
Maybe a feature request to make the Font Size here and a few other places adjustable from setting? Maybe colors too?
BTW, did you ever get around to adding the feature to have ‘non-song’ items in the setlist such as ‘Introduce the band’, ‘thank the venue’, ‘15 min break’ etc? Currently I have to create empty Ableton songs for breaks and things.
It was discussed in a thread here and you thought it was a cool idea (so did a few other users)
Many thanks for an amazing app!
Mark

1 Like
6

Hey @GuitarMark, I’m glad I could help!

I’m a bit hesitant to add this as an option as there are lots of different ways customers might want to customize their layout and it might lead to a fairly complex settings section. Using CSS, you have all the tools you need to customize the design of AbleSet to your liking.

Not yet, but it’s still on the very top of my todo list – I’d love to be able to use this as well! This feature just takes some time as it basically requires a complete rewrite of the underlying data structure of AbleSet and I have to make sure that doesn’t break anything.

7

I have not seen the thread discussing the “non-set list items” but that would be very sick. I second that request!

1 Like
8

Thanks Leo. Looking forward to seeing the ‘Non Setlist items’ when you get it worked out. It will be super useful.