Jump to content

Adding Flashing Christmas Lights to your header

Go to admin cp customization click theme you want snow in click paint brush of the theme click header & footer add this to Header HTML.
Chistmas Lights
<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></li>
</ul>
<style>
.lightrope { text-align: center; white-space: nowrap; overflow: hidden; position: absolute; z-index: 1; margin: -15px 0 0 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: 20px; display: inline-block; background: #2bd232; box-shadow: 0px 4.6666666667px 24px 3px #2bd232; webkit-animation-name: flash-1; animation-name: flash-1; webkit-animation-duration: 2s; animation-duration: 2s; }
.lightrope li:nth-child(2n + 1) { background: #40aecf; box-shadow: 0px 4.6666666667px 24px 3px rgba(64, 174, 207, 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: #8e0717; box-shadow: 0px 4.6666666667px 24px 3px #8e0717; webkit-animation-name: flash-3; animation-name: flash-3; 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: #222; 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 #222 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: #2bd232; box-shadow: 0px 4.6666666667px 24px 3px #2bd232; }
50% { background: rgba(43, 210, 50, 0.4); box-shadow: 0px 4.6666666667px 24px 3px rgba(43, 210, 50, 0.2); }
}
@keyframes flash-1 {
0%, 100% { background: #2bd232; box-shadow: 0px 4.6666666667px 24px 3px #2bd232; }
50% { background: rgba(43, 210, 50, 0.4); box-shadow: 0px 4.6666666667px 24px 3px rgba(43, 210, 50, 0.2); }
}
@-webkit-keyframes flash-2 {
0%, 100% { background: #40aecf; box-shadow: 0px 4.6666666667px 24px 3px #40aecf; }
50% { background: rgba(64, 174, 207, 0.4); box-shadow: 0px 4.6666666667px 24px 3px rgba(64, 174, 207, 0.2); }
}
@keyframes flash-2 {
0%, 100% { background: #40aecf; box-shadow: 0px 4.6666666667px 24px 3px #40aecf; }
50% { background: rgba(64, 174, 207, 0.4); box-shadow: 0px 4.6666666667px 24px 3px rgba(64, 174, 207, 0.2); }
}
@-webkit-keyframes flash-3 {
0%, 100% { background: #8e0717; box-shadow: 0px 4.6666666667px 24px 3px #8e0717; }
50% { background: rgba(142, 7, 23, 0.4); box-shadow: 0px 4.6666666667px 24px 3px rgba(142, 7, 23, 0.2); }
}
@keyframes flash-3 {
0%, 100% { background: #8e0717; box-shadow: 0px 4.6666666667px 24px 3px #8e0717; }
50% { background: rgba(142, 7, 23, 0.4); box-shadow: 0px 4.6666666667px 24px 3px rgba(142, 7, 23, 0.2); }
}
</style>


Admin
By Admin in Customizing your forums ·

Adding snow to your V5 theme

Uploading Attachment...Go to admin cp customizations click theme you want snow in click paint brush of the theme click header & footer add this to Header HTML.
<!-- Let it Snow! --> <div id="snow"></div> <style> #snow { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 1000; } </style> <script> document.addEventListener('DOMContentLoaded', function(){ var script = document.createElement('script'); script.src = 'https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js'; script.onload = function(){ particlesJS("snow", { "particles": { "number": { "value": 200, "density": { "enable": true, "value_area": 800 } }, "color": { "value": "#ffffff" }, "opacity": { "value": 0.7, "random": false, "anim": { "enable": false } }, "size": { "value": 5, "random": true, "anim": { "enable": false } }, "line_linked": { "enable": false }, "move": { "enable": true, "speed": 5, "direction": "bottom", "random": true, "straight": false, "out_mode": "out", "bounce": false, "attract": { "enable": true, "rotateX": 300, "rotateY": 1200 } } }, "interactivity": { "events": { "onhover": { "enable": false }, "onclick": { "enable": false }, "resize": false } }, "retina_detect": true }); } document.head.append(script); }); </script> Results:





Admin
By Admin in Customizing your forums ·

Changing the size of fontawesome icons user panel V5

CSS: ADD TO THE THEME EDITOR OF YOUR THEME you can also change icons by changing the code.
/* Larger, bolder user panel icons */ .ipsUserNav__icon{ font-weight: 900; font-size: 18px; } /* changing code */ .fa-flag{ --fa: "\f071"; /*<----change this code*/ --fa--fa: "\f071\f071"; /*<----change this code*/ color: white; min-width: 1.2em; text-align: center; font-weight: 900; font-size: 20px; }
by changing the code:
Admin
By Admin in Customizing your forums ·