NO BUG: Theme Styles not being applied

I have just started creating a new website and have setup theme styling for primary buttons and spacing for sections etc, all was completely fine and all of a sudden i made a change, saved it and the button and spacing is being ignored on the front end but showing correctly in the builder.

Have flushed all cache, regen css, disabled all plugins etc and still won’t add the theme styling but if i add the padding to the element directly it then it shows correctly. Changed the Theme styles: Loading method but no change either.

Loom | Free Screen & Video Recording Software | Loom - Builder where you can see the colour of the button and the padding is applied.

Loom | Free Screen & Video Recording Software | Loom - Theme styling where you can see the button is coloured

Loom | Free Screen & Video Recording Software | Loom - Front end where the button and padding is being ignored

Deleted all styling and re added the variables and is working again but very strange.

Hi James,
Thanks so much for your report!

There are two possible causes for this problem:

  1. The theme style doesn’t have a condition, so it doesn’t know where it should be applied in the front end.
  2. Invalid CSS, which prevents the browser from correctly applying subsequent styles.

In your case, I suspect the second cause, but I can’t verify it. Please let me know if the problem occurs again, and describe how to reproduce it :v:

I am having the same issue described by jdp for a new website build. Some of the theme styles are being ignored, in my case section top and bottom padding and container width and content alignment. Initially all styles were applied in the builder but not on the front-end, as reported by jdp.

So I tried to regenerate the variables and then eliminate and redo my theme settings. Not sure if this redo was the trigger but now all the settings are ignored even within the builder.

If I apply the same settings directly to an element, they are correctly applied.

I am unable to give you the steps to reproduce the issue because the behavior of the builder has changed on the run.

Here are the links to:

the theme style json as exported from the theme style settings : https://drive.google.com/file/d/1h543Xvekq15q0y9cJ-1IEGjS-hL8nLKN/view?usp=sharing

the generated .css file as downloaded from the front-end: https://drive.google.com/file/d/1hRkLboQNh2dDKvTXV_bB0w7qC7lmsgVX/view?usp=sharing

Bricks settings: https://drive.google.com/file/d/1kDnzf5_pi3LkpsPkG1ps2ViFrgWXZVOh/view?usp=sharing

Any more details you need, let me know. Thanks for looking into it.

Hi Stefania,
Your complementary variable is not closed correctly (the closing bracket is missing), which will likely cause the subsequent styles to be ignored:

Hi Stefan, thanks for spotting this!

Although this means that bricks may be producing incorrect json code?. I did not edit anything manually, what you got was just a file exported from the theme styles panel. To me this is indeed a bug. I can of course correct the json and reimport it (I hope it solves the issue), but then this would just be a workaround.

Hello @nuwebstudio ,

Although you exported the settings from the Theme Styles panel, could you please confirm that the variable’s closing parenthesis is present in the builder?

I tried to reproduce the issue on my end. When I select a global variable for the secondary color, the closing parenthesis is included correctly, and the theme works as expected.

Regards,

Hello Abd, I just checked the color palette variables and indeed the variable mentioned by Stefan was not closed correctly. I have now corrected the variable name without reimporting the json and will test it right away.

I tested it and confirm it works ! So I was wasting time with theme styles while I should have checked my variable names.

Thanks for your help!

1 Like