Title: Dynamic render: dequeue load-style & acfe-admin.min.css
Last modified: November 9, 2023

---

# Dynamic render: dequeue load-style & acfe-admin.min.css

 *  Resolved [Sababaa](https://wordpress.org/support/users/sababaa/)
 * (@sababaa)
 * [2 years, 7 months ago](https://wordpress.org/support/topic/dynamic-render-dequeue-load-style/)
 * Hi,
 * It is possible to dequeue style admin (wp-admin/load-styles.php) and acfe-admin.
   min.css only for the dynamic render of a layout?
 * How i load flexible layout css:
 * `add_action('acfe/flexible/render/after_template/layout=cards', 'my_acf_flexible_enqueue',
   10, 2);
   function my_acf_flexible_enqueue($field, $is_preview){wp_enqueue_style('
   my-style', get_stylesheet_directory_uri() . '/style.css');}
 * Because the load-styles & acfe-admin.min.css override my css.
   Example: my layout
   use <h2> and a class “card”, so the two admin css override my enqueue css.Regards.
    -  This topic was modified 2 years, 7 months ago by [Sababaa](https://wordpress.org/support/users/sababaa/).

Viewing 4 replies - 1 through 4 (of 4 total)

 *  Plugin Author [Konrad Chmielewski](https://wordpress.org/support/users/hwk-fr/)
 * (@hwk-fr)
 * [2 years, 7 months ago](https://wordpress.org/support/topic/dynamic-render-dequeue-load-style/#post-17188698)
 * Hello,
 * Thanks for the feedback!
 * Unfortunately it is not possible to enqueue/dequeue stylesheets for specific 
   parts of an HTML page.
 * Stylesheets are always applied to the whole page, and since Dynamic Preview is
   rendered directly in the page, any HTML elements from your Layout PHP will inherit
   from the page stylesheets.
 * You could try dequeue WP / ACFE CSS files in the admin, but you’ll end-up with
   broken Admin UI, since these files contain CSS rules for the page.
 * For example, any element with the class `.card` will inherit css properties from`/
   wp-admin/css/forms.css`:
 *     ```wp-block-code
       .card {
       position: relative;
       margin-top: 20px;
       padding: 0.7em 2em 1em;
       min-width: 255px;
       max-width: 520px;
       border: 1px solid #c3c4c7;
       box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
       background: #fff;
       box-sizing: border-box;
       }
       ```
   
 * To avoid that issue you could add some CSS reset rules for your layouts. But 
   that would require to chase each potential CSS rules added by WP.
 * The other solution would be to make sure that you prefix all your elements class
   with a unique namespace, for example `.sababaa-card`.
 * For the `<h2>` element, unfortunately WordPress add some strong rule, using an
   id in `/wp-admin/css/edit.css`:
 *     ```wp-block-code
       #poststuff h3.hndle, #poststuff .stuffbox > h3, #poststuff h2 {
           font-size: 14px;
           padding: 8px 12px;
           margin: 0;
           line-height: 1.4;
       }
       ```
   
 * So you’ll have to either reset it using an `!important` declaration, or use your
   own id, or the id defined by ACF in the metabox: `<div id="acf-group_63ca7cb29e9d0"
   class="postbox acf-postbox">` to overwrite the rule. Example:
 *     ```wp-block-code
       -.preview h2{
           font-size: 18px !important;
           // reset h2 in preview
       }
   
       // or:
   
       #acf-group_63ca7cb29e9d0 -.preview h2{
           font-size: 18px;
           // reset h2 in preview
       }
       ```
   
 * Hope it helps!
 * Have a nice day!
 * Regards.
 *  Thread Starter [Sababaa](https://wordpress.org/support/users/sababaa/)
 * (@sababaa)
 * [2 years, 7 months ago](https://wordpress.org/support/topic/dynamic-render-dequeue-load-style/#post-17188964)
 * Hello,
 * Thank you for your time!
 * You confirm my fears, I thought the CSS preview was “outside” the admin CSS. 
   I will not check every class for every preview block i will create.
 * I will find others solutions, it’s ok!
 * Regards
 *  Plugin Author [Konrad Chmielewski](https://wordpress.org/support/users/hwk-fr/)
 * (@hwk-fr)
 * [2 years, 7 months ago](https://wordpress.org/support/topic/dynamic-render-dequeue-load-style/#post-17191022)
 * Hello,
 * An another possible workaround: you could render an `<iframe>` with the `srcdoc`
   attribute ([see documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#srcdoc))
   to pass your layout content of your `layout.php` file, when in preview mode.
 * The iframe will isolate the HTML render from the rest of the admin page, and 
   fix any inherited CSS rules from the admin page. Just make sure to correctly 
   generate the layouts/flexible content css files & script with `<link rel="stylesheet"
   >` and `<script src="">` within the iframe content too.
 * You could achieve that automatically using the `acfe/flexible/render/before_template`
   and `acfe/flexible/render/after_template` ([see documentation](https://www.acf-extended.com/features/fields/flexible-content/dynamic-render#hook-before-layout-render)).
 * Kinda hacky, but it works. [Here is a video demo](https://www.acf-extended.com/share/PFmIb)
   of the proof of concept.
 * Code used:
 *     ```wp-block-code
       add_action('acfe/flexible/render/before_template/name=flexible_content', 'my_fc_before_template', 10, 3);
       function my_fc_before_template($field, $layout, $is_preview){
   
           // only in preview mode
           if($is_preview){
               ob_start();
           }
   
       }
   
       add_action('acfe/flexible/render/after_template/name=flexible_content', 'my_fc_after_template', 10, 3);
       function my_fc_after_template($field, $layout, $is_preview){
   
           // only in preview mode
           if($is_preview){
   
               // vars
               $enqueue = '';
               $html = ob_get_clean(); // retrive the html buffer started in 'before_template'
   
               // get style path from layout settings
               $style_file = acf_maybe_get($layout, 'acfe_flexible_render_style');
   
               if(!empty($style_file)){
   
                   $style_file = acfe_locate_file_url($style_file);
                   $enqueue .= '<link rel="stylesheet" href="' . $style_file . '" />';
   
               }
   
               // get script path from layout settings
               $script_file = acf_maybe_get($layout, 'acfe_flexible_render_script');
               if(!empty($script_file)){
   
                   $script_file = acfe_locate_file_url($script_file);
                   $enqueue .= '<script src="' . $script_file . '"></script>';
   
               }
   
               // generate iframe html
               $iframe_html = htmlentities($enqueue . $html);
   
               ?><iframe srcdoc="<?php echo $iframe_html; ?>"onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';" style="width: 100%; border: 0; margin: 0; padding: 0;"></iframe><?php
   
           }
   
       }
       ```
   
 * Have a nice day!
 * Regards.
 *  Thread Starter [Sababaa](https://wordpress.org/support/users/sababaa/)
 * (@sababaa)
 * [2 years, 7 months ago](https://wordpress.org/support/topic/dynamic-render-dequeue-load-style/#post-17191237)
 * Hello,
 * Amazing hack that isolate the css, i will test it.
 * I heard about shadow DOM too to isolate like iframe maybe it’s will give you 
   ideas.
 * Regards.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Dynamic render: dequeue load-style & acfe-admin.min.css’ is closed to
new replies.

 * ![](https://ps.w.org/acf-extended/assets/icon-256x256.png?rev=2071550)
 * [Advanced Custom Fields: Extended](https://wordpress.org/plugins/acf-extended/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/acf-extended/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/acf-extended/)
 * [Active Topics](https://wordpress.org/support/plugin/acf-extended/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/acf-extended/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/acf-extended/reviews/)

 * 4 replies
 * 2 participants
 * Last reply from: [Sababaa](https://wordpress.org/support/users/sababaa/)
 * Last activity: [2 years, 7 months ago](https://wordpress.org/support/topic/dynamic-render-dequeue-load-style/#post-17191237)
 * Status: resolved