Question posted in
The full documentation can be found here.

Divi theme – WordPress – how to override Divi's custom post type stylesheet

When enqueueing a WordPress child theme stylesheet the correct way the new styles override the parent’s styles.

However, since Divi introduced Builder support for custom post types, a new stylesheet style-cpt.css has been added.

All the styles in this stylesheet (a lot of which unfortunately have !important after them) are declared after enqueued child styles, so will override any matching ones.

Is there any way of overriding such “custom” stylesheets?

Tags:

5

Answers


  1. Chosen as BEST ANSWER
    0

    After some experimentation, I found that the following code in functions.php works... (please note, this will enqueue both the standard theme stylesheet as well as Divi's custom post child theme). You can include all the styles you want to override in your own style-cpt.css file in your child theme folder.

    function my_theme_enqueue_styles() {

    $parent_style = 'divi-style';
    $template_directory = get_template_directory_uri();
    $stylesheet_directory = get_stylesheet_directory_uri();

    wp_enqueue_style( $parent_style, $template_directory . '/style.css' );
    wp_enqueue_style( 'child-style',
        $stylesheet_directory . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );

    $parent_style = 'divi-cpt-style'; 

    wp_enqueue_style( $parent_style, $template_directory . '/style-cpt.css' );
    wp_enqueue_style( 'child-cpt-style',
        $stylesheet_directory . '/style-cpt.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

  2. 0

    I am using this and is working fine:

    function disable_cptdivi(){
remove_action( 'wp_enqueue_scripts', 'et_divi_replace_stylesheet', 99999998 ); } add_action('init', 'disable_cptdivi');
    Login or Signup to reply.
  3. 0

    The "remove_action(…);" solution no longer works as of Divi version 4.10.6 (Sept ’21) as the "et_divi_replace_stylesheet" action was removed.

    What I did to solve it was to overwrite line #776 (as of version 4.14.6) from Divi/includes/builder/core.php, so that the function et_builder_should_wrap_styles() always returns false:

    function et_builder_should_wrap_styles() {
    static $should_wrap = null;

    if ( null === $should_wrap ) {
        $post_id = get_the_ID();

        // Warp on custom post type archives and on non-native custom post types when the builder is used.
        $should_wrap = et_builder_is_custom_post_type_archive() || ( et_builder_post_is_of_custom_post_type( $post_id ) && et_pb_is_pagebuilder_used( $post_id ) );
    }

    // return $should_wrap; /*** ORIGINAL CODE ***/
    return false;           /*** NEW CODE ***/
}

    Then to make sure I don’t lose this edit when Divi updates, I set up an action to automatically rewrite this line every time a Divi update occurs:

    add_action('upgrader_process_complete', 'edit_files_on_update'), 10, 2);

function edit_files_on_update($upgrader_object, $hook_extra) {
    if ($hook_extra['action'] !== 'update') return false;

    if ($hook_extra['type'] === 'theme' && isset($hook_extra['themes'])) {

        // Divi - disable CPT CSS wrapper
        if (array_search('Divi', $hook_extra['themes']) !== false) {
            $file_location = get_template_directory().'/includes/builder/core.php';
            $file_contents = file_get_contents($file_location);
            $file_contents = str_replace('return $should_wrap;', 'return false;', $file_contents);
            file_put_contents($file_location, $file_contents);
        }

    }
}

    I know it’s technically incorrect to edit a theme’s original file, BUT the "correct" alternative is to overwrite the entire Divi/includes/builder/core.php file in my child theme, which is 7253 lines long! Chances are high that future Divi updates would edit that original file, leaving me without those edits reflected in the child theme version.

    Login or Signup to reply.
  4. 0

    very late to the party but I managed to block the CPT styles from divi by prepending the #page-container selector to my Custom CSS in Theme Options, e.g.:

    .header --> #page-container .header
#nav_toggle --> #page-container #nav_toggle

    Will override the #et-boc selector

    Tested with Divi 6.1.1

    Login or Signup to reply.
  5. 0

    I had a similar issue, but the inline generated css stil include the wrappers, so i hade to upgrade @Weekend32 answer:

    i remove every cpt related wrappers in the générated inline css, by updating line 6701 in Divi/includes/builder/core.php

    function et_builder_maybe_wrap_css_selector( $selector, $suffix = '', $clone = true, $inside_selectors = '' ) {
    static $should_wrap_selectors = array();

    $post_id = ET_Builder_Element::get_theme_builder_layout_id();

    if ( ! isset( $should_wrap_selectors[ $post_id ] ) ) {
        $is_builder_used                   = et_pb_is_pagebuilder_used( $post_id ) || has_block( 'divi/layout', get_the_ID() );

    /*** ORIGINAL CODE ***/
        //$should_wrap_selectors[ $post_id ] = et_is_builder_plugin_active() || et_builder_is_custom_post_type_archive() || ( $is_builder_used && ( et_builder_post_is_of_custom_post_type( $post_id ) || et_theme_builder_is_layout_post_type( get_post_type( $post_id ) ) ) );
    /*** END ORIGINAL CODE ***/

    /*** NEW CODE ***/
        $should_wrap_selectors[ $post_id ] = false;
    /*** END NEW CODE ***/
    }

    /*** HERE IS A LOT MORE CODE IN THE ORIGINAL FILE ***/

    return trim( $result );
}

    So i update the ChildTheme/Function.php update script too:

    /**
 * Disable new divi cpt style wraper
 * https://stackoverflow.com/questions/53474232/wordpress-how-to-override-divis-custom-post-type-stylesheet
**/
add_action('upgrader_process_complete', 'edit_files_on_update', 10, 2);
function edit_files_on_update($upgrader_object, $hook_extra) {
    if ($hook_extra['action'] !== 'update') return false;

    if ($hook_extra['type'] === 'theme' && isset($hook_extra['themes'])) {

        // Divi - disable CPT CSS wrapper
        if (array_search('Divi', $hook_extra['themes']) !== false) {
            $file_location = get_template_directory().'/includes/builder/core.php';
            $file_contents = file_get_contents($file_location);
            $file_contents = str_replace('return $should_wrap;', 'return false;', $file_contents);
            /*** ADDED LINE ***/
            $file_contents = str_replace('$should_wrap_selectors[ $post_id ] = et_is_builder_plugin_active() || et_builder_is_custom_post_type_archive() || ( $is_builder_used && ( et_builder_post_is_of_custom_post_type( $post_id ) || et_theme_builder_is_layout_post_type( get_post_type( $post_id ) ) ) );', '$should_wrap_selectors[ $post_id ] = false;', $file_contents);
            file_put_contents($file_location, $file_contents);
        }
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search