On The Tenth Day Of Divi, We Explore Seven Simple CSS Tricks

Hopefully you have had a chance to download our latest theme, Divi. As mentioned in the Theme Launch Post, we will be writing a Divi-related post on our blog every day for the next 12 Days of Divi. Be sure to tune in each day for the next twelve days to get your hands on tons of Divi-related tips and resources! If you haven’t checked out Divi yet, then click the link below to view the release post with all the juicy details, and for your chance to win a free Lifetime Membership!

7 Simple CSS Tricks For Divi

You’d be surprised what a few lines of CSS can do. Today, we would like to share a few easy customizations that you can make to your Divi Theme using only the Custom CSS panel in our ePanel Theme Options. There is even a good chance that some of these customizations will be theme options in future updates of Divi. To apply this changes, simply copy and paste the code mentioned into the “Custom CSS” box in ePanel, which can be found under the Appearances > Theme Options tab in your WordPress Dashboard.

Give Your Navigation Bar Absolute Positioning

By default Divi has a fixed header that will always appear at the top of the browser. If you have a short website, or do not want the navigation bar to impede your content, you can use this CSS modification to add absolute positioning to your header so that it scrolls up with th rest of your page.

To apply this change, simply copy and paste the following code into the Custom CSS box in ePanel and click Save. If you ever want to revert back to the original style, you can simply delete the code from the Custom CSS field.

/*DIVI NAV - ABSOLUTE POSITIONING*/

#main-header{
	position:absolute;
}

.et-fixed-header{ 
	top: 0; 
	background-color: #fff; 
	position: absolute; width: 100%; 
	z-index: 99999; 
	padding: 18px 0 0 0 !important; 
	min-height: 43px !important; 
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) !important; 
	-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) !important; 
	-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) !important; 
	-moz-transition: all 0.2s ease-in-out; 
	-webkit-transition: all 0.2s ease-in-out; 
	transition: all 0.2s ease-in-out;
}
.et-fixed-header #logo { max-height: 43px; }
.et-fixed-header nav#top-menu { padding-top: 11px;}
.et-fixed-header #top-menu li > a { padding-bottom: 29px;}
.et-fixed-header .et-search-form { top: 46px; }
.et-fixed-header #et_search_icon:before { top: -3px;}

Outline Buttons with a Thin Stroke

This customization applies a stroke outline and no fill giving your buttons a lighter feel inside your modules. This effects both dark and light text options.

To apply this change, simply copy and paste the following code into the Custom CSS box in ePanel and click Save. If you ever want to revert back to the original style, you can simply delete the code from the Custom CSS field.

/*DIVI CTA BUTTONS - OUTLINE STYLE*/

.et_pb_bg_layout_light .et_pb_promo_button, .et_pb_bg_layout_light .et_pb_more_button, .et_pb_bg_layout_light .et_pb_newsletter_button, .et_pb_pricing_table_button {
	background-color: rgba(255, 255, 255, 0) !important;
	color: #82c0c7;
	border-color: #82c0c7;
}


.et_pb_promo_button, .et_pb_newsletter_button, a.et_pb_more_button, .et_pb_pricing_table_button {
	background-color: rgba(0, 0, 0, 0); 
	border: solid 2px; 
}

Square-Off Button Corners

Buttons in Divi have small, rounded corners, but you can use this CSS to give your buttons squared-off corners.

To apply this change, simply copy and paste the following code into the Custom CSS box in ePanel and click Save. If you ever want to revert back to the original style, you can simply delete the code from the Custom CSS field.

/*DIVI CTA BUTTONS - SQUARED CORNERS*/

.et_pb_promo_button, .et_pb_newsletter_button, a.et_pb_more_button, .et_pb_pricing_table_button {
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
}

Give Your Buttons a 50% Opacity Hover State

Create a smooth hover animation with this modification. With this CSS, your buttons will transition to 50% opacity upon hover to give the user a subtle interaction cue.

To apply this change, simply copy and paste the following code into the Custom CSS box in ePanel and click Save. If you ever want to revert back to the original style, you can simply delete the code from the Custom CSS field.

/*DIVI CTA BUTTONS - HOVER*/

.et_pb_promo_button, .et_pb_newsletter_button, a.et_pb_more_button, .et_pb_pricing_table_button {
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.et_pb_promo_button:hover, .et_pb_newsletter_button:hover, a.et_pb_more_button:hover, .et_pb_pricing_table_button:hover {
	opacity:.75;
}

Make Your Navigation Menu Dark

If you’re using section backgrounds and images that warrant a dark navigation, you can use this CSS to invert the light appearance of Divi’s menus.

To apply this change, simply copy and paste the following code into the Custom CSS box in ePanel and click Save. If you ever want to revert back to the original style, you can simply delete the code from the Custom CSS field.

#top-menu a, .et_mobile_menu a, #et_search_icon:before {
    color: #ddd !important;
}
 
#top-menu a:hover, .et_mobile_menu a:hover {
    color: #fff !important;
}
 
.nav ul li a:hover, .et_mobile_menu li a:hover { color: #111; background-color: #2b2b2b; }
 
#top-menu li.mega-menu > ul > li > a:first-child, .et_mobile_menu li a {
    border-bottom: 1px solid #444;
}
 
#main-header, .et_mobile_menu, .nav li ul , #top-menu li.mega-menu > ul > li > a:first-child:hover, .et-search-form {
    background-color: #333 !important;
}
 
.et-search-form input {
    background-color: #2b2b2b;
    color: #999;
}

Round Off the Corners

Almost every every element in Divi has squared-off corners. If rounded corners are a more desired look, this CSS will round the corners of every module and menu in Divi.

To apply this change, simply copy and paste the following code into the Custom CSS box in ePanel and click Save. If you ever want to revert back to the original style, you can simply delete the code from the Custom CSS field.

/*DIVI ROUNDED CORNERS - ALL MODULES*/

@media only screen and ( min-width:768px) and (max-width: 980px ) {
.et_pb_featured_table:nth-child(3), .et_pb_featured_table:nth-child(4){margin-top: 30px;}

.et_pb_pricing_table:nth-child(odd){
	-webkit-border-top-left-radius:6px;
	-webkit-border-bottom-left-radius:6px;
	-moz-border-radius-topleft:6px;
	-moz-border-radius-bottomleft:6px;
	border-top-left-radius:6px;
	border-bottom-left-radius:6px;
}

.et_pb_pricing_table:nth-child(odd) .et_pb_pricing_heading{
	-webkit-border-top-left-radius:4px;
	-moz-border-radius-topleft:4px;
	border-top-left-radius:4px;
}

.et_pb_pricing_table:nth-child(even){
	-webkit-border-top-right-radius:6px;
	-webkit-border-bottom-right-radius:6px;
	-moz-border-radius-topright:6px;
	-moz-border-radius-bottomright:6px;
	border-top-right-radius:6px;
	border-bottom-right-radius:6px;
}

.et_pb_pricing_table:nth-child(even) .et_pb_pricing_heading{
	-webkit-border-top-right-radius:4px;
	-moz-border-radius-topright:4px;
	border-top-right-radius:4px;
}

}

@media only screen and (max-width: 767px){
.et_pb_pricing_table{
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	border-radius:6px;
}

.et_pb_pricing_heading, .et_pb_tab_active:first-child{
	-webkit-border-top-left-radius:4px;
	-webkit-border-top-right-radius:4px;
	-moz-border-radius-topleft:4px;
	-moz-border-radius-topright:4px;
	border-top-left-radius:4px;
	border-top-right-radius:4px;
}

}


.et_pb_featured_table{
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	border-radius:6px;
}

.et_pb_featured_table .et_pb_pricing_heading, .et_pb_tabs_controls, .et_pb_column_1_3 .et_pb_tab_active:first-child, .et_pb_column_1_4 .et_pb_tab_active:first-child, .woocommerce-tabs ul.tabs {
	-webkit-border-top-left-radius:4px;
	-webkit-border-top-right-radius:4px;
	-moz-border-radius-topleft:4px;
	-moz-border-radius-topright:4px;
	border-top-left-radius:4px;
	border-top-right-radius:4px;
}

.et_pb_pricing_table:first-child { 
	-webkit-border-top-left-radius:6px;
	-webkit-border-bottom-left-radius:6px;
	-moz-border-radius-topleft:6px;
	-moz-border-radius-bottomleft:6px;
	border-top-left-radius:6px;
	border-bottom-left-radius:6px;
}

.et_pb_pricing_table:first-child .et_pb_pricing_heading, .et_pb_tab_active:first-child{
	-webkit-border-top-left-radius:4px;
	-moz-border-radius-topleft:4px;
	border-top-left-radius:4px;
}

.et_pb_pricing_table:last-child { 
	-webkit-border-top-right-radius:6px;
	-webkit-border-bottom-right-radius:6px;
	-moz-border-radius-topright:6px;
	-moz-border-radius-bottomright:6px;
	border-top-right-radius:6px;
	border-bottom-right-radius:6px;	
}

.et_pb_pricing_table:last-child .et_pb_pricing_heading{
	-webkit-border-top-right-radius:4px;
	-moz-border-radius-topright:4px;
	border-top-right-radius:4px;
}

.et_pb_all_tabs, .nav li ul, .et-search-form{
	-webkit-border-bottom-left-radius:6px;
	-webkit-border-bottom-right-radius:6px;
	-moz-border-radius-bottomleft:6px;
	-moz-border-radius-bottomright:6px;
	border-bottom-left-radius:6px;
	border-bottom-right-radius:6px;
}

 .nav li ul ul{
	-webkit-border-bottom-right-radius:4px;
	-moz-border-radius-bottomright:4px;
	border-bottom-right-radius:4px;
 }

.et_pb_main_blurb_image img.et-animated, .et_pb_counter_container, .et_pb_slider, .et_pb_testimonial, .et_pb_promo, .et_pb_image, .et_pb_portfolio_item img, .et_pb_post img, .et_pb_blog_grid .et_pb_post, .et_pb_newsletter, .et_pb_toggle, .et_pb_tabs, .et_pb_contact p input, .woocommerce ul.products li.product a img, .woocommerce-page div.product div.images img, .woocommerce-tabs, .et_overlay{
	-webkit-border-radius: 6px !important;
	-moz-border-radius: 6px !important;
	border-radius: 6px !important;
}

.et_pb_blog_grid .et_pb_post img{
	-webkit-border-top-left-radius:4px;
	-webkit-border-top-right-radius:4px;
	-moz-border-radius-topleft:4px;
	-moz-border-radius-topright:4px;
	border-top-left-radius:4px;
	border-top-right-radius:4px;
	-webkit-border-bottom-left-radius:0;
	-webkit-border-bottom-right-radius:0;
	-moz-border-radius-bottomleft:0;
	-moz-border-radius-bottomright:0;
	border-bottom-left-radius:0;
	border-bottom-right-radius:0;
 }

Style Your Posts With a Gray-scale Hover Effect

Using CSS3 Filters, we can apply some fun effects to our Project, Post, and Product images. This customization will de-saturate any image right in your browser. Combining this with CSS transformations, we can create a nifty fading effect on hover. After applying this CSS, your blog, portfolio, and store thumbnails will fade to black & white on hover.

To apply this change, simply copy and paste the following code into the Custom CSS box in ePanel and click Save. If you ever want to revert back to the original style, you can simply delete the code from the Custom CSS field.

/*DIVI POST, PROJECTS, and PRODUCTS - B&W HOVER STATE*/
 
.et_shop_image:hover, .et_portfolio_image:hover, .et_pb_post img:hover {
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
	filter: grayscale(100%);
}

.et_pb_post img{-moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s}
.et_overlay {background: rgba(255, 255, 255, .25);}
.et_overlay:before {color: #fff !important; text-shadow: 0 1px 3px rgba(0,0,0,.3);}
.et_shop_image:hover .et_overlay, .et_portfolio_image:hover .et_overlay { opacity: 1; border: 0 solid #e5e5e5;}