Custom stylesheet in preview

  • Resolved jdjict

    (@jdjict)


    2 years, 5 months ago

    Hi, I would like to add a custom compiled stylesheet to the flexible content -> dynamic preview view.

    Atm I have a app.min.css file in theme-folder/build/css/
    I would like to add bootstrap etc to the dynamic preview view, but for some reason it overwrites WordPress CSS. This is the code I use for adding the stylesheet to my editor field and this code is placed in functions.php. The field with key=5c24d27d147f2 is the flexible content field. 

    add_action('acfe/flexible/enqueue/key=field_5c24d27d147f2', 'my_acf_flexible_enqueue', 10, 2);
function my_acf_flexible_enqueue($field, $is_preview)
{
    wp_enqueue_style('my-style', get_stylesheet_directory_uri() .  '/build/css/app.min.css');
}

    Could you tell me how to implement the bootstrap and some global css once and so it will only be used for the dynamic preview and not for anything else in the wordpress admin view?

Viewing 1 replies (of 1 total)
  • Plugin Author Konrad Chmielewski

    (@hwk-fr)

    2 years, 5 months ago

    Hello,

    Thanks for the feedback!

    Due to the nature of CSS, it is normal that it overwrite admin css style if you enqueue global css rules such as bootstrap.

    If you want to apply CSS rules only in the Flexible Content Preview in the admin, you’ll have to create a new stylesheet file only for the admin preview, and enqueue it conditionally using the $is_preview argument.

    Example:

    add_action('acfe/flexible/enqueue/key=field_5c24d27d147f2', 'my_acf_flexible_enqueue', 10, 2);
function my_acf_flexible_enqueue($field, $is_preview){
    
    if($is_preview){
        wp_enqueue_style('my-preview-style', get_stylesheet_directory_uri() .  '/build/css/app-preview.min.css');
    }
    
}

    This specific app-preview.css stylesheet should have all CSS rules prefixed in order to target only the Flexible Content Dynamic Preview layouts.

    Which should be something like:

    .acfe-fc-preview -.preview .my-rule{...}

    You can inspect the admin view to check how HTML/CSS looks like. Note that there are different ways to prefix all css rules:

    You’ll also find tools allowing you write scss/sass and compile it online, such as SassMeister.

    It’s the same logic as when enqueuing front-end style in the classic TinyMCE editor.

    Hope it helps!

    Have a nice day!

    Regards.

Viewing 1 replies (of 1 total)

The topic ‘Custom stylesheet in preview’ is closed to new replies.