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;
}
}

Read More

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('http://www.cssdorks.com/preview/img/wp-content/themes/images/logo.png') !important;
}
}

Read More

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;
}

Read More

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 {
margin-bottom:-90px!important;
}

body .gform_wrapper h3.gform_title {
font-size:26px;
font-weight:500;
font-color:#00a94f;
}

body .gform_wrapper .gform_footer,body .gform_wrapper .gform_page_footer {
overflow:hidden;
text-align:right;
}

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] {
background-color:#fff;
border: 1px solid #00a94f;;
-moz-border-radius:0;
-webkit-border-radius:0;
border-radius:0;
font-size:14px;
color:#00a94f;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
line-height:initial;
height:initial;
padding:6px 20px;
}

body .gform_wrapper select {
display:inline-block;
height:31px;
font-size:14px;
color:#999;
background:#eee;
border:none;
}

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;
font-size:20px;
font-weight:500;
line-height:1.4em;
font-family:inherit;
color:inherit;
border:2px solid;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-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] {
margin-left:auto;
margin-right:auto;
}

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 {
margin-right:0;
}

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 {
cursor:pointer;
}

body .gform_wrapper .gform_fileupload_multifile input[type=button] {
font-size:14px;
}

body .gform_wrapper li.gfield.gfield_error.gfield_contains_required {
margin-top:0;
margin-bottom:0!important;
}

body .gform_wrapper li.gfield.gfield_error,body .gform_wrapper li.gfield.gfield_error.gfield_contains_required.gfield_creditcard_warning {
background-color:transparent;
margin-bottom:0!important;
border:none;
padding:0!important;
}

body .gform_wrapper .top_label .gfield_error {
width:inherit;
}

body .gform_wrapper .gfield_error .gfield_label {
color:inherit;
}

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 {
width:32%;
}

body .gform_wrapper .datepicker {
width:17em!important;
margin-top:0;
margin-bottom:0!important;
line-height:initial;
height:initial;
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 {
padding-right:6px!important;
}

body .gform_wrapper .gfield_time_hour i {
width:25%;
}

body .gform_wrapper .gfield_date_day,body .gform_wrapper .gfield_date_month {
width:4.5em;
}

body .gform_wrapper .gfield_date_year {
width:5.5em!important;
}

body .gform_wrapper .gf_progressbar_percentage {
font-family:inherit;
}

@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 {
float:left;
}
}

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;
}

Read More

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;
}

Read More

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');
});

})(jQuery);
</script>

Read More

Reduce vertical spacing between Gravity Forms fields

To reduce the spacing between vertical forms fields you can remove the upper wrapper to push things up a bit, add this css code to your stylesheet.

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

Read More

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}

Read More

Add a background and border to Gravity Forms

 Want to add background and border with radius. Simply add this css code to your style.css file.

.gform_wrapper {
    background-color: #339999;
    border: 1px solid #112233;
    border-radius: 8px;
    padding: 20px;
}

Read More

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;
}
 

Read More

Remove table border

table {border: none;}

Read More

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 }

Read More

How to center align the Gravity Forms submit button

If you are looking to center align the Gravity Forms submit button then add this CSS code to your stylesheet.

div.gform_footer.top_label {
 text-align: center;
}

Read More

Increase text size in Elegant Themes eGamer

Add the following custom css to the Custom CSS field of epanel > general settings:

 body { font-size: 16px; }

Read More

Add Thin Colored Line Under Menu in DIVI

To add a small colored line below the menu both primary and fixed.  Add this css code to Divi > Theme Options > General Panel > Custom Css and change the marked value:

header#main-header {
border-bottom: 2px solid #ff0000;
}
div#top-header{
border-bottom: 2px solid #ff0000;
}

Read More

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;
} }

Read More

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.

Before

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;
}

After

Read More

Increase font size of tags in Divi

Add this code to custom CSS box:

.tagcloud a {
font-weight: bold !important;
font-size: 16px!important;
}

Read More

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;
}

Read More

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 {
position:fixed;
left:0px;
bottom:0px;
height:50px;
width:100%;
z-index: 9999;
}

Read More

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;
}

Read More

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;
}

Read More

Center copyright credit text in Divi

Login to you WordPress admin area and in Divi theme options in the custom css box, add the following and press save.

#footer-info {
float: none !important;
text-align: center !important;
}
#footer-info a {
text-align: center !important;
}

Read More

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;
}
 

Read More

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(document).ready(function(){
jQuery("#footer-info").replaceWith('<p id="footer-info">Copyright 2018. Designed by <a href="http://www.cssdorks.com" target="_blank">cssDorks</a></p>');
});
</script>

This is the original code snippet. 

/*change footer*/
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#footer-info").text(' ');
jQuery('<p>Copyright 2016. Designed by <a href="http://www.cssdorks.com/divi" target="_blank">cssDorks</a></p>').insertAfter("#footer-info");
});
</script>

 

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

 

Read More

How to change colour of the Form Title with Gravity Forms

You can add following code to Quick CSS box.

gform_wrapper h3.gform_title { color: red; }

Read More

Make Divi full width slider, full height too

To make the slider fill the page, add this css code into Divi > Theme Options > General > Custom CSS field.

.et_pb_slide, .et_pb_slide .et_parallax_bg {
height: 315px !important;
}

Read More

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;}

Read More

Reduce padding on Divi slider

.page-id-69 .et_pb_slide_description {
padding: 16% 18%;
}

Read More

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. 

]

Read More

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);

Read More

Add text shadow to title

You can add a drop shadow with this code:


#customstyle .h4 {
text-shadow: 1px 4px 5px #000000!important;
}

Read More

Change color of social icons in the footer of Divi

Change the colour or icon for the social icons in the footer.

 .et-social-icon a {
color: green !important;
}

Read More

Change Divi footer credit text size

To change the size of the Elegant Themes Divi template footer credit text, add the below code to custom css and change font size to suit. 

#main-footer p { font-size: 11px !important; }

Read More

Divi menu overlaps logo when scaled down

If you are use the Elegant Themes Divi template then and have a wide logo, you may notice this overlap.

 

 It can be fixed with the below CSS code:

@media (max-width: 1360px) {
#top-menu {
display: none;
}
#et_mobile_nav_menu {
display: block;
}
}

Read More

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.

Read More