Add some Christmas festive cheer to your Intranet by adding a light robe to a theme for users to see:

Application administrators of the Design Panel can follow the steps below to add the light robe to a theme.

Please note: The robe will only appear across the whole screen when the theme menu is set to appear at the top (the light robe will not work properly with the menu set to appear on the side)

Steps

1. Navigate to Admin > Design and click on the theme you want to add the light robe to.

2. Click on Edit Style and then the Advanced tab:

3. Copy following code and paste it into Custom CSS (Advanced) field:

.lightrope {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  z-index: 1;
  margin: 0;
  padding: 0;
  pointer-events: none;
  width: 100%;
}
.lightrope li {
  position: relative;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  width: 12px;
  height: 28px;
  border-radius: 50%;
  margin: 0 20px 20px;
  display: inline-block;
  background: #00f7a5;
  box-shadow: 0px 4.6666666667px 24px 3px #00f7a5;
  -webkit-animation-name: flash-1;
          animation-name: flash-1;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}

.lightrope li:nth-child(2n+1) {
  background: #FFD700;
  box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.5);
  -webkit-animation-name: flash-2;
          animation-name: flash-2;
  -webkit-animation-duration: 0.4s;
          animation-duration: 0.4s;
}
.lightrope li:nth-child(4n+2) {
  background: #f70094;
  box-shadow: 0px 4.6666666667px 24px 3px #f70094;
  -webkit-animation-name: flash-3;
          animation-name: flash-3;
  -webkit-animation-duration: 1.1s;
          animation-duration: 1.1s;
}
.lightrope li:nth-child(3n+2) {
  background: rgba(102, 0, 125, 1);
  box-shadow: 0px 4.6666666667px 24px 3px rgba(102, 0, 125, 1);
  -webkit-animation-name: flash-4;
          animation-name: flash-4;
  -webkit-animation-duration: 1.1s;
          animation-duration: 1.1s;
}
.lightrope li:nth-child(odd) {
  -webkit-animation-duration: 1.8s;
          animation-duration: 1.8s;
}
.lightrope li:nth-child(3n+1) {
  -webkit-animation-duration: 1.4s;
          animation-duration: 1.4s;
}
.lightrope li:before {
  content: "";
  position: absolute;
  background: #418045;
  width: 10px;
  height: 9.3333333333px;
  border-radius: 3px;
  top: -4.6666666667px;
  left: 1px;
}
.lightrope li:after {
  content: "";
  top: -14px;
  left: 9px;
  position: absolute;
  width: 52px;
  height: 18.6666666667px;
  border-bottom: solid #418045 2px;
  border-radius: 50%;
}
.lightrope li:last-child:after {
  content: none;
}
.lightrope li:first-child {
  margin-left: -40px;
}
@-webkit-keyframes flash-1 {
  0%, 100% {
    background: #FFD700;
    box-shadow: 0px 4.6666666667px 24px 3px #FFD700;
  }
  50% {
    background: rgba(255, 215, 0, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(255, 215, 0, 0.2);
  }
}
@keyframes flash-1 {
  0%, 100% {
    background: #FFD700;
    box-shadow: 0px 4.6666666667px 24px 3px #FFD700;
  }
  50% {
    background: rgba(255, 215, 0, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(255, 215, 0, 0.2);
  }
}
@-webkit-keyframes flash-2 {
  0%, 100% {
    background: rgba(0, 170, 0, 1);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 170, 0, 1);
  }
  50% {
    background: rgba(0, 170, 0, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.2);
  }
}
@keyframes flash-2 {
  0%, 100% {
    background: rgba(0, 170, 0, 1);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 170, 0, 1);
  }
  50% {
    background: rgba(0, 170, 0, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 170, 0, 0.2);
  }
}
@-webkit-keyframes flash-3 {
  0%, 100% {
    background: rgba(255, 53, 53, 1);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(255, 53, 53, 1);;
  }
  50% {
    background: rgba(255, 53, 53, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(255, 53, 53, 0.2);
  }
}
@keyframes flash-3 {
  0%, 100% {
    background: rgba(255, 53, 53, 1);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(255, 53, 53, 1);;
  }
  50% {
    background: rgba(255, 53, 53, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(255, 53, 53, 0.2);
  }
}
@-webkit-keyframes flash-4 {
  0%, 100% {
    background: rgba(102, 0, 125, 1);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(102, 0, 125, 1);;
  }
  50% {
    background: rgba(102, 0, 125, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(102, 0, 125, 0.2);
  }
}
@keyframes flash-4 {
  0%, 100% {
    background: rgba(102, 0, 125, 1);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(102, 0, 125, 1);;
  }
  50% {
    background: rgba(102, 0, 125, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(102, 0, 125, 0.2);
  }
}

4. Next, copy the below code and on your site scroll down and paste it into the Custom Code field:

<script>
jQuery( window ).load(function() {
 jQuery('.header-menu-container').append('<ul class="lightrope"><li></li<li></li><li></li><li></li><li></li><li></li><li></li></li><li></li><li></li><li></li><li></li><li><li></li><li></li><li></li><li></li><li></li><li></li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>')
});
</script>

5. Once both codes are pasted, click 'save' to apply this.

6. The light robe will now appear in that theme.

If you are not looking at the theme this was applied to, switch to it to check the lights appear.

7. Repeat for any other theme you want the robe to appear in.