Christmas Lights for Azuracast Public Page (quick and very dirty)

Christmas_Lights_Azuracast.css

.lightrope {
     text-align: center;
     white-space: nowrap;
     overflow: hidden;
     position: absolute;
     z-index: 9999;
     margin: -17px 0 0 0;
     padding: 0;
     pointer-events: none;
     width: 100%;
     height: 65px;
     top:0;
     margin-top: -51px;
}
 .lightrope li {
     position: relative;
     animation-fill-mode: both;
     animation-iteration-count: infinite;
     list-style: none;
     margin: 0;
     padding: 0;
     display: block;
     width: 9px;
     height: 13px;
     border-radius: 50%;
     margin: 19px;
     display: inline-block;
     background: rgba(0, 247, 165, 1);
     box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 1);
     animation-name: flash-1;
     animation-duration: 2s;
}
 .lightrope li:nth-child(2n+1) {
     background: rgba(0, 255, 255, 1);
     box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.5);
     animation-name: flash-2;
     animation-duration: 0.4s;
}
 .lightrope li:nth-child(4n+2) {
     background: rgba(247, 0, 148, 1);
     box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 1);
     animation-name: flash-3;
     animation-duration: 1.1s;
}
 .lightrope li:nth-child(odd) {
     animation-duration: 1.8s;
}
 .lightrope li:nth-child(3n+1) {
     animation-duration: 1.4s;
}
 .lightrope li:before {
     content: "";
     position: absolute;
      
     /*** Change cap color if needed ***/
      
     background: #2e2e2e;
     width: 7px;
     height: 7px;
     border-radius: 3px;
     top: -5px;
     left: 1px;
}
 .lightrope li:after {
     content: "";
     top: -15px;
     left: 3px;
     position: absolute;
     width: 50px;
     height: 18px;
      
     /*** Change wire color if needed ***/
      
     border-bottom: solid #2e2e2e 2px;
     border-radius: 50%;
}
 .lightrope li:last-child:after {
     content: none;
}
 .lightrope li:first-child {
     margin-left: -40px;
}
 @keyframes flash-1 {
     0%, 100% {
         background: rgba(0, 247, 165, 1);
         box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 1);
    }
     50% {
         background: rgba(0, 247, 165, 0.4);
         box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 0.2);
    }
}
 @keyframes flash-2 {
     0%, 100% {
         background: rgba(0, 255, 255, 1);
         box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 1);
    }
     50% {
         background: rgba(0, 255, 255, 0.4);
         box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.2);
    }
}
 @keyframes flash-3 {
     0%, 100% {
         background: rgba(247, 0, 148, 1);
         box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 1);
    }
     50% {
         background: rgba(247, 0, 148, 0.4);
         box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 0.2);
    }
}

JS_for_Public_Pages.js

lightrope_div = document.createElement( 'div' ); 
lightrope_div.classList.add("lightrope");
li_item = document.createElement( 'li' ); 
for(var i = 0; i < 50; i++){
  lightrope_div.appendChild(li_item.cloneNode(true));
}
document.body.appendChild(lightrope_div);

A lit bit of Xmas for your Azuracast Station public page (very dirty but quick ;) ).

1. Go to Administration -> Custom Branding

2. Copy and paste the above css into Custom CSS for Public Pages section

– if you need to change wire color and cap color of bulbs — change background color in .lightrope li:before and .lightrope li:after

4. Copy and paste the above js into Custom JS for Public Pages section
5. Save
6. Enjoy

Special thanks to tobyj from codepen for initial scss styles :)

hi! Thanks for share this.

I'm trying to use this in a test instance without any luck.
This instance is a fresh new one, so there is not any customization yet.

This should work with new Azuracast versions?

Hi! Probably in newer versions has been a change with layouts.

You can try removing margin-top: -51px; from

.lightrope {
     text-align: center;
     white-space: nowrap;
     overflow: hidden;
     position: absolute;
     z-index: 9999;
     margin: -17px 0 0 0;
     padding: 0;
     pointer-events: none;
     width: 100%;
     height: 65px;
     top:0;

-----
Remove this 
     margin-top: -51px;
----

}

Ohhhhh my... YOU'RE MY HERO!
It worked like a charm!!!
Thanks for this!!!!!

Do you have either some examples to how change the CSS layout of the public pages in general?
The Azucast documentation is not so handy for this specifically.

I want to add the color palette of my web on the players, podcast, etc.

you can try and open your page in a browser with inspect mode. You then can see all the styles and play with them, then copy to to your azuracast. That's usually how it's done.
e.g.

@import url('https://fonts.googleapis.com/css2?family=Workbench:BLED,SCAN@10,-4&display=swap');
.card {
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.3);
  background: repeating-linear-gradient( 0deg, #90eeac30, #10290c33 2px, #10290c4d 2.5px );
  padding: 10px;
  font-family: "Workbench", sans-serif!important;
  color: lightgreen;

}
body.page-minimal:not(.embed) #main {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding:0rem!important;
}
.progress.h-5 {
  height: 10px;
}
.form-range::-webkit-slider-runnable-track {


    background: lightgreen!important;


    
}
.form-range::-moz-range-track {
 
    background: lightgreen!important;
}

@media (max-width: 450px) {
    .card-body.buttons {
        display: none;
    }
}
.card-body.buttons {
    position: absolute !important;
    top: 15px;
    right: 0;
}
.form-range::-webkit-slider-thumb {
   background:lightgreen!important;
  
}
.form-range::-moz-range-thumb {
  background:lightgreen!important;
}
.radio-player-widget .radio-controls .radio-control-select-stream #btn-select-stream {
  font-size: 1.2rem;
  color: lightgreen;
  background: #173b1c8a;
  border-color: lightgreen;
}
.bg-secondary {
  --bs-bg-opacity: 1;
  background-color: lightgreen!important;
}

    .card-body.buttons {
        display: none;
    }



.text-secondary {
   color: lightgreen!important;
}
.radio-player-widget .radio-controls .radio-control-select-stream #btn-select-stream {
  font-size: 1.2rem;
  color: lightgreen;
  background: #173b1c8a;
}
.radio-player-widget .now-playing-details .time-display .time-display-played {
  margin-right:.5rem;
  color: lightgreen !important;
}
.radio-player-widget .now-playing-details .time-display .time-display-progress {
  color: lightgreen !important;

}
.radio-player-widget .now-playing-details .time-display .time-display-total  {
  color: lightgreen !important;
}
.radio-player-widget .radio-controls .radio-control-play-button .icon {
  font-size: 3.25rem;
  color: lightgreen;
}
.radio-player-widget .radio-controls .radio-control-select-stream #btn-select-stream {
  font-size: 1.2rem;
  color: lightgreen;
}
 
body.page-minimal .public-page {
  min-height: calc(100dvh - 5rem);
  display: flex;
  height: 100vh;
  /* background: repeating-linear-gradient( 0deg, #90ee9033, #10290c33 1px, #10290c33 1px, #10290c4d 2.5px ); */
  background: linear-gradient(rgba(24, 29, 25, 0.2) 50%,rgba(36, 92, 24, 0.25) 50%),linear-gradient(180deg,rgba(26, 237, 8, 0.04),rgba(0, 255, 0, 0.11),rgba(0, 0, 255, 0.12));
  background-size: 100% 4px,4px 100%;
  margin-top: calc(100vh - 100vh);
}

Nice!!
Now I understand why I hate frontend :D

Thanks a lot!

Sorry for abusing your kindness...
Do you have some example for the podcast section?

I don’t. Didn’t apply any styles to podcast page. But again you can open your page in a browser with inspect mode. You then can see all the styles and play with them, then copy to to your azuracast. It’s easier than you think and it’s fun;)

Yes I know about the inpection part.

But I don't fully understand all the clases and another things. I'll look for some YT tutorial or something.

Thanks again!!!!

as example

#podcast  .card {
  border-radius: 40px;
  background: red !important;
  padding: 10px;
}
#podcast .card-header {
 background: linear-gradient(153deg, rgb(2, 0, 36) 0%, rgb(121, 9, 42) 35%, rgba(87,0,255,0.8897758932674632) 100%) !important;
  border-radius: 40px;
}

#podcast  .page-link  {
  background-color:green;
}

#podcast  .datatable-main {
    border-radius: 10px;
}

[data-bs-theme="dark"] .table-striped {
  --bs-table-striped-bg: #5b6a97;
}

[data-bs-theme="light"] .table-striped {
  --bs-table-striped-bg: #5b6a97;
}

you're the best!
I'm fully happy with this.

Thanks a lot!!!!!!!!!!!!!!!!!!