Customizing DIVI Testimonial module with a horizontal line
|
Reduce padding from DIVI Blog Grid Layout
The blog module in grid mode seems to be adding padding between rows of posts. To reduce this padding, add the following CSS code to your custom CSS (Divi > Theme Options > General tab > Custom CSS box.
.et_pb_gutters1.et_pb_row .et_pb_column .et_pb_blog_grid .column.size-1of3 .et_pb_post:last-child {
margin-bottom: 0 !important;
}
.et_pb_gutters1.et_pb_row .et_pb_column .et_pb_blog_grid .column.size-1of3 .et_pb_post:last-child {
margin-bottom: 0 !important;
}
How to Remove Sidebar from WooCommerce Shop and Category Page
Looking to make category pages full width? There are many posts online that tell you to edit core WooCommerce files. This is not the best practice as there are regular updates to the WooCommerce plugin. When you update the plugin, it will revert back to the page with the sidebar.
Please add this CSS code into Divi > Theme Options > General > Custom CSS field.
#left-area {
padding-right: 0 !important; width: 100%;
}
#sidebar {
display: none;
}
#main-content .container::before {
display: none;
}
Please add this CSS code into Divi > Theme Options > General > Custom CSS field.
#left-area {
padding-right: 0 !important; width: 100%;
}
#sidebar {
display: none;
}
#main-content .container::before {
display: none;
}
Change No products were found matching your selection background color for WooCommerce
If you install the WooCommerce plugin for WordPress, you may notice some colors do not match your WordPress theme. You can add a CSS over-ride to change the default color here.
Add this CSS code to make the blue background black.
woocommerce .woocommerce-error, .woocommerce .woocommerce-info, .woocommerce .woocommerce-message {
background: #000!important;
}
background: #000!important;
}
Change the Latest Tweets font color in Elegant Themes Extra footer
The Elegant Themes Extra theme has a Twitter app built in. You can see how to create a Twitter app but you once complete, you may notice that you cannot read the tweet text. This is because it is the same color as the footer background.
To change this simply add the below CSS code:
.post-tweet {
color: #fff!important;
}
To change this simply add the below CSS code:
.post-tweet {
color: #fff!important;
}
 |
| Before adding the CSS |
 |
| After adding the CSS |
Force comment button text to white in Divi
Add this custom CSS to the main theme custom CSS box:
#comment-wrap .comment-reply-link, #comment-wrap .submit.et_pb_button {
color: #ffffff!important;
}
#comment-wrap .comment-reply-link:hover, #comment-wrap .submit.et_pb_button:hover {
color: #ffffff!important;
}
#comment-wrap .comment-reply-link, #comment-wrap .submit.et_pb_button {
color: #ffffff!important;
}
#comment-wrap .comment-reply-link:hover, #comment-wrap .submit.et_pb_button:hover {
color: #ffffff!important;
}
How To Make Divi Blog Grid Posts The Same Height
The Divi blog grid layout does have a limitation, when you have
featured images of different sizes, and post titles/excerpts which are
different lengths, it can cause the grid to look uneven – even with the
‘Equalize Column Heights’ option checked.
Go to Blog Module Settings > Custom CSS and give the module the CSS Class “new_grid_blog”.
Add the following code to your Custom CSS box:
@media only screen and (min-width: 768px) {
.new_grid_blog .et_pb_post {
min-height: 520px;
max-height:520px;
}
}
Go to Blog Module Settings > Custom CSS and give the module the CSS Class “new_grid_blog”.
Add the following code to your Custom CSS box:
@media only screen and (min-width: 768px) {
.new_grid_blog .et_pb_post {
min-height: 520px;
max-height:520px;
}
}
Subscribe to:
Posts
(Atom)
New to DIVI?
Search
Tags
Blogger
(5)
buttons
(1)
css
(3)
divi
(106)
elegant themes
(45)
extra
(9)
fable
(1)
gravity forms
(11)
jQuery
(3)
ownCloud
(1)
ProtonMail
(3)
Reddit
(2)
responsive
(1)
tables
(1)
vanilla forums
(3)
whmcs
(3)
WooCommerce
(5)
wordpress
(40)
Top snippets
- DIVI menu text bold on hover
- How to remove the responsive functionality from Elegant Themes Exlorable
- Move secondary Menu in DIVI below the Primary Menu
- Disiable Mobile Menu from showing with DIVI theme
- Disable pause on hover for DIVI slider module
- Add Thin Colored Line Under Menu in DIVI
- How to center align the Gravity Forms submit button
- Integrating Gravity forms with DIVI
- Divi menu overlaps logo when scaled down
- Vertically align Divi button
More Dorky Sites