Top 10 Frequently Used CSS Tricks and Fixes

Introduction

It’s no secret, we all love Divi, and the way it’s transformed our web development work flow. There are, unfortunately, still some annoyances that come with using Divi. As such, there are quite a few tweaks that we tend to use on most of our Divi projects, sometimes to fix things, and sometimes just to add a little bit of flair to what otherwise might be pretty plain. Today, I’m going to share with you our most commonly used Divi tweaks. Let’s dive right in, shall we!

Tweak #1 – Link Transitions

Tweak #1 is a very simple one, but it’s a simple trick that goes a long way. Let’s not just have a basic rollover color change on our links, but rather a smooth fading transition. To use this, add the following to your child theme stylesheet.

1

2

3

4

5

6

7

8

/* Add transitions to link hover effects */

a{

-webkit-transition:color.5sease;

-moz-transition:color.5sease;

-o-transition:color.5sease;

-ms-transition:color.5sease;

transition:color.5sease;

}

Tweak #2 – Stop Changing Opacity On Hover Of Menu Links

This one is arguably subjective, but I prefer to instead set a rollover color, rather than lowering the opacity of a menu link on hover. To achieve this, add the following CSS to your child theme stylesheet.

1

2

3

4

5

/* Stop changing the opacity of our main nav on hover */

#top-menu li a:hover {

color:#2d93cf; /* Hover color */

opacity:1!important;

}

Tweak #3 – Fix For Text On Dark Colored Buttons

If you’ve been making Divi sites for a while, then you’re probably aware that there is a bug when it comes to buttons, particularly the comments buttons on posts. When you have a dark colored button, the theme customizer doesn’t actually change the text color on these buttons, which makes things look pretty bad. Thankfully, we can fix this pretty quickly with some CSS. This will also apply to your WooCommerce buttons. You know the drill, child style time!

Tweak #4 – Full-Width Footer

Have you ever used the full-width header setting, only to be disappointed when your footer doesn’t have a full-width option to match it? No problem! We can fix that pretty easily with the following CSS.

1

2

3

4

5

6

7

/* Make Footer Full Width */

#footer-bottom .container{

margin-right:1.5%;

margin-left:1.5%;

width:97%!important;

max-width:97%;

}

Tweak #5 – Header Background Images

Okay, a solid color background on the header is nice and all, but what if you want something nicer? We like to use a background image and put a drop shadow on our menu text. Here’s the code for that. You can also change “no-repeat” to “repeat” if you’re using a tiled image.

Tweak #7 – Remove The Divider Line Between Content And Sidebar

CSS

1

2

3

4

/* Take out the divider line between content and sidebar */

#main-content .container:before {

background:none;

}

Tweak #8 – Hide The WooCommerce Shopping Cart Icon

So your site is looking great, but that pesky WooCommerce shopping cart icon is just throwing everything off? Just hide it! Be sure to provide another means of the user getting to their shopping cart before doing this.

Tweak #9 – Remove Bullets From Widgets In The Footer

Tweak #10 – Remove Excerpts From The Blog Grid Module

So you like the look of the blog grid module, but you’re struggling with keeping all the entries the same height? It really does look pretty terrible when they don’t match up. We choose to just remove the excerpts entirely for a much cleaner look. Here’s how, and it’s dead simple.

CSS

1

2

3

.post-content {

display:none;

}

Conclusion

Do you use any of these tweaks for Divi? Are you going to start? Did we blow your mind? Did we miss anything? Let us know in the comments!

Bonus Content! – Divi Child Theme

If you like all these tweaks, I’ve provided a child theme with all of them already applied. Of course, you can simply remove the tweaks you don’t want to use from the child stylesheet. Enjoy!

When I began my project I knew I wanted to hire somebody in the United States as I had some issues previously with programmers outside the country. I wound up hiring Jason and his team at tastycoders. I do have some computer programming knowledge so I ask difficult questions. Jason made me feel comfortable with his ability to complete the project. I am grateful to have hired Jason as my project is now complete and I'm quite satisfied not only with his ability to complete my project but his ability to follow up when it issues arise. I'm looking forward to working with Jason and his team when I introduce new features to my website.read more

Jason at Tasty Coders is super-knowledgeable when it comes to marketing anything online. He understands the marketing side, the design side, the video marketing and the under-the-hood coding side of things, too. It's rare to find someone that's good at all four. I strongly recommend him.read more

T. Coders saved us a ton of money on a few web applications and website builds- if you need a custom site built, Tasty Coders can get it done without all the hand-holding and constant communication issues you get with sketchy overseas resources. The company is mature and robust enough to handle larger projects but they also seem able to handle the little things we throw their way- WordPress and Drupal installations, skinning, and configuration, etc. It's also nice to work with a shop that can provide web content solutions so the pressure is off of us to flesh out our new builds and get a ranked site quickly in the Search Engine Results Pages. Good team, quick turnaround, and diligent. Use them.read more

These guys rock!
Jason Brashear took a job that another guy failed at and owned it! This job was no easy task, and was crucial to the success of my startup. If you are looking for someone to do a job that is integral to your organizations success, this is the man you can bank on coming through for you!read more

We have been working with Jason and his team for some time now on various back and front end projects. Jason and his staff have been 100% reliable and have delivered on time and on budget. He has been easy to work with and understands what we are trying to do with our platforms and how to improve them. Highly recommended.read more

Tasty{coders} was recommed to our office by by our IT guy Richard from Titanium Computing (who has been a tremendous resource for us). So when Richard highly recommed Jason to our office we knew Tasty{coders} would get great results for our website/online presence. Right away after meeting Jason/Tasty{coders} we knew we were in good hands and that clearly he was not your average SEO guy! He has provided us with such knowlegedble, professional service and quick response time to our needs. I know his game plan for the office will exceed anything we could have could have hoped for. If you want to feel confident about who you choose for your SEO/online presence needs then I recommed calling Tasty{coders}. Jason will make it happen.read more

Tasty Coder has done a fantastic job on our Search Engine Marketing. They have delivered on exactly what they said they would do. I would Highly recommend them for your online marketing needs.read more

Jason is unquestionably one of the most talented web designers available. He constantly strives to exceed your expectations with enhancements and ways to draw more people to your website. He deserves 10 stars on a 5 star rating system.
Jerry Stephens, CEO SOS Communicationsread more