Add Twinkling Fairy Lights in Divi

|

Why not brighten your Divi theme up this holiday with some festive fairy lights. Here's how to add fairy lights to any Divi section, row or module. Like this:

‘Twas the night before Christmas, when all through the house
Not a creature was stirring, not even a mouse;
The stockings were hung by the chimney with care,
In hopes that St. Nicholas soon would be there;

To achieve this, first add the following PHP code to your site. It's reasonably long, but don't worry – you shouldn't have to modify it in any way:

if (!function_exists('divibooster_add_fairy_lights_to_section')) {
	
	function divibooster_add_fairy_lights_to_section($output, $render_slug, $module) {
		
		if (is_string($output) && isset($module->props['module_class']) && in_array('fairy-lights', explode(' ', $module->props['module_class']))) {
			
			// Create the fairy lights HTML
			$fairy_lights = '<div class="fairy-lights-inner" style="">';
			
			// Cycle through the colors for each light
			for($i = 0; $i < 100; $i++) { 
				$color = '';
				switch($i % 4) {
					case 0 : $color = 'fairy-light-red'; break;
					case 1 : $color = 'fairy-light-green'; break;
					case 2 : $color = 'fairy-light-yellow'; break;
					case 3 : $color = 'fairy-light-blue'; break;
				}
				$fairy_lights .= '<span class="' . $color . '"></span>'; // ETModules lightbulb icon
			}
			$fairy_lights .= '</div>';

			// Insert our fairy lights HTML just inside the main element
			$output = preg_replace('/^(<div [^>]*>)/', '$1' . $fairy_lights, $output, 1);
		}

		return $output;
	}
	add_filter('et_module_shortcode_output', 'divibooster_add_fairy_lights_to_section', 10, 3);
}

if (!function_exists('divibooster_fairy_lights_css')) {

function divibooster_fairy_lights_css() {
?>
<style>
/* Position the fairy lights container */
.fairy-lights-inner {
	width: 100%;
  	text-align: center;
  	overflow: hidden;
  	white-space: nowrap;
  	font-size: 24px;
  	line-height: 1;
	font-family: 'ETModules' !important;
	position: absolute;
	top:0;
	left:0;
}

/* Style the individual lights */
.fairy-lights-inner span {		
	transform: scale(.9,1) rotate(180deg);
	display: inline-block;
	padding: 20px 10px 0px;
}
	
/* Animate the colors */
.fairy-light-red {
  color: #D22D2D; /* Classic red color */
  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 */
  animation: twinkle 1.5s infinite alternate;
}

.fairy-light-green {
  color: #0F8B0F; /* Traditional green color */
  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 */
  animation: twinkle 1.6s infinite alternate;
}

.fairy-light-yellow {
  color: #FFD700; /* Gold color */
  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 */
  animation: twinkle 1.7s infinite alternate;
}

.fairy-light-blue {
  color: #87CEEB; /* Soft blue, akin to silver/blue */
  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 */
  animation: twinkle 1.8s infinite alternate;
}

@keyframes twinkle {
  0% { opacity: 0.2; }
  100% { opacity: 1; }
}

/* String */
.fairy-lights-inner span:before {
    position: absolute;
    bottom: -5px;
    content: "";
    border: 1px solid #999;
    border-bottom-width: 0;
    border-left-width: 0;
    border-radius: 50%;
    padding: 3px 9px;
    width: 50%;
    border-right-width: 0;
    right: 0%;
    opacity: 0.5;
}
</style>
<?php
}
	
add_action('wp_head', 'divibooster_fairy_lights_css');
}

Now, on any section, row or module that you want to add fairy lights to, just give it a CSS Class of "fairy-lights", like so: 

0 Comments

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.

We may earn a commission when you visit links on our website.