How to enqueue a custom .css file for bricks builder view

How To
1

Hey,

is there a way to enqueue a stylesheet so they get applyed directly to the view within the bricks builder.
here:

image
image2545×1004 84.8 KB

Im using some custom bricks elements to get custom acf meta data for variable products with modified acf code for these variable products - not sure if thats the issue here, cuz the classes and elements / html structure is correctly present in the bricks iframe view

i tryed everything i can imagine but nothing seems to work.

regards

2

I’m not sure it will help, but this code enqueue a CSS stylesheet in the “Bricks building page” (BUT ALSO in the frontend of all your website). I still try to enqueue ONLY on the “Bricks building page”, but didn’t find a solution yet.

You must replace “jy-color.css” by the filename of your CSS.

/===========================
ENQUEUE A CSS STYLESHEET ON WEBSITE FRONTEND + BRICKS BUILDING PAGES
===========================/

/* Enqueue CSS in the frontend of the website AND on the Brick building page. */
add_action(‘wp_enqueue_scripts’, ‘jy_enqueue_css_jy_color’);

/=========================/
function jy_enqueue_css_jy_color() {
$url = get_home_url() . ‘/wp-content/uploads/css/jy-color.css’;
$name = ‘jy-color’;
wp_register_style($name, $url, ‘’, ‘1.0’, ‘all’);
wp_enqueue_style($name);
}

/=========================/

3

The solution is available on this page:

The code below will enqueue a CSS stylesheet inside the [Bricks Editor User Canvas], BUT won’t affect the [Brick Editor Panel].

/*===========================
add_action(‘wp_enqueue_scripts’, ‘jy_enqueue_css_test’);

function jy_enqueue_css_test() {
if ( bricks_is_builder() && ! bricks_is_builder_main() ) {
$url = get_home_url() . ‘/wp-content/uploads/css/jy-test.css’;
$name = ‘jy-test’;
wp_register_style($name, $url, ‘’, ‘1.0’, ‘all’);
wp_enqueue_style($name);
}
}
===========================*/

If you want to also enqueue the CSS on other part - typically the website [Frontend], or [Bricks Editor Panel] - here are the codes. This page

/---------------------------
Show on [Bricks Editor Panel] + [Bricks Editor User Canvas], but not on [Frontend].
---------------------------/
if ( bricks_is_builder() ) {
}

/---------------------------
Show only on [Bricks Editor Panel].
---------------------------/
if ( bricks_is_builder_main() ) {
}

/---------------------------
Show only on [Bricks Editor User Canevas].
---------------------------/
if ( bricks_is_builder() && ! bricks_is_builder_main() ) {
}

/---------------------------
Show on [Frontend] and [Bricks Editor User Canvas], but not on [Bricks Editor Panel].
---------------------------/
if ( ! bricks_is_builder_main() ) {
}

/---------------------------
Show only on [Frontend].
---------------------------/
if ( bricks_is_frontend() ) {
}

1 Like
4

thanks alot - would be great if the teams adds this to their docs as this is super usefull if u want to add css with custom templates like i am doing

cheers man u saved my day

ps: just for general info to others - u have to use wp_enqueue_scripts not admin_enqueue_scripts !

2 Likes