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;
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');
}Related Post: Adding PHP to the Divi Theme
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