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;
}
}
Hide blog content in DIVI blog grid mode
With the Divi theme blog module, there are two display option, grid or full post. Both of these allow for a short amount of blog content to be shown, or the full blog post content.
There is not an option to not show the content in the Divi blog module.
If you wish to have the blog post just show featured image or may be just the the title, you can configure that in the module itself. To remove the content of the blog posts from showing in the grid view, login the WordPress admin area and under Divi >> Theme Settings, enter the following custom CSS:
.et_pb_post .post-content {
display: none;
}
There is not an option to not show the content in the Divi blog module.
If you wish to have the blog post just show featured image or may be just the the title, you can configure that in the module itself. To remove the content of the blog posts from showing in the grid view, login the WordPress admin area and under Divi >> Theme Settings, enter the following custom CSS:
.et_pb_post .post-content {
display: none;
}
Remove WooCommerce cart icon from DIVI header
To remove the WooCommerce cart icon from the DIVI header on your WordPress site.
Login the WordPress admin area and under Divi >> Theme Settings, enter the following custom CSS:
.et-cart-info { display:none; }
Login the WordPress admin area and under Divi >> Theme Settings, enter the following custom CSS:
.et-cart-info { display:none; }
Add a transparent overlay to Fable theme featured image
If you are running the Fable theme for WordPress by Elegant Themes, then you may notice this little bug when you use features images. The text or post title of the WordPress post is usually hidden because it cannot be seen over the featured image.
To add the transparent overlay please add the following code to the Custom CSS box in the ePanel options:
.category .post.entry.et-background-image:before {
content:'';
display:block;
width:100%;
height:100%;
z-index:999;
position:absolute;
top:0;
background:rgba(0,0,0,0.5);
}
.category .post.entry .container.clearfix {
z-index: 9999999;
}
To add the transparent overlay please add the following code to the Custom CSS box in the ePanel options:
.category .post.entry.et-background-image:before {
content:'';
display:block;
width:100%;
height:100%;
z-index:999;
position:absolute;
top:0;
background:rgba(0,0,0,0.5);
}
.category .post.entry .container.clearfix {
z-index: 9999999;
}
Hide the Email icon in Divi theme header
To hide the email icon in the DIVI theme header, just enter the below custom CSS:
/* Hide Mail Icon in Header */
#et-info-email {
display: none;
}
The icon appears if you only wish to have the phone number appear. You can disable them in theme customizer if you do not wish to display the phone and email icons.
/* Hide Mail Icon in Header */
#et-info-email {
display: none;
}
The icon appears if you only wish to have the phone number appear. You can disable them in theme customizer if you do not wish to display the phone and email icons.
Subscribe to:
Posts
(Atom)
New to DIVI?
Search
Tags
Blogger
(5)
buttons
(1)
css
(3)
divi
(103)
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
(3)
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