Overwrite CSS variable from manager in CSS stylesheet

Hello

I have a similar problem as described in the following thread:
https://forum.bricksbuilder.io/t/add-css-variable-without-a-value-to-be-able-to-define-them-outiside-of-the-manager/23377

I have defined various CSS variables in the new variable manager. For some variables I want to define or overwrite the value in a CSS stylesheet, because I use Sass functions to calculate the values. Nevertheless, I would like to define the variables in the manager so that they are available in the variable picker.

If I enqueue the stylesheet with a priority of 99, the values in the frontend are overwritten as desired.

add_action( 'wp_enqueue_scripts', function() {
	if ( ! bricks_is_builder_main() ) {
		wp_enqueue_style( 'ezz_stylesheet_frontend', 'path/to/stylesheet.css', [ 'bricks-frontend' ] );
	}
}, 99 );

In the builder, however, the values of the manager still apply. This is probably due to the fact that, for example, in the tag div.brx-body.iframe.mounted the values are defined again with the style #bricks-inline-css-globalvars, which of course overwrites my defined values in the stylesheet.

In the stylesheet I overwrite the values with:

:root {
	--property-name: some new value;
}

Is there either a way that I can overwrite the variables of the manager so that they also apply in the builder or is there a way that I can add variables manually in the variable picker, e.g. via a hook, so that I don’t have to define them via the manager?

Thank you very much

1 Like

I have solved the problem in the meantime by using html:root instead of just :root. This increases the specificity of my rules and overwrites the values of the variable manager in both the frontend and backend as desired.