Custom hamburger icon including MENU with icon

Posted on 22:11:00by with No comments
This CSS snippet is written for the DIVI theme by Elegant Themes. To have another hamburger icon that includes custom text. Just a simple "menu" text beneath the hamburger icon. Add this in the custom css section in the theme options:

.mobile_menu_bar.mobile_menu_bar_toggle::after {
content: "Menu";
position: absolute;
top: 38px;
right: 2px;
font-size: 12px;
}

Add Yelp icon to the social media icons in DIVI

Posted on 21:59:00by with 23 comments
To add Yelp icon to the social media icons in DIVI, add the following code to includes/social_icons.php before </ul>:

<li class="et-social-icon et-social-yelp">
<a href="yelp link goes here‎" class="icon">
<span><?php esc_html_e( 'Yelp', 'Divi' ); ?></span>
</a>
</li>

then add the following code to custom css box in Divi>theme options:

.et-social-yelp a.icon:before { content: url("Yelp icon url here"); }

Add Whatsapp icon next to the phone icon in the DIVI primary header

Posted on 21:27:00by with 2 comments
To add the whatsapp icon next to the phone icon in the primary menu.

Please add the following code to includes/social_icons.php before </ul>:

<li class="et-social-icon et-social-whatsapp">
<a href="#‎" class="icon">
<span><?php esc_html_e( 'Whatsapp', 'Divi' ); ?></span>
</a>
</li>

then add the following code to custom css box in Divi>theme options:

.et-social-whatsapp a.icon:before { content: url("whatsapp icon url here"); }

Increase pricing text size on WooCommerce products

Posted on 21:22:00by with No comments
Looking to increase the size of the pricing text on the woocommerce pages?

You can use the following CSS rule in your themes custom CSS:

.woocommerce ul.products li.product .price, .woocommerce ul.products li.product .price del, .woocommerce-page ul.products li.product .price, .woocommerce-page ul.products li.product .price del {
font-size: 18px;
}

How to make DIVI people module the same height

Posted on 17:24:00by with No comments
Looking to make the People module the same size, even though the other box has less text compare to the other one like the picture below?



To correct this and make same height, in the row settings > design tab > set equalize column heights.

Then for each person module > advanced tab > custom css > main element window add the following:

height:100%;

This will produce the below:


Add shading over a DIVI background video

Posted on 17:20:00by with No comments
You can add transparent shading by adding below to your "additional css" window and adjust the ".5" value as desired.


.et_pb_fullwidth_header.et_pb_fullwidth_header_0 {
background-color: rgba(0,0,0,.5)!important;
}

Custom CSS for Thank you message on Divi Contact Form

Posted on 19:22:00by with No comments
When the user submits the contact form on the Divi contact form they get the 'thank you message', however to change the font and justification of this message, add the below custom CSS and edit to suit:

#page-container .et_pb_contact_form_0.et_pb_contact_form_container .et-pb-contact-message {
color:aquamarine;
text-align: center;
border: 1px solid lightgreen;
background: orange;
}

Remove extra padding on Divi blog grid layout rows

Posted on 19:16:00by with No comments
The Divi blog module in grid mode may sometimes add padding between rows of posts. No matter what you do (adjust padding/margins/gutter width, etc on each the section, row, and module) it can be a challenge to get rid of it.

The solution is to 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;
}

Divi Contact form full-width submit button

Posted on 19:07:00by with No comments
With the Divi theme to make the submit button on the contact form module full width. See CSS code below.

Desktop only CSS code:

body #page-container .et_pb_contact_form_0.et_pb_contact_form_container .et_pb_button {
width: 97%;
margin-left: 7px;
margin-top: 6px;
}
body #page-container .et_pb_contact_form_0 .et_contact_bottom_container {
width: 100%;
}

Mobile only CSS code:

@media (max-width: 479px){
.et_contact_bottom_container {
width: 100%!important;
}
.et_pb_contact_submit {
width:100%!important;
}
}


Customizing DIVI Testimonial module with a horizontal line

Posted on 08:24:00by with No comments
Name the CSS Class of the Module "testimonial-line".
Use this CSS Code: 
 
.testimonial-line .et_pb_testimonial_author {
margin-top: 35px !important;
}
.testimonial-line .et_pb_testimonial_description_inner::after {
content: "";
position: absolute;
text-align: center;
width: 40%;
left:50%;
margin-top: -40px;
border-top: 1px solid #939290;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}


Reduce padding from DIVI Blog Grid Layout

Posted on 08:22:00by with No comments
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;
}

How to Remove Sidebar from WooCommerce Shop and Category Page

Posted on 12:01:00by with No comments
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;
}

Change No products were found matching your selection background color for WooCommerce

Posted on 13:35:00by with 5 comments
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;
}

Change the Latest Tweets font color in Elegant Themes Extra footer

Posted on 12:24:00by with No comments
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;
} 
Before adding the CSS
After adding the CSS

Force comment button text to white in Divi

Posted on 23:06:00by with No comments
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;
}
Subscribe to: Posts (Atom)