1
if (!function_exists('divibooster_add_fairy_lights_to_section')) {
2
	
3
	function divibooster_add_fairy_lights_to_section($output, $render_slug, $module) {
4
		
5
		if (is_string($output) && isset($module->props['module_class']) && in_array('fairy-lights', explode(' ', $module->props['module_class']))) {
6
			
7
			// Create the fairy lights HTML
8
			$fairy_lights = '<div class="fairy-lights-inner" style="">';
9
			
10
			// Cycle through the colors for each light
11
			for($i = 0; $i < 100; $i++) { 
12
				$color = '';
13
				switch($i % 4) {
14
					case 0 : $color = 'fairy-light-red'; break;
15
					case 1 : $color = 'fairy-light-green'; break;
16
					case 2 : $color = 'fairy-light-yellow'; break;
17
					case 3 : $color = 'fairy-light-blue'; break;
18
				}
19
				$fairy_lights .= '<span class="' . $color . '"></span>'; // ETModules lightbulb icon
20
			}
21
			$fairy_lights .= '</div>';
22
23
			// Insert our fairy lights HTML just inside the main element
24
			$output = preg_replace('/^(<div [^>]*>)/', '$1' . $fairy_lights, $output, 1);
25
		}
26
27
		return $output;
28
	}
29
	add_filter('et_module_shortcode_output', 'divibooster_add_fairy_lights_to_section', 10, 3);
30
}
31
32
if (!function_exists('divibooster_fairy_lights_css')) {
33
34
function divibooster_fairy_lights_css() {
35
?>
36
<style>
37
/* Position the fairy lights container */
38
.fairy-lights-inner {
39
	width: 100%;
40
  	text-align: center;
41
  	overflow: hidden;
42
  	white-space: nowrap;
43
  	font-size: 24px;
44
  	line-height: 1;
45
	font-family: 'ETModules' !important;
46
	position: absolute;
47
	top:0;
48
	left:0;
49
}
50
51
/* Style the individual lights */
52
.fairy-lights-inner span {		
53
	transform: scale(.9,1) rotate(180deg);
54
	display: inline-block;
55
	padding: 20px 10px 0px;
56
}
57
	
58
/* Animate the colors */
59
.fairy-light-red {
60
  color: #D22D2D; /* Classic red color */
61
  text-shadow: 0 0 10px rgba(210, 45, 45, 1), 0 0 10px rgba(210, 45, 45, 1), 0 0 10px rgba(210, 45, 45, 1); /* Red glow */
62
  animation: twinkle 1.5s infinite alternate;
63
}
64
65
.fairy-light-green {
66
  color: #0F8B0F; /* Traditional green color */
67
  text-shadow: 0 0 10px rgba(15, 139, 15, 1), 0 0 10px rgba(15, 139, 15, 1), 0 0 10px rgba(15, 139, 15, 1); /* Green glow */
68
  animation: twinkle 1.6s infinite alternate;
69
}
70
71
.fairy-light-yellow {
72
  color: #FFD700; /* Gold color */
73
  text-shadow: 0 0 10px rgba(255, 215, 0, 1), 0 0 10px rgba(255, 215, 0, 1), 0 0 10px rgba(255, 215, 0, 1); /* Gold glow */
74
  animation: twinkle 1.7s infinite alternate;
75
}
76
77
.fairy-light-blue {
78
  color: #87CEEB; /* Soft blue, akin to silver/blue */
79
  text-shadow: 0 0 10px rgba(135, 206, 235, 1), 0 0 10px rgba(135, 206, 235, 1), 0 0 10px rgba(135, 206, 235, 1); /* Soft blue glow */
80
  animation: twinkle 1.8s infinite alternate;
81
}
82
83
@keyframes twinkle {
84
  0% { opacity: 0.2; }
85
  100% { opacity: 1; }
86
}
87
88
/* String */
89
.fairy-lights-inner span:before {
90
    position: absolute;
91
    bottom: -5px;
92
    content: "";
93
    border: 1px solid #999;
94
    border-bottom-width: 0;
95
    border-left-width: 0;
96
    border-radius: 50%;
97
    padding: 3px 9px;
98
    width: 50%;
99
    border-right-width: 0;
100
    right: 0%;
101
    opacity: 0.5;
102
}
103
</style>
104
<?php
105
}
106
	
107
add_action('wp_head', 'divibooster_fairy_lights_css');
108
}