Blog

Tips, WordPress April 20, 2020April 20, 2020

Stop Divi from overwriting your shortcode or element CSS rules

I ran into an issue while using Divi and it’s getting a bit annoying.

You might have clients that use Divi for their sites or maybe it’s your favorite way of creating pages. It’s a very powerful visual composer/builder and you can easily create pages without a lot of coding knowledge.

But it can come to a point where you need to display something more complex on the page, grab some specific data from somewhere, a certain type of element that Divi doesn’t have, etc. For that you create shortcodes and you add the shortcode into the page, et voilà: you have rendered whatever it was you needed on the page.

In Divi you’ll have to go an extra step because it will mess with all your CSS that comes with the shortcode.

Divi does this annoying thing where everything is wrapped in .et-db #et-boc and overwrites style added to <div> elements, <a> elements and others.
.et-db being added at the <body> level and #et-boc at the Divi container level, it will apply to all elements that are inside a Divi container.

This kind of forces you to use the Custom CSS from Divi or add CSS in the page, I hate doing that. It might be great and easy for a person that doesn’t understand code, but I don’t find it useful at all. Especially if you have created a global element like a shortcode and you want to be able to use it on different pages and don’t worry about how it renders because of the builder used on that page.

One way to deal with this is by using Sass or SCSS on your shortcode component. You will define your CSS rules for the component but also for the component when it has a parent, in this case the classes mentioned above.

The end result will look something like the code below, notice that we refer to a parent by using &. (you can learn more about the parent selector here)

Copy Code

					
.my-element-class {
  /*add the proprieties in here;*/
}

.my-element-class {
  .et-db #et-boc & {
     @extend .my-class;
  }
}

or you can do it like this

Copy Code

					
%my-element {
  /*add the proprieties in here;*/
}

.my-element-class {
  @extend %my-element;
  .et-db #et-boc & {
     @extend %my-element;
  }
}

This way you will not duplicate your code in the SCSS file and you can keep everything clean in there, the shortcode style rendering correctly in Divi or used outside Divi.

I didn’t run into this particular issue when using WP Bakery for example. That’s one of the reasons I prefer it over Divi.