How to add CSS

Support
1

Hey All!

I’m wanting to add that “Flashing when loop active” custom CSS style…

I don’t know how to do this. So before i go and paste the code in the scripts.js file, I thought i best ask…

And yes i dig have a little dig around but couldn’t see this asked or explained anywhere?

Is it as simple as doing what i mentioned?

Please advise so i don’t open a can of spaghetti!

Cheers
Trent

2

Hey @Trent_Crawford , are you referring to this CSS from the Full Screen Loop Indicator?

@keyframes performance-looping {
  from {
    background-color: rgba(0, 0, 0, 0);
  }
  to {
    background-color: #4a271b;
  }
}

.performance.looping {
  /* change the duration here if you'd like the animation to be slower */
  animation: performance-looping 0.3s alternate linear infinite;
}

If so, it needs to be pasted inside the styles.css file. The scripts.js file is for javascript code. If you need more clarification, feel free to reply.

2 Likes
3

It was the one that worked in the lyrics page…

.lyrics-page, .performance {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
url(“/custom-styles/bg.jpg”);
background-position: center;
background-size: cover;
}

@keyframes performance-looping {
from
.lyrics-page, .performance {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
url(“/custom-styles/bg.jpg”);
background-position: center;
background-size: cover;
}
to {background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url(“/custom-styles/bg.jpg”);
background-position: center;
background-size: cover;
}
}

.performance.looping {
/* change the duration here if you’d like the animation to be slower */
animation: performance-looping 0.3s alternate linear infinite;
}

Excellent! Thankyou.

Is it possible to have multiple custom code in the one file? Is that how that works? I don’t have my eyes on anything else yet - but if there was something is that just a case of pasting it in the same file?

4

Yes, you can absolutely have as many custom styles as desired in a css file. In the case of the css you mentioned, I may be stating the obvious but if you’re wanting a custom background image, you’ll need an image inside the custom-styles folder that matches the name in your css code

url(“/custom-styles/bg.jpg”);
// can be changed to match your specific image
url(“/custom-styles/my-custom-image-name.jpg”);
1 Like
5

Excellent!

You were not stating the obvious, to me at least! But i think I’m starting to see how is all working, on the surface at least.

I don’t need / want an image - i chose that code because i need it to work on the lyrics page. I assume the original code only worked on the performance page.

Cheers, about to give it a go.

T