Custom logo for mobile devices

To set up a custom logo for mobile devices, add this css code to Divi->Theme Options->General Panel->Custom Css and change the marked value:

@media only screen and (max-width: 767px) {
.et_fixed_nav #logo {
content: url('http://www.thexyz/images/logo.png') !important;

Different logo on homepage with Elegant Themes

If you are looking to have a different logo on the homepage for an Elegant Theme, whether it be Divi or Extra or any other theme. You can do so with the followng custom CSS.

.home .et_pb_fullwidth_menu #logo {
content: url('') !important;

Remove background sidebar widget on Extra

If you are using the Extra theme by elegant themes then you may want to behave so when there is no text in the title of widget there is not shown the bar with the background colour. Simply add this code via custom CSS.

.et_pb_widget .widgettitle {
padding: 0px 20px;
div#text-482803448 .widgettitle,div#text-482803462 .widgettitle,div#text-482803455 .widgettitle,div#text-482803473 .widgettitle,div#text-482803457 .widgettitle,div#recent-comments-3 .widgettitle{
padding:10px 20px;

Integrating Gravity forms with DIVI

If you are using the best forms plugin (Gravity Forms) with one of the best WordPress themes (DIVI), you will notice that they do not integrate very well together. A recent web design project required various forms to all look similar so I set to work on integrating the two. Adding the below code to your custom CSS box in DIVI theme options should be enough for a get DIVI looking forms powered by Gravity Forms.

div.entry-content .gform_wrapper form div.gform_body ul.gform_fields input,
div.entry-content .gform_wrapper form div.gform_body ul.gform_fields select {
margin-bottom: 0

body .gform_wrapper input {
 margin:-31px 0 -42px 0!important;
.entry-content .gform_wrapper input {

body .gform_wrapper h3.gform_title {

body .gform_wrapper .gform_footer,body .gform_wrapper .gform_page_footer {

body .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),body .gform_wrapper textarea.textarea,body div.form_saved_message div.form_saved_message_emailform form input[type=text] {
border: 1px solid #00a94f;;
padding:6px 20px;

body .gform_wrapper select {

body .gform_wrapper .gform_footer input.button,body .gform_wrapper .gform_footer input[type=submit],body .gform_wrapper .gform_page_footer input.button,body .gform_wrapper .gform_page_footer input[type=submit],body .gform_wrapper input[type=button],body div.form_saved_message div.form_saved_message_emailform form input[type=submit] {
background:0 0;
border:2px solid;
-moz-transition:all .2s;
-webkit-transition:all .2s;
transition:all .2s;
padding:5px 5px;

body div.form_saved_message div.form_saved_message_emailform form input[type=submit] {

body .gform_wrapper .gform_footer input[type=submit],body .gform_wrapper .gform_page_footer .button.gform_button,body .gform_wrapper .gform_page_footer .button.gform_next_button {

body .gform_wrapper .gform_footer input.button:hover,body .gform_wrapper .gform_footer input[type=submit]:hover,body .gform_wrapper .gform_page_footer input.button:hover,body .gform_wrapper .gform_page_footer input[type=submit]:hover,body .gform_wrapper input[type=button]:hover,body div.form_saved_message div.form_saved_message_emailform form input[type=submit]:hover {

body .gform_wrapper .gform_fileupload_multifile input[type=button] {

body .gform_wrapper li.gfield.gfield_error.gfield_contains_required {

body .gform_wrapper li.gfield.gfield_error,body .gform_wrapper li.gfield.gfield_error.gfield_contains_required.gfield_creditcard_warning {

body .gform_wrapper .top_label .gfield_error {

body .gform_wrapper .gfield_error .gfield_label {

body .gform_wrapper .top_label li.gfield.gfield_error.gf_left_third,body .gform_wrapper .top_label li.gfield.gfield_error.gf_middle_third,body .gform_wrapper .top_label li.gfield.gfield_error.gf_right_third {

body .gform_wrapper .datepicker {
padding:6px 20px;


body .gform_wrapper .gfield_date_day input,body .gform_wrapper .gfield_date_month input,body .gform_wrapper .gfield_date_year input,body .gform_wrapper .gfield_time_hour input,body .gform_wrapper .gfield_time_minute input {

body .gform_wrapper .gfield_time_hour i {

body .gform_wrapper .gfield_date_day,body .gform_wrapper .gfield_date_month {

body .gform_wrapper .gfield_date_year {

body .gform_wrapper .gf_progressbar_percentage {

@media max-width641px{
body .gform_wrapper .gform_page_footer .button.gform_button,body .gform_wrapper .gform_page_footer .button.gform_next_button,body .gform_wrapper .gform_page_footer .button.gform_previous_button {
margin:0 0 .5em;

@media min-width641px{
body .gform_wrapper .gform_footer a.gform_save_link,body .gform_wrapper .gform_page_footer a.gform_save_link {

body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label .gfield_required {color: transparent}

body .gform_wrapper input {
 margin:10px 0 0 0!important;

.entry-content .gform_wrapper input {
    margin-bottom: 0;

.gform_footer {margin: 0px !important;}

body .gform_wrapper ul li.gfield {
margin-top: 0 !important;
margin-bottom: 5px;
.gform_wrapper .top_label .gfield_label {
display: none;

#field_1_10 textarea#input_1_10 {
margin-top: 10px;
li#field_1_6 {
margin-bottom: 15px !important;

body .gform_wrapper textarea {
    height: 150px!important;

Make Divi slider content not disappear through transition

To only have the background image change when the slide changes when you have added the same content to each slide, but it disappears briefly through slide transitions. This will make it stay. Add this css code into Divi > Theme Options > General > Custom CSS field.

 .et-pb-active-slide .et_pb_slide_description {
animation: 0s ease 0s normal none 1 running none !important;
-webkit-animation: none !important;

Disable related YouTube videos with DIVI

Login to wp-admin and in Divi / Integration / Add code to the < head > of your blog

Add the following code:

<script type="text/javascript">
(function($) {

$(window).load(function() {
// Disable YouTube Related Videos
$('.fluid-width-video-wrapper').each(function() {
var src = $(this).find('iframe').attr('src');
$(this).find('iframe').attr('src', src + '&amp;rel=0');

$(document).ready(function() {
// Open project promo in new tab.
$('.single-project .et_pb_promo').find('a').attr('target', '_blank');


Hide the "required" * with Gravity Forms

If you want the * to not appear if a field is required but I still want to be able to use the "required" functionality. Add the following to your CSS file.

body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label .gfield_required {color: transparent}

Add line under active menu item

To add a line under each active menu item in Divi, paste the below code to suit.

 #top-menu li.current-menu-item > a {
border-bottom: 8px solid #00a94f;
font-weight: bold;
padding-bottom: 23px !important;


Editing the Gravity Forms validation error with CSS

You can add and modify this CSS code to your stylesheet to change the look of the Validation Error message.

.gform_wrapper div.validation_error {
    color: #000 !important;
    font-size: 100% !important;
    font-weight: normal !important;
    border: 1px solid #e8e8e8 !important;
    padding: 1em 0px 1em 20px !important;
    } 1em 0px 1em 20px !important; 8 }

Move secondary Menu in DIVI below the Primary Menu

The default location for the secondary menu in the DIVI theme is at the top of the screen.

To make it to be below the Primary menu - between the header and body of the page, add the following in the custom CSS menu.

@media only screen and (min-width: 981px) {
#main-header {
top: 0 !important;
#top-header {
top: 134px !important;
} }

Make all Divi blog posts the same size

This is what your blog module may look like by default. Different size images cause it to look messy.

By adding the below code we can make it look a lot more uniform. Be sure to change post ID number in red.

.page-id-376 .et_pb_post a img {
height: 200px !important;
width: 300px !important;


Custom button on Divi main menu


To add a button on the menu of the Divi theme, find the menu item ID by right clicking and 'inspect element.' Then add the below code to custom css in theme options.

li#menu-item-61 a {
padding: 0.3em 1em;
border: 2px solid;
margin-bottom: 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #407CD4;
color: #ffffff;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
height: 25px;
padding-bottom: 20px !important;

Make footer stick to the bottom of the screen

This custom CSS code works with any Elegant Themes theme. It can be used to make footer stick to the bottom of the screen.

When logged into WordPress navigate to Divi >> Theme Options and in the custom CSS box at the bottom, place the following code:

#main-footer {
z-index: 9999;

Hide Elegant Themes footer widgets

This custom CSS code works with any Elegant Themes theme. It can be used when custom footer widget areas appear in parts of the site and you do not want them to be displayed in the footer.

When logged into WordPress navigate to Divi >> Theme Options and in the custom CSS box at the bottom, place the following code:

.footer-widget {
display: none;

Do not show footer in Divi theme

To hide the whole footer in Divi, simply add this text to your custom CSS:

#main-footer {
display: none;

If you wish to just hide the footer on one page, you will need to add this code, changing the page ID number:

.page-id-38 #main-footer {
display: none;

Increase the size of the image in the Div testimonial

To increase the size of the image in the Divi WordPress theme testimonial. Add the following code to the Custom CSS field in ePanel.

body .et_pb_testimonial .et_pb_testimonial_description .et_pb_testimonial_description_inner {
width: 100% !important;

.et_pb_testimonial_portrait {
float: left;
height: 180px !important;
width: 180px !important;

How to change Divi footer credit text without update overwrite

If you run the Divi theme then you likely have edited the footer credit text via footer.php. The problem then is when the theme is updated, the footer.php file over-written and you have to re-edit the footer credit text.

1. Go to Divi Theme Options
2. In the box "Add code to the < body > (good for tracking codes such as google analytics)"
3. Add the following code (edit the red to suit)

*UPDATE: there is now a better way to do this with the latest version of DIVI, please see the end of this post for instructions. 

UPDATE: thanks to Lorenzo Novaro for providing a better version of this code that will keep your styling in tact:

Please use this code:

<script type="text/javascript">
jQuery("#footer-info").replaceWith('<p id="footer-info">Copyright 2018. Designed by <a href="" target="_blank">cssDorks</a></p>');

This is the original code snippet. 

/*change footer*/
<script type="text/javascript">
jQuery("#footer-info").text(' ');
jQuery('<p>Copyright 2016. Designed by <a href="" target="_blank">cssDorks</a></p>').insertAfter("#footer-info");


Editing this in Theme Customizer is now the best way with the latest version of DIVI. This is pictured below.


Right align Foxy menu with custom tagline

If you are use the Elegant Themes Foxy template and wish to have custom slogan on the right you can by adding this below.You will need to edit header.php of your theme files below:

Find this:

<p id="slogan"><?php bloginfo( 'description' ); ?></p>

And replace with:

<p id="slogan"><?php bloginfo( 'description' ); ?><br>
<span>Your custom slogan</span></p>

To make the menu and tagline, you may need to toggle the below values that should be added to custom css in theme menu.

#slogan {
padding-top: -2px;
position: relative;
left: 60px;
top: -80px;

#top-navigation {margin-top:-65px !important; margin-left:60px !important;}

Reduce height of fullwidth slider in Divi

The best way to reduce height of a full width slider in divi, is to add the following custom css to the Custom CSS field of epanel > general settings:

#testslide .et_pb_slide_description {
padding: 70px 0 !important;
#testslide .et_pb_slider, .home .et_pb_slides, .home .et_pb_slide {
height: 480px;

The add the css id: testslide to your module as pictured below. 


CSS blue button with drop shadow

This juicy button can be used by adding the following custom CSS.

color: rgb(230, 230, 240);
font-size: 20px;
padding: 10px;
text-shadow: 0px -1px 1px rgba(30, 30, 30, 0.8);
-webkit-border-radius: 5.405421901393581px;
-moz-border-radius: 5.405421901393581px;
border-radius: 5.405421901393581px;
background: rgb(61, 84, 103);
background: -moz-linear-gradient(90deg, rgb(61, 84, 103) 23%, rgb(93, 153, 172) 70%);
background: -webkit-linear-gradient(90deg, rgb(61, 84, 103) 23%, rgb(93, 153, 172) 70%);
background: -o-linear-gradient(90deg, rgb(61, 84, 103) 23%, rgb(93, 153, 172) 70%);
background: -ms-linear-gradient(90deg, rgb(61, 84, 103) 23%, rgb(93, 153, 172) 70%);
background: linear-gradient(0deg, rgb(61, 84, 103) 23%, rgb(93, 153, 172) 70%);
-webkit-box-shadow: 0px 2px 1px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 2px 1px rgba(50, 50, 50, 0.75);
box-shadow:         0px 2px 1px rgba(50, 50, 50, 0.75);

Give area max height only on desktop

 Lets say you want to:

  • Give area max height and zero padding
  • But only on desktops
 You can use this below css code. Edit the 970px to better suit and be sure to rename your class.

@media all and ( min-width: 970px ) {
.custom_class_name  {
max-height: 90px;
padding: 0px;

The professional company veryhost provides all the information on hosting for wordpress.