Customizing the Divi WordPress

Theme

About Calcatraz
Calcatraz is a small software
development

This post contains affiliate links to products which we hope are of value to you, and on which
we receive a commission.

working

to

company
build

useful

software.

This post is a collection of tips and tricks for getting the most out of

Our

the powerful Divi Theme by Elegant Themes. If youve installed the

innovative calculator and an

Divi theme and need some help adjusting the appearance to suit
your needs, let me know in them comments and Ill do my best to
help you out.

products

include

an

optimized touch-typing app.

This blog is where we share
our research, thoughts and
updates. Calcatraz is run by
Dan, a security consultant

Contents [hide]

and tourist.

1 About the Divi Theme by Elegant Themes

2 Removing Image Backgrounds

Recent Posts

3 Adjusting Image Sizes

4 Hiding the Related Posts Widget
5 Hide the Divi Header When You Scroll Down

Improving the WordPress

Admin Bar

6 Hide the Divi Header

PowWeb Web Host Tips and

7 Apply a Style to a Single Text Module

Tricks

8 Hide the Divi Logo

9 Add a Widget Area to the Divi Header

Customizing the Divi

WordPress Theme

10 Make Gallery Images Show Caption instead of the Title

11 Add a Full-Width image Above the Header

Free WordPress Weather

Widget

12 Changing the Height of the Divi Slider

New Site: SucreLife.com

13 Changing the Sidebar Background Color

14 Removing the Divi Sidebar Dividing Line

Calcatraz Applications

15 Fix the Header Bar Links Vertical Alignment

16 Adding a Semi-Transparent Background Image to the Header
17 Changing the Sidebar Width

Calcatraz Calculator
Calcatraz Typist

18 Changing the Header Phone Number and Email Font Sizes

19 Full-Width Featured Images
20 Swap the Slide Image and Slide Description Positions

Other Stuff

21 Prevent Image Gallery Thumbnail Stretching

22 Remove the Header Bar Bottom Border
23 Changing the Look of Post Titles
24 Adding Dividing Lines Between Widgets
25 Got a Question About the Divi Theme?

About the Divi Theme by Elegant Themes

The

Divi

WordPress
Theme is a
slick, modern
theme

from

Elegant
Themes.
has

It

recently

become one of the top 10 most used WordPress themes,

thanks to its impressive flexibility and ease-of-use.
Chances are that if youve made it to this post theme you are
already using the theme and are looking to squeeze every
last ounce of awesome out of it.
But if you still shopping around for a new WordPress theme
you may want to take a look at the Divi Theme (or one of the
other 87 themes by Elegant Themes).

Removing Image Backgrounds

Privacy Policy

When you add captioned images into your posts, they are given a
grey background and border. If you want to remove this, add the
following to the end of the themes style.css file:

.wp-caption { background-color:white; border:0; }

Adjusting Image Sizes

If you want to adjust the size of the images embedded in your posts,
add something like this to the end of your style.css file:

.wp-caption { width: 400px !important; }

.wp-caption img { width: 390px !important }

Note: set the width to suit your needs and keep a 10px difference
between widths in the two CSS rules.

Hiding the Related Posts Widget

To hide the related posts widget, add the following to the end of your
themes style.css file:

#recent-posts-2 { display:none; }

Hide the Divi Header When You Scroll Down

By default, the main Divi header will start off large, then shrink to a
smaller version when you scroll down.
The best way to prevent the header from hovering over the content
when you scroll down via the ePanel. There is a Fixed Navigation
Bar option under General Settings. Set this to disabled and the
header will no longer shrink and hover over the content.
If you need a CSS solution, you can hide it instead by adding this
the end of the Divi themes style.css file:

.et-fixed-header { display:none; }

With this, when you scroll down the header will disappear instead of
shrinking.

Hide the Divi Header

You can completely hide the main Divi header bar using the
following CSS:

#main-header { display:none; }
#page-container { padding-top:0px !important }

It hides the header, then moves the rest of the page up into the
space the header occupied.

Apply a Style to a Single Text Module

To apply a style to a single text module, we can use a CSS rule like
this:

.post-57

/* apply to page / post with ID 57 */

.et_pb_section:nth-of-type(1) /* apply the the first page builder

section */
.et_pb_row:nth-of-type(1)

/* apply to the first row of the

section */
.et_pb_column:nth-of-type(2) /* apply to the second column of the
row */
.et_pb_text:nth-of-type(2)

/* apply to the second text module

in the column */
{
font-size: 14pt;
}

This looks quite complicated, but its actually fairly simple.

The page builder lays out pages in sections. Each section is then
split into a number of rows, and each row into a number of columns.

Each column contains a number of modules, some of which may be

text modules (which have the .et_pb_text class). The rule above
uses the nth-of-type operator to navigate this structure, picking the
correct section, row, column and text module within the required
page.
Finally, we can set the style attributes (such as the font-size) for the
targeted text module.

Hide the Divi Logo

You can remove the Divi logo, without needing to remove the
header or add your own logo, by adding the following CSS:

#logo { display:none !important; }

Add a Widget Area to the Divi Header

The following code will create a new widget area named Header
and then (using jQuery) add it below the links on the right of the Divi
header (see here if you also want to remove the header links). The
code below should be added to your functions.php file, or better yet,
to a child theme.

// Create the new widget area

function myprefix_widget_area() {
register_sidebar(array(
'name' => 'Header',
'id' => 'myprefix-widget-area',
'before_widget' => '<div id="%1$s" class="et_pb_widget
%2$s">',
'after_widget' => '</div> <!-- end .et_pb_widget -->',
'before_title' => '<h4 class="widgettitle">',
'after_title' => '</h4>',
));
}
add_action('widgets_init', 'myprefix_widget_area');
// Create the widget area and then move into place

function myprefix_footer() { ?>

<div id="myprefix-widget-area-wrap">
<?php dynamic_sidebar('myprefix-widget-area'); ?>
</div>
<script>
jQuery(function($){
$("#et-top-navigation").after($("#myprefix-widgetarea-wrap"));
$("#myprefix-widget-area-wrap").show();
});
</script>
<?php
}
add_action('wp_footer', 'myprefix_footer');
// Adjust the layout so that it fits into the header better
function myprefix_css() { ?>
<style>
#myprefix-widget-area-wrap { display:none; float:right;
max-width: 500px; clear:right }
#myprefix-widget-area-wrap .et_pb_widget { margin-right:0px }
#myprefix-widget-area-wrap .et_pb_widget:last-child { marginbottom: 18px; }
.et-fixed-header #myprefix-widget-area-wrap
.et_pb_widget:last-child { margin-bottom: 10px; }
@media only screen and ( max-width: 980px ) {
#myprefix-widget-area-wrap .et_pb_widget:last-child {
margin-bottom: 0px; }
}
@media only screen and ( max-width: 768px ) {
#myprefix-widget-area-wrap .et_pb_widget:first-child {
margin-top: 18px; }
}
</style>
<?php
}
add_action('wp_head', 'myprefix_css');

Make Gallery Images Show Caption instead of the Title

To show a caption instead of the title when viewing the full size
image from a gallery, you can change this bit of code (located
around line 3625 of the Divi functions.php file):

$image_output = sprintf(
'<a href="%1$s" title="%2$s" rel="nofollow">
<img src="%3$s" alt="%2$s" /><span class="et_overlay">
</span>
</a>',
esc_attr( $full_src ),
esc_attr( $attachment->post_title ),
esc_attr( $thumb_src )
);

To:

$image_output = sprintf(
'<a href="%1$s" title="%2$s" rel="nofollow">
<img src="%3$s" alt="%2$s" /><span class="et_overlay">
</span>
</a>',
esc_attr( $full_src ),
esc_attr( $attachment->post_excerpt ),
esc_attr( $thumb_src )
);

Note that all Ive done is change the post_title part to

post_excerpt.

Add a Full-Width image Above the Header

You can make Divi show a full-width image above the navigation bar
by adding the following to the Divi functions.php file, or to a child
theme:

// load jQuery
wp_enqueue_script('jquery');
// hook the widget area into the footer, then move into place in the
header
function myprefix_add_header_img() { ?>
<div style="display:none">
<img id="myprefix-page-start-img" src="http://www.mysite.com

/my-image-url.jpg"/>
</div>
<script>jQuery("#myprefix-page-startimg").prependTo(jQuery("body"));</script>
<?php
}
add_action('wp_footer', 'myprefix_add_header_img');
// CSS to display the image and header correctly
function myprefix_css() { ?>
<style>
/* Change header to float correctly wherever it is in the page */
@media only screen and ( min-width:981px ) {
#main-header { position:relative !important; top:0px !important; }
#main-header.et-fixed-header { position:fixed !important;
margin-bottom:0px; top:0px !important; }
body.admin-bar #main-header.et-fixed-header { top:32px
!important; }
#page-container { overflow:hidden; }
}
/* Style the image for full screen layouts */
@media only screen and ( min-width:981px ) {
#myprefix-page-start-img { margin-bottom:-80px; width:100%;}
}
/* Style the image for box layout */
@media only screen and (min-width: 1200px) {
.et_boxed_layout #myprefix-page-start-img {
width:1200px;
-moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
display:block !important;
margin-left:auto;
margin-right:auto;
}
}
/* Hide the image on smaller screens */
@media only screen and ( max-width:980px ) {
#myprefix-page-start-img { display:none; }
}
</style>

<?php
}
add_action('wp_head', 'myprefix_css');

The only thing you should need to change is the image url in the
myprefix_add_header_img function.

Changing the Height of the Divi Slider

The Divi Theme comes with a slider module to let you display a
gallery of images. It has a fixed height, but this can easily be
changed by adding a bit of CSS to the theme, e.g.:

/* Set the slider height */

@media only screen and (min-width:981px) {
.et_pb_slider, .et_pb_slider .et_pb_container {
height: 425px;
}
.et_pb_slider, .et_pb_slider .et_pb_slide {
max-height: 425px;
}
.et_pb_slider .et_pb_slide_description {
position: relative;
top: 25%;
padding-top: 0 !important;
padding-bottom:0 !important;
height:auto !important;
}
}

Note that this will change the height of the Divi slider on all pages
with a slider just change the two occurrences of 425px with your
desired height. The height change is only applied on desktops; on
mobiles it defaults to the standard Divi height.
If you want to affect just one slider, you can add a CSS class in the
slider module options, and then replace the 5 occurrences of
et_pb_slider in the above with the name you choose for your CSS
class.
Ive used top: 25% to display the slide titles 1/4 of the way down

the slide (so that all slide titles appear in the same place). Increase
this if you want the slide titles and descriptions to be moved lower
down the slide.

Changing the Sidebar Background Color

We can start by setting our desired background color on the
sidebar element, like so:

#sidebar { background-color: #fafafa; }

For a light-grey background. Or for a semi-opaque black

background:

#sidebar { background-color: rgb(0,0,0,0.5); }

Youll notice however, if you do this, that it doesnt look particularly

good. The sidebar element tightly surrounds the content meaning
that the contents of the sidebar are right up against the edge of the
sidebar.
To fix this we can adjust the padding and margins. We need to
specify several sets of padding and margins to handle the various
screen sizes supported by Divi. Here is an example set of padding
and margin rules which I think gives a nicer result:

#sidebar { background-color: #fafafa; }

@media only screen and (min-width: 1100px) { /* full-size screens
*/
.et_left_sidebar #sidebar { /*left*/
padding:70px 0 200px 30px;
margin:-70px 0 0 -30px;
}
.et_right_sidebar #sidebar { /*right*/
padding:70px 30px 200px 0px;
margin:-70px -30px 0 0;
}

}
@media only screen and (min-width: 981px) { /* medium-size
displays */
#sidebar {
padding:70px 30px 200px 30px;
margin:-70px -30px 0 -30px;
}
}
@media only screen and (max-width: 981px) { /* mobiles, etc */
#sidebar {
padding:30px
}
}

This code works for both left and right sidebars.

Removing the Divi Sidebar Dividing Line

To remove the thin dividing line between the page content and the
sidebar, add the following CSS:

.container::before { display:none; }
.et_pb_widget_area_right { border-left:0; }

Fix the Header Bar Links Vertical Alignment

If you change the logo height you may find that links on the right of
the header bar are no longer vertically centered. You should be able
to fix this by using the following CSS to vertically center the links
and search icon in the header area:

@media only screen and ( min-width: 981px ) {

/* Vertically center the top navigation */
#et-top-navigation { display:table-cell; vertical-align: middle;
float:none !important;}
.container { display:table; }
/* Right align the contents of the top navigation area */

#et-top-navigation { text-align:right; }
#et-top-navigation > * { text-align:left; }
#top-menu-nav, #et_top_search { float:none !important;
display:inline-block !important}
#et_top_search { vertical-align: top !important; margintop:3px }
}

Adding a Semi-Transparent Background Image to the

Header
If youd like to add a semi-transparent background image to the Divi
Header, you can do so by adding the following CSS to your theme:

#main-header::after {
content: "";
background-image: url('myimage.png');
background-size:cover;
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}

Just replace myimage.png with the URL of your desired

background image.

Changing the Sidebar Width

The Divi sidebar is quite narrow, and increasing its width is not
particularly easy. But the following code will allow you to increase
(or decrease) the divi sidebar width. In this example, Im setting the
width to 300px, but you can replace it with your choice of width.

@media only screen and ( min-width: 1100px ) {

.et_right_sidebar #sidebar .et_pb_widget {

margin-right:30px !important;
}
.et_left_sidebar #sidebar .et_pb_widget {
margin-left:30px !important;
}
.et_right_sidebar #left-area,
.et_left_sidebar #left-area {
width:720px !important; /* 1020 - width */
}
.et_right_sidebar #main-content .container:before {
right:300px !important; /* width */
}
.et_left_sidebar #main-content .container:before {
left:300px !important; /* width */
}
.et_right_sidebar #sidebar,
.et_left_sidebar #sidebar {
width:300px !important; /* width */
}
}

Other than replacing each instance of 300px with your desired

width, you need to replace the 720px with 1020 minus your desired
width.
This should set the sidebar (either right or left sidebar) to a width of
300px, on full screens. On smaller screens, the default Divi sidebar
width is used.

Changing the Header Phone Number and Email Font

Sizes
Divi lets you to set a phone number and email address to be shown
at the top of the header. You can adjust the font size of these items
with the following CSS:

#et-info-phone { font-size:130% } /* phone number */

#et-info-email { font-size:130% } /* email address */

#et-info { font-size:130% } /* both at once */

Note that the default font-size is 100% so anything bigger than this
will increase the font size and anything smaller will decrease it.

Full-Width Featured Images

First, we can put the image into position with the following CSS:

body.single article.has-post-thumbnail > img:nth-of-type(1) {

position:absolute; left:0; top:0;
}

Now we need to move the post title and content, and the sidebar,
below the image. We can do this by setting a top-margin on the
content-area element, which is equal to the height of the featured
image. It is easiest to do it using jQuery, which lets us easily adjust
the margin as the image height changes between posts and on
browser resizes. Heres the jQuery code, which can be added into
footer.php:

<script>
jQuery(function($){
var featured = $('body.single article.has-post-thumbnail img:nthof-type(1)');
var contentarea = $('#content-area');
if (featured.length) {
adjust_margin();
$(window).resize(function(){ adjust_margin(); });
}
function adjust_margin() {
contentarea.css('margin-top', featured.height());
}
});
</script>

Swap the Slide Image and Slide Description Positions

If youd like to have your slide images on the right instead of the left,
you can use the following CSS:

.et_pb_slide_description { float:left !important; padding-left:100px

!important }
.et_pb_slide_image { right:100px; }

To make the change to just a single slide (e.g. the first one) on a
particular slider, give the slider a CSS class, such as myslider and
use:

.myslider .et_pb_slide:nth-of-type(1) .et_pb_slide_description {

float:left !important; padding-left:100px !important
}
.myslider .et_pb_slide:nth-of-type(1) .et_pb_slide_image {
right:100px;
}

Prevent Image Gallery Thumbnail Stretching

The Divi Theme gallery module has a grid view which shows
thumbnails of the images in the gallery. Sometimes the thumbnails
will appear distorted, as small images are stretched to fill the
thumbnail area. To prevent the image stretching, we can use the
following CSS:

.et_pb_gallery_image img {
min-width:0 !important; min-height:0 !important;
position: relative;
left: 50%; top: 50%;
transform: translateY(-50%) translateX(-50%);
}

This removes the minimum height and width setting which was
causing the stretching, and centers the image in the thumbnail area.

Remove the Header Bar Bottom Border

If youd like to remove the border from the bottom of the header bar,
you can do the following:

#main-header{
-webkit-box-shadow:none !important;
-moz-box-shadow:none !important;
box-shadow:none !important;
}

Changing the Look of Post Titles

To change the style of the post titles in Divi, you use CSS like the
following:

.single h1 {
font-family: Courier;
font-size: 30pt;
color: green;
border-bottom: 1px solid #ddd;
}

This example change the post title font to Courier, makes the font
size bigger, makes the title green, and adds a thin grey line under it
(by adding a bottom border).

Adding Dividing Lines Between Widgets

To add a dividing line between the individual widgets in the sidebar,
you can add this CSS:

#sidebar .et_pb_widget {
border-bottom: 1px solid #ddd;
padding-bottom: 20px;
margin-bottom: 20px;
}
#sidebar .et_pb_widget:last-of-type {

border-bottom:0;
}

The first part adds a bottom border to each widget (the same color
as the vertical sidebar divider), and positions it mid-way between
successive widgets. The second part removes the bottom border on
the final widget.

Got a Question About the Divi Theme?

Want to customize your Divi Theme in a way that I havent
covered here? No problem, just ask it in the comments and Ill
do my best to help you out.
Please note that Im currently receiving a high-volume of
questions. To avoid compromising on the quality of my
answers Im unfortunately having to compromise on response
time. At the time of writing most questions are being
answered within 7-14 days.
If you need a faster response, consider asking your question
on the Elegant Themes Support Forum, or signing up for a
premium support service like WP Curve which offers same
day response on all questions.

Let's Discuss...

Mario
January 5, 2016 at 10:20 am

Hello, how do I shorten the white part on the logo? Look at my

site

Dan
January 5, 2016 at 7:53 pm

Hi Mario,
Do you mean you want less space between the logo
and the top of the page?
I notice you have this in your style.css file:
/* modifica */
#main-header {
padding: 50px 0 0;
z-index: 1;
}
It is setting a top padding of 50px on the main
header, which is pushing the logo down. The space
should be reduced if you remove padding line, or
override it with the following:
#main-header { padding-top: 0px !important; }

Lisa
January 2, 2016 at 4:48 pm

Thanks for putting this together. I used several customizations

listed. I was wondering how to change the font color, height,
etc. of the title of the sidebar widgets. Thank you.

Dan
January 5, 2016 at 7:58 pm

Hi Lisa, you can easily do so with a bit of CSS such

as this:

.widgettitle {
color: red;
font-size: 24px;
}

This will make the widget titles bigger and red.

Hopefully that answers your question, but let me
know if there is a particular effect you are trying to

achieve, etc.

Chris
December 31, 2015 at 9:38 am

Hello,
quick question, is there a way to remove the little phone icon
from the secondary navigation bar (not needed in this case)
but keep the social icons and email?
Thank You

Dan
December 31, 2015 at 7:35 pm

Hi Chris, Ive written the following post explaining

how to remove the phone icon:
https://www.wpthemefaqs.com/hide-the-phoneicon-in-divi/
I hope that helps.

Chris
January 1, 2016 at 1:00 pm

Works great Thank you!

Vincent
June 16, 2015 at 12:51 pm

Hi !
how to change the size of thumbnail on fullwidth portfolio ?
I mean to have 3 column instead of 4 and to change the size
of thumbnail from square to rectangle ?
Thanks

Dan
July 13, 2015 at 5:13 pm

Hi Vincent, this post should help you out:

https://www.wpthemefaqs.com/change-divi-imageportfolio-grid-thumbnail-sizes/

Cliff Farrand
May 12, 2015 at 7:06 am

Hi Dan
On the suggestion that you gave above:
Apply a Style to a Single Text Module
To apply a style to a single text module, we can use a CSS
rule like this:
.post-57 /* apply to page / post with ID 57 */
.et_pb_section:nth-of-type(1) /* apply the the first page builder
section */
.et_pb_row:nth-of-type(1) /* apply to the first row of the section
*/
.et_pb_column:nth-of-type(2) /* apply to the second column of
the row */
.et_pb_text:nth-of-type(2) /* apply to the second text module in
the column */
{
font-size: 14pt;
}
I want to add a rule for the first row on a specific page to
remove the padding so that a masterslider shortcode I am
using in the first text box in the first row single column loses
the padding so that the background video in the Masterslider
butts up to the menu at the moment there is a gap of some
20 or more pixels.
I can add this to the CSS to target the gap successfully
.post-3649
.et_pb_row {
padding: 0px 0 0;
}

but that of course applies to all row padding for all rows in the
page and cannot use since it looks wrong on subsequent
rows.
Your example above is specific to the CSS for the text within
the module I am targeting the first row padding only and not
the contents of the text module.
Any suggestions Dan or anyone?
I am a paying customer of yours by the way your plugin is
awesome!
Cliff

Dan
May 12, 2015 at 3:43 pm

Hey Cliff, either of these should work:

.post-3649 .et_pb_row:first-child { padding:0;

}
.post-3649 .et_pb_row:nth-child(1) {
padding:0; }

The first is neatest, but the second one is useful to

know in case you ever want to apply rules to other
rows, etc.

Cliff Farrand
May 12, 2015 at 4:47 pm

Perfect :-)
Cheers Dan!
I also added
.post-3649

.et_pb_section:first-child

padding-top: 0px !important; }

to lose the other padding that Divi adds
above the content. I had put that in also
against all page content targeting

modules like this increases the flexibility

of this theme even further.
Thanks for the full response since I am
going to need to use the second method
also in other pages.
Thanks again and keep up the excellent
work!

Dan
May 12, 2015 at 5:09 pm

Youre welcome and thanks for

the update, Cliff :)

Manly Boxes
February 5, 2015 at 8:14 pm

Dan,
You are awesome. I am a semi-newb, css illiterate mostly, but
you have some great stuff here. just saying thanks, youve
already answered all my questions! Totally like to send you a
Manly Box from ManlyBoxes.com as a token of appreciation!
Email me!
Thanks,
Steve

Dan
February 6, 2015 at 8:25 am

Ha ha! Thanks Steve the Manly Boxes look

amazing!
Ive sent you an email :)

Dean at Wildstylez

January 25, 2015 at 5:44 pm

Dan this is awesome that you take the time to help people.
Really great.
My question may be way beyond the scope of your help, but
Im curious; Do you know a way to Turn On the DIVI Page
Builder for Posts?

Dan
February 6, 2015 at 7:45 am

Thanks Dean. Youre in luck! Ive already written

about using the page builder for posts.
It will be included in the Divi plugin Im releasing on
Tuesday.

Filip
January 14, 2015 at 9:36 am

Thank You very much for part Add a Full-Width image Above
the Header! :-)

Cam
January 12, 2015 at 7:27 pm

Whats the best way to keep the fixed header, but make it so it
doesnt shrink down in size when you scroll the page? Id like
to keep the logo and menu the size it is when youre at the top
of the pageeven after scrolling. CSS mod?

Dan
January 17, 2015 at 5:34 pm

Hey Cam, Ive just written up a solution here: Stop

the Divi Header from Shrinking on Scroll.

Sid

January 9, 2015 at 12:19 pm

Hi Dan I just want to commend you on this website, and all

the wonderful code/help youve provided to folks like myself.
Youre doing an awesome job, and this website has been very,
very, helpful!! THANK YOU!!!

Tracey
December 30, 2014 at 4:35 pm

Found you through an awesome group on Divi. I dont have a

question yet but I am sure it wont be long before I do. Just
wanted to say, I am totally impressed with how you have
seamlessly helped so many Divi users. The community of
developers and designers is nothing I have come across
before and it humbles me.

Dan
December 30, 2014 at 8:26 pm

Thanks Tracey! Yeah, they are a good bunch over

on the Divi group. I look forward to your questions!
Ive been busy with a few other things recently so
Ive developed a bit of a backlog (okay, a really big
backlog) of questions, but hopefully Ill be getting
through them in time to help you out!

Pete
December 29, 2014 at 12:03 pm

Hi Dan
Please can you help me? In my Divi theme, I have
successfully made the full width slider a smaller height using
your code. The problem I now have is that the text in the
right-hand part of the slider is now either too far down on the
bottom of the header, or is sometimes non-existent. The CSS
code I have at the moment is as follows using a class called
homeslider:
/* Set the slider height */
.homeslider .et_pb_slider, .et_pb_slider .et_pb_container {
height: 300px;

}
.homeslider .et_pb_slider, .et_pb_slider .et_pb_slide {
max-height: 300px;
}
.homeslider .et_pb_slider .et_pb_slide_description {
position: relative;
top: 0%;
padding-top: 0 !important;
padding-bottom:0 !important;
height:auto !important;
}
Thanks for your help.
Pete

Dan
February 2, 2015 at 3:26 pm

Hey Pete,
Try this.
@media only screen and (min-width:981px) {
/* Set the slider height */
.homeslider, .homeslider .et_pb_container {
height: 300px;
}
.homeslider, .homeslider .et_pb_slide {
max-height: 300px;
}
.homeslider .et_pb_slide_description {
position: relative;
top: 0%;
padding-top: 0 !important;
padding-bottom:0 !important;
height:auto !important;
}
}
Ive changed where the .homeslider references are
placed. Ive also updated the code to the latest
version which fixes a responsiveness issue with
mobiles.

David
December 16, 2014 at 7:13 pm

Hi Dan
Just bought Divi and the Divi Children plugin (to make a child
theme). I know no code but saw your post about placing a full
width image above the header. Just to be clear, I paste the
entire snippet below exactly as is (except with my substituted
image url) in the E Panel>General settings>Custom CSS box?
Or someplace else? I tried this but got no result. Im sure Im
missing something simple
Thanks!
// load jQuery
wp_enqueue_script(jquery);

// hook the widget area into the footer, then move into place in
the header
function myprefix_add_header_img() { ?>
jQuery(#myprefix-page-start-img).prependTo(jQuery(body));
/* Change header to float correctly wherever it is in the page */
@media only screen and ( min-width:981px ) {
#main-header { position:relative !important; top:0px !important;
}
#main-header.et-fixed-header

position:fixed

!important;

margin-bottom:0px; top:0px !important; }

body.admin-bar

#main-header.et-fixed-header

top:32px

!important; }
#page-container { overflow:hidden; }
}
/* Style the image for full screen layouts */
@media only screen and ( min-width:981px ) {
#myprefix-page-start-img { margin-bottom:-80px; width:100%;}
}
/* Style the image for box layout */
@media only screen and (min-width: 1200px) {
.et_boxed_layout #myprefix-page-start-img {
width:1200px;
-moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
display:block !important;
margin-left:auto;
margin-right:auto;
}
}
/* Hide the image on smaller screens */
@media only screen and ( max-width:980px ) {
#myprefix-page-start-img { display:none; }
}
<?php
}
add_action('wp_head', 'myprefix_css');

Dan

January 30, 2015 at 2:25 pm

Hey David, this code is PHP code and needs to be

added to the functions.php file, not in the Custom
CSS box. The following post explains how to add
PHP code to Divi.
Hope that helps!

Scott Fray
December 2, 2014 at 10:01 pm

Hey Dan are you available or hire on a freelance basis? I

couldnt find a more straight-forward way to contact you, sorry.
I have a Divi website and I need a few minor tweaks.

Dan
December 19, 2014 at 4:48 pm

Hi Scott, I just dropped you an email regarding this.

The short answer is unfortunately not (contractual
reasons), but Im happy to answer your questions
for free here if youre happy to put up with the long
wait (Ive been receiving a very high volume of
questions recently which will take me quite a while
to work through).
Thanks for the kind offer!
Dan

James
November 19, 2014 at 7:13 am

Hi Dan,
Im trying to add a full-width image above the header but when
I go open to the Divi functions.php file its saying:
Fatal error: Out of memory (allocated 30932992) (tried to
allocate

262144

bytes)

in

/homepages/24/d538610013

/htdocs/Play By Play Site/wp-admin/includes/misc.php on line

318

Any ideas?
Also, do I add the image URL and stick all that code in or do i
need to pick elements out?
Cheers, James

Dan
November 19, 2014 at 2:36 pm

Hey James, check out my answer in the comments

of this post for how to deal with the error. Yes, add
the image URL and stick all the code in it looks
like a lot of code, but its all needed to get the effect.

Rich
November 18, 2014 at 11:35 am

Hi Dan, great resource!

I had a question about Replace the Header Links with a
Widget Area.
I am looking to add social media icons (specifically Monarch)
to the newly created Header widget.
I have added your code to function.php child, and the menu
does get removed but no matter what I add to the Header
widget, nothing appears. Thanks again for this great resource.

Dan
January 18, 2015 at 4:37 pm

Hey Rich, sorry it wasnt working. The WordPress

editor had stripped out the critical bit of PHP code
that actually placed the widget area in the page. Ive
fixed it now. You can see the updated code here.

Luc Nelson
November 16, 2014 at 8:14 pm

Dan,

Thank you for all the work you have put into answering
everyones questions. I am truly impressed. I searched
through the questions and your replies but couldnt find
anything that appeared to be related to my question. I am
trying to figure out how I could adjust the appearance (color,
font, rounded edges) of the Pricing Tables module within the
theme. I am happy to explore but am not even sure where I
would start for something like that.
Any advice you can give would be greatly appreciated. I did
see that on the first page of the module it gives the option of
picking a CSS class or ID. Do I need to create a CSS ID or
Class to adjust those?

Dan
November 17, 2014 at 9:09 pm

Hi Luc, Geno has written a great post on

customizing the divi pricing table. I think it should
tell you everything you need to know (including what
to do with the CSS class), but if theres anything you
are still unclear on let me know!

Greg
November 15, 2014 at 4:02 pm

Hi, When I remove the header, it works on my desktop, but on

mobile it shows up. Any ideas?
Thanks
#main-header { display:none; }
#page-container { padding-top:0px !important }

Greg
November 15, 2014 at 4:03 pm

Sorry, it doesnt show up on mobile.

Greg
November 15, 2014 at 4:06 pm

OK, now I am getting this confusing.

When I remove it with the code, when I
view it on my desktop the header is gone,
when I view it on my mobile the header
shows up. Hope that makes sense. Sorry.

Dan
January 17, 2015 at 7:18 pm

Hey Greg, it sounds like it

might

be

caching

problem

(where your mobile phone is

showing an old version of the
page rather than reloading it
from the server). As you wrote
to me quite a while ago, Im
guessing

the

issue

will

probably have cleared itself up

by now. But if not, try this: 1)
clear

the

caches

in

any

performance plugins you have

installed in your WordPress, 2)
clear your mobile browsers
history, 3) reload the page on
your mobile. If the header is
still there, send me a link to the
site and Ill take a look.

John
November 12, 2014 at 4:09 am

Thank you for such a great resource! But I do have a

question I resized the Divi slider to 425
.et_pb_slider { height: 425px; }
actually used .slider1 { height: 425px; } because I have other
sliders on the site.
But now the photo, text and button inside the slider contents
are not vertically centered! How can I have it center the
contents of the slide. I had hoped that making it shorter would

adjust everything else. All this did was cut off the bottom of the
slider background. The content still shows full size and now its
not centered. :(

Dan
November 14, 2014 at 3:01 pm

Hi John. Sorry about that. Ive updated the divi

slider height code above to re-position the slide
content, slide image and background image to
match the new slider height. Hope that helps but
let me know if anything still looks wrong.

zyl
November 7, 2014 at 1:54 pm

i cant reposition the image of inside the slider. it was cropped

my client want the slider make smaller. i already edit the height
but the image and the text was cropped. what can i do. please
help me

Dan
November 14, 2014 at 3:02 pm

Hi zyl. Ive updated the slider height code to make

the image and text fit the slider. Hope that helps!

Judy
November 6, 2014 at 10:51 am

Thank you Dan you are very generous with your time and
knowledge :)

James
November 6, 2014 at 8:21 am

Dan, you legend! Wish I had found this site ages ago.
I want to remove the Divi header diving line. I can see you

have posted the code for the sidebar but not the header.
Any help would be really appreciated.
Thank!

Dan
November 8, 2014 at 4:42 am

Hey James, heres how to remove the header

dividing line. Hope it helps!

Judy
November 5, 2014 at 7:58 pm

Dan looking for some help. Im trying to set up a gallery grid.

Some of the pictures look fine and some of them are distorted.
Is there an ideal size I should be cropping all my photos to so
they come out looking OK in the gallery grid?

Dan
November 5, 2014 at 11:07 pm

Hi Judy, you should be able to use any size of

image. However, when the image is less than 225
pixels wide or 169 pixels tall, divi stretches the
image to fill the space, which can cause the image
to become distorted. You could make sure that your
images are at least 225169, but perhaps a better
way is to stop divi from stretching the image
thumbnails. Ive added details on how to stop the
thumbnail stretching above. Hopefully that fixes the
issue without you needing to recrop your images.

Elias
November 5, 2014 at 3:22 pm

I am using divi 2.1.4 and Royal Slider. I am trying to put in

place a travel story concept.
The idea is to form a story in a number of photos that captures

the essence of a location.

Royal slider can grab a field from the image (like the alt or
description fields) and
display it along with the picture in the slider container.
What I would like to do is to display this text OUTSIDE the
slider container. The solution,
according to the author of the slider, is to grab the appropriate
field (ok, I know how to do that)
and then to run the following JS code, after the slider
initialization:
$(.rsGCaption).appendTo(.some-container)
where some-container is the name of the main container of
my post.
So my questions, arising from my ignorance:
1) Can I run this code from the code integration tab of the
epanel? Or do I need to create a JQuery script in a separate
file?
2) If I could run it from the epanel, In which tab should I place
it? (body, bottom, header)
Should I modify the above line of code? maybe place it within
. tags, or use it as is?
3) what is the name of the main container to append the
output?
The slider example is at http://www.eliascostopoulos.com/testslider/ in case you find some time to answer this.
Many thanks anyways.
Elias

Elias
November 5, 2014 at 6:09 pm

Resolved it on my own, thanks

Dan
November 5, 2014 at 6:12 pm

Okay, cool. Glad you got it working :)

Patricia
November 5, 2014 at 1:09 pm

Thanks this helped to get my sidebar a tiny bit wider. I wish ET

would make this an option from the ePanel. Thanks again.

Dan
November 5, 2014 at 5:38 pm

Hi Patricia, Ive just updated the code for changing

the sidebar width.
Yeah, it lets you set it to any width you like. Itd be
nice to have it as an option in ePanel, but it
probably wont happen any time soon but Im
planning on releasing a plugin in the next couple of
weeks which will add extra configurations for Divi
including an option to set the sidebar width.

Marc
November 4, 2014 at 11:40 am

Hello,
I am trying to erase the sidebar bar between my main content
and the categories/archives/recent post.
I add this .container::before { display:none; } to the Custom
CSS field and its not erasing the bar.
Any suggestions?
Thanks.
Marc

Dan

November 4, 2014 at 1:15 pm

Hi Marc, the bar on your site is a border on a widget

area (rather than the full sidebar) and needs a
different bit of code to remove it. Try this:

.et_pb_widget_area_right { border-left:none; }

Marc
November 6, 2014 at 11:02 am

Perfect! Thanks a lot!

Daniel Zaldumbide
November 3, 2014 at 7:23 pm

Hello, I would like to know if its possible to change the

orientation of the slider (Slide image at right) in order to
alternate in the slides, the first one with the slide image to the
left, the second with the slide image to the right.
Thank you very much.

Dan
November 3, 2014 at 10:49 pm

Hi Daniel, yeah its possible :) Ive added a section

above with details on how to put the slide image on
the right for particular slides.

Daniel Zaldumbide
November 4, 2014 at 5:49 am

Thank you very much :)

Matthew

November 3, 2014 at 2:35 pm

Would love your help, though I suspect it is complicated to pull

off. I want the featured image to be above the Post title and
metadata, stretched across the full page so that the featured
image sits just below the header, with the post title, metadata,
blog, and sidebar right below the image. Is this possible? Or
extremely complex?
Absolutely love this! So helpful!

Dan
November 3, 2014 at 10:10 pm

Hi Matthew, it turns out that its a lot easier than I

thought it was going to be! Ive added a section
above describing how to pull off full-width featured
images in divi.

Avin
November 2, 2014 at 12:36 pm

Hey Dan, I see that you have helped so many designers to

reach their goals.
Kindly check this page http://dharmamaarg.org/the-vedicnakshatras/
Both the videos in this page are 1920 * 1080 full hd
However, both of them are cropped by divi
I have read your blog and made the following changes but
found that result is the same.
I have named css id as vedic_stars to the full width slider
module and added .vedic_stars { height: 720px; } in css class
but result is same.. Kindly help.
Thank you

Dan
November 4, 2014 at 12:01 am

Hi Avin, I think what you need to do is:

Change the css class from .vedic_stars { height:

720px; } to just vedic_stars (without a period).

Put the .vedic_stars { height: 720px; } bit into the
custom CSS box in the ePanel.
You cant actually add CSS code into the CSS class
field the CSS class is just a label which you can
use in the CSS code you put in the custom CSS
box. (Sidenote: the CSS class is like the CSS id,
except that the class can be used for multiple
modules with the same styles while the id is just for
one specific module).

Barbiche
November 2, 2014 at 5:11 am

Hello,
Is it possible to change the location of my nav in my header.
Sorry I do not speak good English.
Thank you in advance.

Dan
November 4, 2014 at 12:13 am

Hi Barbiche, your English seems to be very good!

Where would you like the nav to be?
To move it to the top of the header you could use
this CSS:

#et-top-navigation { margin-top:-45px;}

Or to the bottom of your header, use this:

#et-top-navigation { margin-top:65px;}

Chase

October 30, 2014 at 12:32 pm

My mistake Dan, the menus are now vertically centered! My

question is, when you scroll down and the logo shrinks, how
do you cause the rest of the header to shrink with it?

Dan
November 4, 2014 at 4:04 am

Hey Chase, I wasnt very happy with the vertical

centering code as it shouldnt really need JavaScript
and it should of course stay vertically centered
when the header bar shrinks. Ive come up with a
better, CSS-only, solution for vertically centering the
header links. If you get rid of the old code and
replace it with the new code, everything should work
nicely. Let me know if it doesnt!

Chase
October 30, 2014 at 12:26 pm

Hey Dan! I adjusted the height of my logo, and tried using your
code to vertically align the menus, but alas, they remain
adjusted to the top of my header. Im trying to center the menu
with my logo. I input your code into my functions.php file in my
child theme, but its simply not working. Any ideas? Thanks for
your help!

Gogito
October 28, 2014 at 10:34 am

Oh, btw, the removing the sidebar line trick doesn;t seem to
work for me.

Dan
January 17, 2015 at 7:00 pm

Hey Gogito, in your case youll need to use:

.et_pb_widget_area_right { border-left:0; }

(Turns out there are two types of dividing line in Divi

Ive updated the post to handle both).

Aqeel Meo
October 25, 2014 at 2:39 pm

Hi Dan, Your blog and your all articles awesome.

You write in very simple and explain thing very clear. I try to to
reduce height of slider helping with Changing the Height of
the Divi Slider Height was reduced but Text and Images cut
off you can see here http://meostars.com/ I do not know CSS
very well. Can you help me please.
I also want to add background Red color to each tab of menu
bar is it possible?
Many Thanks in advance

Dan
November 14, 2014 at 3:49 pm

Hi Aqeel Meo. Ive updated the Changing the Height

of the Divi Slider section to fix the problem of text
and images being cut off.
Ill take a look at the menu bar tab background
colors separately, as soon as I can.

Mark
October 17, 2014 at 5:20 pm

Help!
I am trying to change the slider height, and I cant seem to do
it using your instructions. (I am using WP 4 and Divi 2.1.4)
I am using the full width slider.
In the slider properties area, I set the CSS Class field to:
CSS Class: slider_short
In my style sheet, I included this line of code:

.slider_short { height:300px;}
But it doesnt change the height at all.
Can you tell me what I need to do to make the slider shorter?
I am new to the Divi theme, so the more detailed answer, the
better.
Thanks so much.

Dan
November 14, 2014 at 4:06 pm

Hi Mark. Ive improved the code for changing the

slider height. All you should need to do is put it into
your

style

sheet,

change

every

instance

of

.et_pb_slider to .slider_short, and change the height

and max-height to 300px.
Everything you were doing is correct, though I think
you needed to declare the height as !important
the updated code does this for you.
Hopefully this will get it working for your, but let me
know if you are still having problems.

Phil Gebhardt
October 15, 2014 at 4:46 pm

Hello, Im wondering how you can stop the logo image

shrinking when you scroll the website page while still having a
fixed navigation bar?

Dan
January 17, 2015 at 4:27 pm

Hey Phil, Ive just put up a post on how to stop the

logo shrinking when you scroll. Hope that helps!

Ursula

October 7, 2014 at 11:04 am

Hi,
I love this site. I have been using all of your tips to customize
our new website. Any idea on how to make either a border or a
divider between the widgets in the sidebar? I really dont like
the look of the sidebar, when the widgets just all blend into
each other. Thanks! :)

Dan
November 18, 2014 at 7:37 pm

Hi Ursula, good to hear the tips have been useful.

Ive added a section on adding sidebar widget
dividers. Hope that helps!

Julia
October 5, 2014 at 12:21 pm

Hi Dan, thank you very much for your awesome help!

gsocarecenter
October 3, 2014 at 1:40 pm

Dan,
Your blog is so helpful. Im new to developing, and am in the
process of trying to personalize our Divi theme website.
Id like to make our homepages slider height shorter, so in my
staging area, Ive added the CSS you suggest above
(.et_pb_slider { height: 425px; }). I also included the media
query functions to change this height in every possible screen
range.
Im running into a problem I cant figure out, though. While the
slider height changes fine, the content in the slide doesnt. So
half of my content gets cut off. Id like to figure out how to get
that content to center, so as the screen height changes for
different platforms, the content always remains in the center.
Any help you provide is much appreciated! Thanks again,

already, for your willingness to help!

Dan
November 14, 2014 at 4:30 pm

Hi gsocarecenter. Thanks for the comment and

sorry for the slow reply. Ive updated the slider
height code above to fix the slide content centering
problem. Hope that helps!

tutur
October 3, 2014 at 12:25 pm

and also give a horizontal line bellow post title

Sorry i dont have background in css, hence my question my
sound stupid, =)

tutur
October 3, 2014 at 12:22 pm

Hai Dan, how can i change the title post in single post (i want
to change font size, color and font style )
Big thanks for your help

Dan
November 18, 2014 at 7:01 pm

Hey tutur, Ive added a section with an example of

how to change the post title style (including adding
a horizontal line below the title).
Im not sure if youre asking about changing the
style on all posts or just one post. If you want to
apply the style to one specific post, change the
.single h1 part to .single #post-xxx h1, replacing
xxx with the id of the post you want to apply the
changes to, e.g. .single #post-121 h1.

xerf
September 24, 2014 at 10:31 pm

Hello Dan, this blog is awesome :D

And yeap theres a question : Is there any way to customize
the positions of MULTIPLE slide images differently?
As Divi theme(http://elegantthemes.com/preview/Divi/)

site

shows the lantern image(png file), each slide images Divi

handles are shown at the exact same position(left side) that I
dont like. :S
A code in CSS like
// .et_pb_slide_image { top: 20% !important; right: 0%; } //
(that Im using) affects ALL of the slide images, of course.
Please enlighten me to show them differently! :D

Dan
October 6, 2014 at 2:38 pm

Hey xerf, glad you like the blog!

So to move the image for the first slide only, you can
do this:

.et_pb_slide:nth-of-type(1)
.et_pb_slide_image { top: 20% !important;
right: 0%; }

Just change the number in the nth-of-type(x) part to

move a different slide (change it to 2 for slide 2, 3
for slide 3, etc).
Also, if you plan on having multiple sliders on your
site, you will need to set a CSS ID in the slider
module settings and add this to the CSS, e.g.:

#my-slider-module-id .et_pb_slide:nthof-type(1) .et_pb_slide_image { top: 20%

!important; right: 0%; }

Otherwise the CSS would move the slide image on

the first slide of each module probably not what
you want.

brendan
September 24, 2014 at 3:20 am

Dan thanks so much. In regard to the full width header, what

if you are in box site mode? Where there is the slight
shadowing and some background behind. How can you make
it match that width?

Dan
October 6, 2014 at 1:26 pm

Hey brendan, Ive updated the section on adding an

image before the Divi header. It should now work
with the box layout too :)
http://blog.calcatraz.com/customizing-the-diviwordpress-theme-2020#Add_a_FullWidth_image_Above_the_Header

brendan
October 8, 2014 at 1:43 am

THANK YOU DAN!

Julia
September 22, 2014 at 11:38 am

Hi, we removed the top above the page container via #pagecontainer { padding-top:0px !important } and made the header
transparent, so that we have a nice full-screen picture.
However, we would like to keep it for the mobile version.. as it
looks very bad on the phone now. Next to that we need to add
a padding-top to the headers, as the header now lies on top of
the text of a Blog page for example. But this change should
then also not affect the mobile version. Thanks in advance for

any help :-)

Dan
October 2, 2014 at 4:29 pm

Hi Julia, I think the easiest way to achieve this will

be to make the padding apply only on larger
screens (not mobiles). You can do this by changing:

#page-container { padding-top:0px !important

}

to:

@media only screen and ( min-width: 768px

){
#page-container { padding-top:0px
!important }
}

Note that this uses something called a media query

to tell the browser not to get rid of the padding when
the screen is smaller. This should mean that you
dont need to try and set any padding on mobiles as
the Divi default padding will be used.
By the way, Ive written a bit about media queries
here:
http://www.wpthemefaqs.com/css-media-queriesfor-the-divi-theme/

Abinidi
September 22, 2014 at 2:02 am

Dan,
Im trying to increase the font size on the top header text that
has the phone number and email address option. CSS is the
#et-info-phone and #et-info. Ive tried what I thought was to edit
the style.css directly for it, but it still keeps staying the same.

any ideas?
PS: found your site while trying to resize the pb-slider. You
showed me what I tried for an hour to resize myself. Thanks
and great site!

Dan
October 2, 2014 at 4:03 pm

Thanks Abinidi! All you should need to do is add the

following CSS:

#et-info-phone { font-size:130% } /* phone

number */
#et-info-email { font-size:130% } /* email
address */
#et-info { font-size:130% } /* both at once */

Note that the default font-size is 100%.

Ive checked and the CSS above should work on
your site if added at the end of the style.css file. If
youre still having trouble, try adding it in the ePanel
custom CSS box or in a child theme. I describe
doing so in more detail here:
http://www.wpthemefaqs.com/adding-css-tothe-divi-theme/
Note that the default font-size is 100% so anything
bigger than this will increase the font size and
anything smaller will decrease it.

Trevor
September 21, 2014 at 11:02 am

Heres a fun one for you Dan

Have you figured out how to add new, custom icons to the
library of standard icons currently shipping and accessible in
the blurb module?
Thank you!

Dan
September 24, 2014 at 2:18 pm

Hey Trevor, I think I might need to get out more

because it was actually fun! Heres one way to do it:
http://www.wpthemefaqs.com/adding-custom-iconsto-divi/

Yakiedward
September 19, 2014 at 6:38 am

Thank you for the illustrations youve shown us. Please add
illustrations on how to increase/decrease the width of the divi
sidebar so that it doesnt affect other screen displays on other
devices.

Dan
September 23, 2014 at 6:31 am

hey Yakiedward! It turns out that increasing /

decreasing the Divi sidebar width is surprisingly
tricky. Ive figured out a way to increase the sidebar
width by about 60px any amount you like. Ive
added my solution above.

Kalonzi
September 18, 2014 at 9:15 am

Help! I want a customized floating sidebar on my Divi page

(with more than a couple basic social media icons). I added

Q2W3 Fixed Widget (Sticky Widget) and created the widget,
but I dont know how to float the widget on the left side of the
page.
I saw any guy had made this work any ideas how he
managed it? (I should also note that I want this to float over
top of a background image, but Im hoping thats a z-index
problem I can deal with.)

Dan
September 23, 2014 at 5:13 am

Hi Kalonzi, Ive posted a solution that I think should

work for you. Let me know if you have any issues
with it.
http://www.wpthemefaqs.com/floating-a-q2w3-fixedwidget-in-divi/

Fred
September 18, 2014 at 12:41 am

Hello !!! Im Fred, from Brazil Im trying to create a slider

with Divi slider module, with 900 px widht and 350 height px, in
the center, and with fade effec as a transition, but my images
are showed too small ( 500 x 200 aproximately ), in the left
side, and the animation out of the slider frame ( from left to
right ) Can you help me with this ??? Have a code for more
transitions usin the Divi slider module ??? Thanks Fred

Dan
September 23, 2014 at 5:30 am

Hi Fred! Would you be able to give me a link to a

page with your slider on it? When I set up a slider
on my test site the images are sized correctly and
have a fade effect transition so I think Ill need to
have a look at your site before I can tell whats
going on. Thanks!
Sorry, my brain wasnt working this morning. I think I

know what is going on it sounds like your

uploading your images in the Slider Image field of
the slide settings. You actually need to upload them
to the Background Image field. The background
image is the full width one, while the slider image is
just a little image to accompany the text.
Heres a post walking through the steps of setting
up the slider that explains this in more detail:
http://www.wpthemefaqs.com/setting-up-thedivi-full-width-slider/
The background images transition using a fade
effect, so this should give the look youre after.

michael neuvirth
September 17, 2014 at 5:51 pm

Hi
can you tell me please how can I make a very cool video
background like elegant themes does for divi?
I am a newbie so please walk me though it step by step
thanks
michael

Dan
September 19, 2014 at 5:27 pm

Hey michael, Ive written up a tutorial for you

describing how to add a video background in the
Divi Theme. Ill leave picking a cool video up to you!
Let me know if you have any problems or any of the
steps arent clear.

rimtan
September 15, 2014 at 7:09 am

Hi
You have created a fantastic blog here with so much friendly
advice for divi users. Its incredible.
I have a question about divi customization. I want to decrease

the height of the background image of slider (its not slider

image, its the image I put on the background of my slider, how
can I do that?
also I have a right sidebar and I have tried to add color to it
using your ref above but it did not work. Could u pls help me?
Thank u very much

Dan
September 19, 2014 at 11:20 am

Regarding the slider background image am I right

in thinking that you added the background image
through your own CSS? I think all you will need to
do to decrease the height of the background image
is to set the height using the CSS background-size
property on the same CSS element that you set the
background image. You can use background-size to
set both the width and height of the background
image.

Dan
September 19, 2014 at 11:04 am

Hi rimtan, Ive updated the code on setting the

sidebar background color. I think I wasnt clear that
the main block of code didnt actually include the
line above which set the background color. Ive
updated that block so it includes the code to set the
background color so you should only need to copy
in the main block of code to get it to work. Hopefully
that will solve the issue, but let me know if not.
Ill get back to you about the slider background. A
lot of people seem to be having trouble with the
slider in general so I think I need to sit down and
figure out how to make it behave nicely for
everyone.

Jojo
September 14, 2014 at 11:58 am

Hi, for the divi right sidebar (or left), how can I make it such
that everything within it is perfectly at the centre? For example,
if you add an image to the sidebar, you will notice that the right
side of the image would be longer than the left side of the
image. I tried some padding and margin thingy but it didnt
work, hope you can help thanks :D

Dan
September 16, 2014 at 4:54 am

Hey Jojo, I see youve already figured out how to

center the text and headings. The image would be
perfectly centered, except for the fact it has some
white space around it (in the actual image file, that
is), which is slightly larger on one side than the
other. Removing this extra white space using an
image editor such as gimp (use the Image >
Autocrop option) will fix this. You probably also want
to resize the image to a height of 141px so that it
will display the same after cropping as it currently
does now.

Frederick
September 13, 2014 at 2:29 pm

Dear Dan,
Fine reading here, all round! Thanks.
Ive a question. Not knowing you Im reluctant to ask you to
take time but then, in my week of work toward a solution,
youre blog here is the most authoratative, friendly site Ive
come across in a long time. That said, heres my question
with a bit of an intro to set the stage:
Footer has been altered (via the footer.php doc in the parent
theme Divi).
Up to date versions of Divi and WP are in place and Im using
a Divi-child theme to alter design mostly.
The original footer.php file contained the WP and Elegant
Themes links. Ive replaced all their text with my one text.
Each page reveals (in code view) that the footer is outside of
the container that normally would allow it to cascade to the

bottom of the page. Thats not happening. Id like it to. Know of

a fix?
Thanks in advance and highest regards,
Frederick

Dan
September 14, 2014 at 6:53 am

Hi Frederick,
Thanks for the kind words, and Im more than happy
to help out when I can.
Am Im right in thinking that you want the footer to
stay at the bottom of the page (so that you only see
it when you scroll to the bottom of the page), rather
than having it hover over the page at all times? If
so, its an easy fix. I notice in your custom CSS
(which you can find in the ePanel, at the bottom of
the General Settings tab), you have the following
code:

#main-footer {
background-color: #ffffff;
bottom: 0;
position: fixed;
width: 1200px;
z-index: 999;
}

Removing the position: fixed; line, or changing it to

position: relative; should remove the hover effect
and cause the footer to sit at the bottom of the
page.
I hope that helps.

Geno
September 12, 2014 at 11:01 am

This is great Dan. Thank you so much. I will share this on the
Divi Theme Users Facebook forum. Are you in that group
already?

Dan
September 12, 2014 at 11:19 am

Thanks Geno! I had heard rumor of the Facebook

forum, but hadnt checked it out. Ive just jumped on
now though and submitted a request to join, so Ill
hopefully see you in there soon =)

Geno
September 12, 2014 at 11:43 am

Cool! Looking forward to connecting on

there. You will definitely be a welcome
addition. Its not an official ET forum but
Nick Roach is a member and chimes in
every now and then :-)

Chris
September 10, 2014 at 7:06 am

Just to clarify:
blue module | yellow module | green module | purple module

Chris
September 10, 2014 at 7:04 am

I have been trying to figure this out for hours and have run into
many walls doing it. I want to make a section containing four
horizontal modules 1/4 of the width of the page each. Each
module will be filled with a different background color. I want
those four modules to touch each other. Is there a solution to
this?

Dan
September 11, 2014 at 3:53 pm

Hi Chris,
You can do it by adding the following CSS to the
theme:

.post-80 .et_pb_column_1_4:nth-of-type(1) {
/* first module */
background-color:blue; color:white;
}
.post-80 .et_pb_column_1_4:nth-of-type(2) {
/* second module */
background-color:yellow; color:black;
}
.post-80 .et_pb_column_1_4:nth-of-type(3) {
/* third module */
background-color:green; color:white;
}
.post-80 .et_pb_column_1_4:nth-of-type(4) {
/* fourth module */
background-color:purple; color:white;
}
.post-80 .et_pb_column_1_4 { /* all the
modules */
margin-right:0; padding-left:22px; paddingright:22px;
}

You need to replace 80 in each of the .post-80

parts with the ID of the post you want to apply this
to.
The final part in the above CSS adjusts the margins
/ padding so that all of the modules touch.
One thing to note is that the above will also apply
the same colors to any other four-quarter column
rows on the page. It is possible to avoid this, but a
bit more complex. Let me know if that is something
you need.

MrMiniVee
September 7, 2014 at 11:23 am

Hey Dan, i have altered the size of my logo and am wondering

how i can get the menu test to line up or center horizontally
Thanks!

Dan
September 11, 2014 at 3:18 pm

Hey MrMiniVee,
Ive had a play around with this. On my test site, I
wasnt able to mess up the horizontal centering, but
I did notice that making the logo taller messed up
the vertical centering (i.e. the links need to be
moved down to sit in the middle of the header bar).
In case this is the problem you were having, Ive
added a section on fixing the header links vertical
alignment.
But if not, if youre able to send me a link to the
page on which the error is happening or explain
further what you are seeing Ill do my best to help
you out.

ling
September 4, 2014 at 11:50 pm

How do I add a text box color to my sidebar?

And where do I paste the CSS? I am very new to CSS and divi

Dan
September 7, 2014 at 10:49 am

Hi ling,
Sorry, could I get you to explain a bit more what it is
youre trying to do? Im not completely sure what it
is youre trying to achieve. Are you looking to add a

colored box with some text in it, or is it an actual

HTML textbox element that you want to color, or
something else? If youve got an link to the page
with the text box you want to color, that would help a
lot.
Ive written up a post about adding text to Divi,
which should answer that part of your question at
least!

ling
September 7, 2014 at 11:15 am

I have found a website example that

shows what im trying to achieve.
http://www.thesteakhouse.com.sg
/index.php/main/index2
Basically, i have a left sidebar and I want
to have a background color to it, like the
one in the example.
Is it possible to do so?
Im sorry for not explaining clearly.

Dan
September 7, 2014 at 4:21 pm

Okay, I get it now. Thanks for

that :)
Ive added a section above
describing how to set

the

sidebar background color. You

might also want to look at the
bit about removing the dividing
line.
Hope that helps!

Abraham
September 4, 2014 at 12:57 pm

Hey Dan,
I was wondering if theres a way to change the #pagecontainer{ padding-top:xx} when scaled to the mobile view,
differently than on normal view.
But also, I would like to set the padding-top to be different on
the homepage, versus the inside pages.
So in total there would be four different variables to the
padding-top, of #page-container.
I want to do this because Im pushing a header image under a
transplucent version of the top navigation, but it doesnt look
right on the mobile views, since it pushes h1 title text up into
the navigation bar.
If you can help me youre a life saver!
Thank you,
Abe

Dan
September 7, 2014 at 10:13 am

Hi Abe,
I think this will do what you need:

/* posts and pages */

.single #page-container, .page #pagecontainer {
padding-top:10px !important;
}
/* homepage */
.home #page-container {
padding-top:10px !important;
}
@media only screen and ( max-width:981px
){

/* mobile posts and pages */

.single #page-container, .page #pagecontainer {
padding-top:10px !important;
}
/* mobile homepage */
.home #page-container {
padding-top:10px !important;
}
}

Ive used the home, single and page classes of

the body element to target the homepage, posts
and pages respectively.
Ive used a media query to trigger mobile-specific
padding when the page width falls below 981px
(you may want to play around with the width at
which your mobile-specific padding kicks in, but
981px is the point at which Divi stops using a
floating header, so hopefully it is right for you).
Finally, Ive added !important to all the padding rules
to make sure the browser uses our rules instead of
the default top-padding set by Divi which would
otherwise take precedence (as it is set using inline
CSS).
Hope that helps!

Abraham
September 7, 2014 at 2:22 pm

Dan, you rock!

A member of the elegant press actually
gave me a worse solution than yours.
This is perfect, exactly what is needed.
Flawless!
I owe you a drink!
-Abe

Dan
September 7, 2014 at 3:46 pm

Ha ha! Glad its what you

wanted! Im a dark ale man
:)

Abraham
September 7, 2014 at
9:15 pm

Excellent! Ill have to

share a link to your
website for your epic
assistance.
Thanks bro!
Abe

Dan
September 7, 2014 at
9:41 pm

Beer

and

backlinks

youre

spoiling me, Abe!

Glad

you

got

it

working the sites

looking awesome!

Abraham
September 7, 2014 at
7:10 pm

A stout, or a lager,
maybe a Guinness?
I seem to have the
issue mostly sorted
out,

but

theres
zone

notice

middle

that

messing

Divi
with

is
as

well. If you slowly

scroll the width of
the theme, youll see
that

somewhere

between

600-800

pixels it messes up
the height again and
the

background

image looks funky.

On an off-note Im
trying

to

set

background

the

image

of the main mobile

menu, the css is
currently
commented

out

because if on, the

translucency
displaying

stops

properly

and so do some of
the h2s lower on the
page (this is a
much lower priority
atm

than

the

previous task)
Thank you brother!
Abe

Dan
September 12, 2014 at

6:13 am

Ive added a section

on

setting

semi-transparent
background
for

the

image
header,

which will hopefully

answer

your

off-note.

Dan
September 7, 2014 at
8:17 pm

Ha ha! Its all good

to me!
Okay,

can

see

where its messing

up. You can use
another media query
to target this zone.
So your code will
end up looking like:

/* large
screens */
...
@media only
screen and (
min-width:
768px ) and (
max-width:
980px ) { /*
funky zone */
...
}
@media only
screen and (

max-width:
767px ) { /*
mobiles */
...
}

Where the dots are

replaced

by

the

padding rules as per

my

previous

comment. Note that

Ive also reduced the
max-width

for

the

mobile part.
The widths are a bit
higher

than

you

noticed, but I think

Ive got them correct
they match up with
Divis

main

breakpoints.
Anyway, give it a
shot and adjust if
needed.
Ill take a look at the
mobile

background

image

separately

next chance I have

:)

Massimo
September 4, 2014 at 9:45 am

Hi Dan, thanks for taking care of us CSS newbies! =)

I love Divi and I already used it to build a few sites
sometimes I did some basic customization getting mad with
the editor, but finally getting it even if after thousands of trials
and mostly errors.
One thing that I cannot manage to customize is the size of the

Fullwidth Slider. I like it as it is, but one of my clients is asking

me to reduce its height, so to make visible also whats below
to users who land on the homepage. Id like to take it down to
400-450px max is there any CSS command I can add to
reduce its height?
Thanks in advance for your support!

Dan
September 7, 2014 at 7:32 am

Hey Massimo! Someone has to look after you guys

=p
Ive added a section above on changing the height
of the Divi slider.
Hopefully that is enough for your needs. It should be
if your clients images have the right proportions for
the new height, but let me know if there are any
more adjustments you need to get the look right
(scaling images, etc).

Steve
January 3, 2015 at 8:06 pm

Hi Dan,
You have created a very useful page
here, thanks. Im fairly new to Divi and
still testing it out. Im also having
problems with the full width slider. You
mention its a fixed size, but it has to be
responsive for mobiles etc. so would your
solution require an @media or did you
have something else in mind?
The main problem I have is ensuring the
image fits correctly on all devices. It
never

does

and

its

proving

very

frustrating. Any tips greatly appreciated.

Cheers. Steve

Dan
February 2, 2015 at 3:36 pm

Hi Steve,
Ive just updated the code for
changing the slider height. Ive
added a media query so that
my

fix

desktops.

only
On

applies
mobiles,

on
it

defaults to the standard Divi

slider height. This works better
than what I had before, but Ill
look into this further at some
stage and see if I can improve
the look on mobiles (perhaps
maintaining the same width to
height ratio as for the desktop
slider). Hopefully my update is
sufficient in the meantime.

Andy
September 2, 2014 at 2:23 am

Is there a way to remove the divi logo on the home page

without removing the entire banner or without having to put
another logo in its place?

Dan
September 5, 2014 at 8:21 am

Hi Andy, you can remove the logo completely by

adding the following CSS:

#logo { display:none !important; }

brendan
August 27, 2014 at 1:58 am

How can you add a header image above the nav? Ive been
trying all types of things. Ideally, it could be large, like the size
of the slider but full width.

Dan
September 7, 2014 at 6:26 am

Hi brendan, Ive added a section above describing

how to add a full-width image above the header bar.
I hope that achieves the affect you are after.

R
August 25, 2014 at 7:14 am

Hi Dan,
Is there a way I could add a widget in the header section (on
the right) because I will not be having any links being shown in
that area.
Thanks.

Dan
September 5, 2014 at 8:56 pm

Hi R, Ive added a section to the post above

describing how to replace that header section with a
widget area. You can then add your widget to the
new

widget

area

(named

Header)

in

your

WordPress dashboard widgets page.

gallager
August 21, 2014 at 11:58 pm

How do you center an image on a page? i see that there is no

alignment options there.
and How do you remove the header permanently. I prefer to
have the page with no header, just plain content.

Dan
August 23, 2014 at 4:34 pm

Hi gallager,
Which images are you trying to center? If you can
point me to an example, I should be able to help
you out.
To remove the Divi header, you can add the
following CSS:

#main-header { display:none; }

#page-container { padding-top:0px !important

}

Brent
August 18, 2014 at 12:45 am

Hi Dan
Im new to CSS. Is it possible to change the font size in only
one text module with CSS in Divi?
Thanks

Dan
August 23, 2014 at 9:03 pm

Hey Brent,
You can do it like so:

.post-57

/* apply to

page / post with ID 57 */

.et_pb_section:nth-of-type(1) /* apply the the
first page builder section */
.et_pb_row:nth-of-type(1)

/* apply to the

first row of the section */

.et_pb_column:nth-of-type(2) /* apply to the
second column of the row */
.et_pb_text:nth-of-type(2)

/* apply to the

second text module in the column */

{
font-size: 14pt;
}

You just need to change it to use the id of the page /

post you wish to target, then set the correct indices
in the nth-of-type() parts to correspond to the page
builder section, row, column and text module you
wish to change the font-size on.

h4ns3n
August 5, 2014 at 2:05 pm

im using Divi 2.0.

How can I show a caption instead of the title when viewing the
full size image from a gallery? Thanks for any help.

Dan
September 5, 2014 at 9:56 pm

Hi h4ns3n. You can make the gallery show the

caption instead of the title by changing this bit of
code (located around line 3625 of the Divi
functions.php file):

$image_output = sprintf(
'<a href="%1$s" title="%2$s"
rel="nofollow">
<img src="%3$s" alt="%2$s" /><span
class="et_overlay"></span>
</a>',
esc_attr( $full_src ),
esc_attr( $attachment->post_title ),
esc_attr( $thumb_src )
);

To:

$image_output = sprintf(
'<a href="%1$s" title="%2$s"
rel="nofollow">
<img src="%3$s" alt="%2$s" /><span
class="et_overlay"></span>
</a>',
esc_attr( $full_src ),
esc_attr( $attachment->post_excerpt ),
esc_attr( $thumb_src )
);

Note that all Ive done is change the post_title part

to post_excerpt.

sachin22
July 25, 2014 at 1:19 pm

please help
I am a wordpress Developer and want help below what i want
i want to make some changes in blog section of divi theme i
am enable to find file from which blog is coming can anybody
help me
Thanks In advance

Dan
September 5, 2014 at 9:20 pm

Hi sachin22. The main listing of blog posts

displayed on the Divi homepage is generated by the
following file:

/wp-content/themes/Divi/index.php

Hopefully that is what youre looking for

Michael
July 19, 2014 at 7:53 pm

Hi,
I wanted to create a new widget area in the main header. Is
there a way to use the sidebar module for the main header? I
try the snippet codes but it does not works in the function.php.
Or maybe I pasted wrong codes or place. Can you help?
Check out the snippet codes

'Header Sidebar',
'id' => 'header_sidebar',

'before_widget' => '',

'after_widget' => '',
'before_title' => '',
'after_title' => '',
) );
}
add_action( 'widgets_init', 'wpgyan_widgets_init' );
?>

Note: I have added prefix wpgyan_ to function name at two

places at top and at bottom.You can change to a prefix of your
choice.
2. Display Widget Area
To display Widget Area add following code to location of your
choice in your theme file.
Where:
header_sidebar is id of Widget area in Step 1.
If this is the correct codes, where do I paste them at? Ive tried
to pasted after the code below:

function et_divi_sidebar_class( $classes ) {

...
return $classes;
}
add_filter( 'body_class', 'et_divi_sidebar_class' );

But It does not work then have a parsor error. Help!

Thanks,
Michael

Dan
September 5, 2014 at 9:06 pm

Hi Michael, It looks like your code is missing some

bits Im not sure if they have just been lost in the
copying and pasting though
Anyway, Ive added a section to the post above
describing a (slightly) different way of adding a

widget area to the Divi header. It should achieve the

same effect that I think youre going for. Let me
know if you have any trouble with it.

farmfoodie
July 11, 2014 at 4:44 pm

How do I remove the permanent header in Divi?

Also, how do I center position images?

Dave
January 29, 2015 at 7:33 am

Hi There!
Have you tried using the blurb module instead of
the image one.. this centres the image automatically
for you instead of having to use CSS. Just upload
the image and dont add any text on it. Hope that
helps!
Thanks,
Dave

Dan
July 16, 2014 at 4:37 pm

Hi farmfoodie,
By permanent header, do you mean the one which
starts off big, but then shrinks when you scroll down
a bit? It looks like youve now managed to disable
this from within Divis control panel, am I right?
Another (less ideal) way to do it is by adding this the
end of the Divi themes style.css file:

.et-fixed-header { display:none; }

With this, when you scroll down the header will

disappear instead of shrinking.

(Note that the transition isnt as smooth as Id like,
so when I get a chance Ill try and improve this).
If you want to center images within posts, you can
select choose center alignment when you add the
image to the post, or hover over an image youve
already added, and click on the pencil icon that
appears. You will then be taken to the image edit
screen where you can again select center
alignment.
If you want to center an image which the user has
clicked on (and is the only thing now displayed in
the tab), Im afraid youre out of luck as this is the
browser displaying just the image and nothing else
(so there is no way to add commands to center it).
One option in this case is to look for a plugin which
displays images in a nice centered overlay on the
page. I havent used any to recommend to you, but
maybe something like this might work: Thumbnail
Viewer Plugin.
I hope Ive understood what it is youre trying to do,
and been at least partially helpful!
Dan

Add a Comment
Name*

Email*

Website