Swap image on Mouse over

Add this code to the Divi Theme Options >Custom CSS or Child theme style.css

<style type=”text/css”>

.fader img { transition: 1s ease-in-out; }
img.swap1, div.fader:hover img.swap2 { opacity: 1.0; }
.fader:hover img.swap1, img.swap2 { opacity: 0; }


Put this section into a code module after editing the path to your own image files.

<div class="fader">
<img class="swap1" style="position: absolute;" src="image1.jpg" alt="" height="320" width="320"><img class="swap2" src="image2.jpg" alt="" height="320" width="320">
App style drop down mobile menu

/** App Style header and Drop Down Menu **/

.mobile_nav.opened .mobile_menu_bar:before {

content: “\4d”;


Collapse Nested Mobile Menu items

Paste this code into Divi Theme Options > Integrations > Add code to the body.

.et_mobile_menu .menu-item-has-children > a { background-color: transparent; }
#main-header .et_mobile_menu li ul.sub-menu.hide { display: none !important; visibility: hidden !important; transition: all 1.5s ease-in-out;}
#main-header .et_mobile_menu li ul.sub-menu.visible { display: block !important; visibility: visible !important; }
.et_mobile_menu .menu-item-has-children > a:after { content: ‘+’; position: absolute; right: 20px; }
(function($) {

function setup_collapsible_submenus() {
var $menu = $(‘#mobile_menu’),
top_level_link = ‘#mobile_menu > .menu-item-has-children > a’;
$menu.find(‘a’).each(function() {

if ( $(this).is(top_level_link) ) {
$(this).attr(‘href’, ‘#’);

if ( ! $(this).siblings(‘.sub-menu’).length ) {
$(this).on(‘click’, function(event) {
} else {
$(this).on(‘click’, function(event) {

$(window).load(function() {
setTimeout(function() {
}, 700);

Keep the footer text small on a smartphone
I find the Footer Text comes out too large on the iPhone but you can only specify its size in one place in the Divi Builder and only using pixels. To stop the footer text being so large on the iPhone, specify it in EMs rather than pixels:
#footer-info {
    font-size: 0.7em;
Display a faded grey image until you hover over it.

Insert your image and click the pencil icon to edit its properties – make the Image CSS Class: grey_logo

Add the following code to the Theme Options Panel

.grey_logo {
-webkit-filter: saturate(0%) opacity(50%);
filter: opacity(0.5) saturate(0%);

.grey_logo:hover {
-webkit-filter: saturate(1) opacity(100%);
filter: saturate(1); opacity(1);

Works in Firefox, Safari & Chrome – who cares about Internet Explorer?

Send Internet Explorer Users to another URL

Copy the header.php from the parent theme to the child theme folder and edit it to include the following code at the very top. This will send IE7 users to another website that could be tailored to work for them.

<?php if ( strpos( $_SERVER[‘HTTP_USER_AGENT’], ‘MSIE 7’ ) ) {
header( ‘Location: http://macnetwork.co.uk/’ ) ;
} ?>

Overlay a screen effect on an image:

This effect uses a .png file as a screen overlay

#fly-screen {
    background: transparent url("http://domain.com/wp-content/uploads/2015/11/pattern.png") repeat scroll left top;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
Adding Google Fonts
First get the code from Google Fonts Import
add the following to the Custom CSS
@import url(https://fonts.googleapis.com/css?family=Sniglet);
h1, h2, h3, h4, h5, h6 {
    font-family: "Sniglet",cursive!important;
Add a Message before the Divi Captcha
.et_pb_contact_right:before {
color: #afafaf;
content: "(to show you're human) ";
position: static;
for B&W Map change percentage for saturation
.et_pb_map_container {
    filter: url("data:image/svg+xml;utf8,#grayscale");
    filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%);
Apply CSS at certain screen sizes only

Sometimes you only want the CSS changes to apply at certain screen size, bracket the CSS like this:

@media screen and (max-width: 767px) {
Improve Contact Form 7 appearance
.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar {
background-color: #fff !important;
border: none !important;
width: 100% !important;
-moz-border-radius: 2 !important;
-webkit-border-radius: 2 !important;
border-radius: 2 !important;
font-size: 14px;
color: #999 !important;
padding: 8px !important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
.wpcf7-submit {
color: #F28A00 !important;
margin: 6px auto 0;
cursor: pointer;
font-size: 20px;
font-weight: 500;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 1px 10px;
line-height: 1.7em;
background: transparent;
border: 2px solid;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
.wpcf7-submit:hover {
background-color: #fff;
padding: 1px 10px !important;
Increase Saturation on gallery thumb nails

In Custom CSS / Main Element

-webkit-filter: saturate(1.75);
filter: saturate(1.75);
See the (more...) link when viewing post category

Use the More button in the post editor to add a break point. You can also put <!–more–> using the Text Editor 

Then go to Divi Theme Options:



That should do it.

Make Superscript look right & proper
    font-size: 70%;
    vertical-align: text-middle;
    line-height: 0;
Make SVG resize properly in IE9+10
 * Let's target IE to respect aspect ratios and sizes for img tags containing SVG files
 * [1] IE9
 * [2] IE10+
/* 1 */
.ie9 img[src*=".svg"] {
  width: 100%;
/* 2 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  img[src*=".svg"] {
    width: 100%;