1. PROMO Upgrade to Pro Membership @ $99 / Lifetime & access all our 16+ premium Divi extensions: Divi Block, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

DIVI Style Overriding Custom Style

Discussion in 'Free Divi Community Forum' started by Marc Weiser, May 27, 2022.

  1. Marc Weiser

    Marc Weiser New Member

    I am trying to add some custom style to a form element but the DIVI styles in this file overwrite my own styles:

    style-static.min.css?ver=4.17.4

    et-db #et-boc .et-l .et_pb_module p {
    margin: 0;
    text-align: inherit;
    }

    I have cleared and disabled Dynamic CSS, Critical CSS and Static CSS File Generation but the file still overrides my style. I'm not running any caching plugins.

    Besides for adding !important or a bunch of IDs and classes to all of my styles, is there a way to overcome this issue?
     
    Ralf likes this.
    1. PRO MEMBER PERKS Divi Block Pro - Premade gradient text design for your Divi site without using any plugins:View Demo
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    The way they add the CSS Class & ID made it to have higher priority for those without !important tag.

    I guess the easiest way is to add !important tag for your custom CSS to make sure that it's not being overridden by default Divi CSS.

    You may also report your concern to official Divi support & see what they say: https://www.elegantthemes.com/members-area/help/
     
  3. Ralf

    Ralf New Member

    I asked support about it. This is what I got:
    "I'm afraid that this is how it works on our end and this could not be changed because of backward compatibility and also our styles from the modules that are applied."
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade rolling text design for your Divi site without using any plugins:View Demo
  4. Xoxa

    Xoxa New Member

    I have had trouble with Divi styles for a long time, the way I solved this issue, unorthodox as it may seem, was to place conflicting styles inside the body, after I'm done styling my site/page I just group all the styles that are giving me trouble and clear them out from my standard configurations, then I place them in a style block at the beginning of the body. Now there are several ways to accomplish this, you can use a plugin or you can add some code like this to the functions.php of your child theme:

    add_action('wp_body_open', 'my_styles', 1);
    function my_styles()
    {
    echo "<style>
    ...
    </style>";
    }

    This will load right after your <body> tag screwing all those stubborn Divi styles, but of course if you put body styles there they will load later so pay attention to that!