Printable Set List

Feature Requests Released Features
1

Would be great to save a printable set list that players could tape to the floor so they have the list in a form that doesn’t require electricity. We currently manage all our lists digitally in Ableset but must manually create lists to print.

Something like this would be great

Screenshot 2023-09-20 at 7.54.53 PM
Screenshot 2023-09-20 at 7.54.53 PM1150×898 55.7 KB

2

I agree, this is a must.

3

Agree, not only for printing but also we are sending list by email and to band discord chat. So some copy paste will be useful too. If this go to some development plan other features could be useful too as we also to email adding url to some orginal yt video and also yt url to our record to give band base for preparation. Hope that this will be added :slight_smile: @leolabs go for it

4

This is already implemented.
Just input cmd+p/ctrl+p in your browser while on setlist view.

1 Like
5

Thanks @agustinvolpe! This feature is a bit hidden, I think, but hooking into the browser’s printing options seemed like the easiest way to offer printing.

I’ve just added a section to the docs that describes this function: Importing, Exporting, and Printing Setlists – AbleSet

1 Like
6

@leolabs,

Is there (or could there be) as tag that would exclude a song in the set list from printing in the set list?

7

That’s a good idea!

AbleSet already supports custom classes for songs and sections in most views, and I could extend this support to printed setlists as well. With the next beta, you could have a song locator named Song Name [.hide-print] which in turn would allow you to style all songs with that class name using CSS:

.print-setlist .hide-print {
  display: none;
}

Would that work for your use case?

8

Yes something like that would work. Would the sone name ignore the [.hide-print] or would that be ignored in the other places? I guess if song description was disabled it would be hidden from performance view at least.

9

Yes, attributes like this one aren’t displayed as part of the song name :slight_smile:

1 Like
10

While on this, what do you think for options for only print. For example say a song is an Encore song. We could give it a class like [.label-encore] and then maybe add some CSS to make that song look different on the print?

11

Sure, you’ll be able to customize this however you like.

Here’s an example of some CSS you’ll be able to use to customize specific songs:

.print-setlist .label-encore {
  color: red; /* change the color */
  text-decoration: underline; /* add an underline */
  font-weight: normal; /* make the text less bold */
  font-style: italic; /* make the text italic */
  font-size: 40px; /* change the font size (default is 36px) */
}

The sky’s the limit :stuck_out_tongue:

1 Like
12

That’s what I was thinking if you added the CSS option to the print list but I was not sure. I’m still new to this but so flexible! Thanks.

13

@leolabs are you thinking in a 2.6.0-beta.x beta or like a 2.7.x version?

14

Hey @clarocque, this feature is already available since AbleSet 2.6.0-beta.6, but I forgot to reply in this thread. Let me know if this works on your end with the latest beta and if you have any further questions :slight_smile:

1 Like
15

OK cool I will give it a try. Not sure how I missed that - thanks!

16

@leolabs is there a document for styles I can reference for things I can not control the class to like the title of the set list (what is the h1) in the web page. The print version does not seem to be a h1 tag (unless I am attempting to modify it incorrectly).

17

The printed setlist could use some class names to help better target certain elements. In the meantime, here’s an example on how to target the setlist title:

.print-setlist > div > div {
    color: red;
}
1 Like
18

That’s a good point! I’ll add some more classes around this area of the app :slight_smile:

1 Like
19

Leo is there a reference doc for the classes that are available?

20

Hey @clarocque,

There’s currently no reference for available class names. However, you can often find the class names yourself by right-clicking the element you’d like to style and selecting “Inspect” or “Inspect Element” in the context menu:

I’d recommend using Chrome or Edge for this since they have some of the best developer tools. The class names that contain random letters are generated for every version, so you shouldn’t use those, but most elements have a human-readable class name as well that you can use to apply custom styles.

If an element doesn’t have a class name, you can still try to style it using the tag name (e.g. div, h1, etc.).

To get to the styles for the printed version of the setlist, go to the “Rendering” tab in the development tools and set “Emulate media type” to “print”.

I hope this helps!

1 Like