Adding conditional elements to your Streamersonglist overlay

I was delighted to recently discover that it’s very easy to add optional conditional elements to my StreamerSongList overlay. This is how it’s done!

Highlight your Original Songs in your Streamersonglist overlay

I play a mix of covers and my own original songs on my Twitch livestream. One of my amazing mods has kindly taken to announcing in chat when I’m playing one of my original songs, which got me thinking….

Wouldn’t it be useful to have a way of programmatically adding something to the overlays automatically when the songlist happens to be showing one of my original songs?

Here’s how to do it…

1. Define some Song Attributes.
   The obvious one in my example is to define an attribute with the label “Original” or “Original Song”, and then ensure that this attribute is ticked for each of my actual original songs.
   
   Under the Settings, click on Song Attributes (1), then click the PLUS sign (2) to add a new attribute.

2. Ensure this attribute is applied to the relevant songs.
   From your list of Songs, tick one of your target songs (1) and then
   click the pencil icon (2) to edit it.
   Choose your attribute (3), and finally, Save (4).

I’m guessing that up to now you might not have learned anything new, as you may already have attributes in place to be able to filter certain types of songs. In the next section we’ll look at how to use these attributes to conditionally show additional overlay elements.

Before you start the next section, remember add one of your target songs to your queue!

4. Add a new Element
Click Add Element (1)
Give it a name (2)
Choose the Custom Text option (3)
Click “Create”

6. Click into “Show Condition”
   
   This is probably the key thing that you came here for.
   Type attribute = Original in the box (or whatever you named your attribute back in step 1.
   
   Please note, everything is case sensitive, type attribute, not Attribute, and keep the same case as the actual attributes you defined earlier.

7. Style the text however you want it.
   
   In my case, I used the other options to add a background colour, define the font and the colour of the font, I added a 2 pixel border and made it yellow, and finally, adjusted the position of this element to get it to the right place on screen.
   
   TIP: Have your OBS open when you do this, to see the changes in situ. You may need to hide/show the overlay browser source in order for it to update the changes.

And here’s the final thing in situ. It’s very useful to have this appear just for my original songs, and I’m already thinking of ways I could add other filters and have additional elements appear.

I hope you found this useful!

Any problems, please drop a comment or question below and I will try to help.

Update – how to use an image instead of just text

In the comments, Kaiser asked a question about whether it is possible to do this with an image instead of just text.

The answer is YES.

Before you start, have your image already prepared and uploaded somewhere on the web, as your code will need to link to the URL of your image.

You still need to create a new Element to add to your overlay, and add the same Text block as in the instructions above. Give this new element a suitable unique name and write it down – we’ll need it again in a moment! In my example, I’m going to call it “Overlay-Image“.

Remember to add the conditional aspect, to set attribute = Original, as per instructions above.

You can leave the actual text part blank, as we don’t actually want to display any text this time. You will however want to resize this new element to match the image that you want to display, for example 200px by 100px.

Now we use some CSS magic to target that new element and apply a background image to it.

Click the Custom CSS button near the top left of the Overlays editing window, and paste in the following code, modifying it to suit your own details.

div[data-name="Overlay-Image"] {
background-image: url("https://path/to/your/image.png");
}

That’s it. If you don’t have your own webserver or webhosting, there are several free sites you can use to upload your image and obtain the URL of the image. Just do a Google search for “image share online” and you’ll find plenty. I tested this with the first one that came up in Google, https://imgbb.com/ and it worked fine. Just remember that you need to find the link to the actual image file itself, not just the page.