Is it possible to enlarge the notes font?

General
1

I use a system that is “Song Name {G}”

Is there a way to make the font larger and bold for just the text inside the curly brackets?

1 Like
2

You can do that using custom styles. To enlarge the font of song notes in the performance view, use the following:

.performance .song-description {
  font-size: 10vmin; /* increase this number to increase the font size */
  font-weight: bold;
}

To do the same in setlist view, you can use the following styles:

.setlist-entry .desc {
  opacity: 1 !important; /* remove this if you don't want the text to be 100% white */
  font-weight: bold;
  font-size: 1em; /* increase this to make the font larger */
}

I hope this helps! :slight_smile:

1 Like
3

Perfect! Thanks Leo. :partying_face::+1::hatching_chick:

2 Likes
4

Trying to do the same thing, but not working for me.
(Actually, I’d be happy to make all text on setlist bold and adjust size, including notes in curly brackets)
Here’s what I have:

style bold setlist
style bold setlist617×237 7.08 KB

5

The issue here is most likely the missing dot (.) in the selector. It should look like

.setlist .desc {

while yours looks like

.setlist.desc {

It’s a tiny difference, but without the space, you are styling any elements with BOTH the setlist and desc class names, and without it you are styling any desc element that is INSIDE a setlist element.

If you wanted to style all the text at once, you could use something like this:

.setlist * {
   font-weight: bold;
}

The star (*) means that ALL elements inside the setlist element will be selected and bolded.

1 Like
6

Ah! Thanks for reminding me! ALWAYS use a CSS Validator! :slight_smile:

Well, now this CSS is validated, but still not doing anything:

.setlist {
font-weight: bold;
font-size: 10em;
}

I even restarted Ableset. Still no dice…

FYI - validator didn’t like asterisk wildcard

7

When I do this:

.setlist{
font-weight: bold;
font-size: 3em;
}
.setlist .text-decoration{
font-weight: bold;
font-size: 3em;
}
.setlist .desc {
font-weight: bold;
font-size: 1em;
}

I get the intended results when EDITING the setlist, but still can’t get the same when simply displaying the setlist.

8

The reason for this is that there is actually no element with the .setlist classname, unless you are in editing mode. I’m guessing the code snippet from Leo last year was for an older version of AbleSet, and the classes have since changed.
I would suggest replacing .setlist with .setlist-entry, which works as of 3.0.0-beta.8.
As for the validator not liking the * selector, there is nothing wrong with using * except that it can be slightly slower on some websites with a massive amount of elements. It won’t matter in this case.

2 Likes
9

THANK YOU SIR! Got the intended results!
The blind can see again! LOL

2 Likes
10

Adding to this, you can enlarge the entire web app using your browser’s built-in zoom features. On desktop, most work using CMD + and CMD - to zoom in and out :slight_smile: