DUPLICATE: CSS class styles are not working

Bugs
1

Bricks Version : 1.9.6.1

CSS classes are not working. As you can see in the attached file, I have given a class to the heading element on which a font size has been applied. And this is also showing in the Brick builder, but after updating, when we are looking at the frontend, the styling is not showing there, although the class is attached to the heading.

Group 2853
Group 28531910×798 128 KB

Group 2852
Group 28521920×968 140 KB

Here is the link to the page: ‘https://slicitt.hassaanshah.com/property/dubai-hills-dubai-uae-hills-grove/’

And if I make changes to the old classes, they are working perfectly fine. But when I add a new class, the styling is not showing on it.

I have also rechecked the custom CSS to ensure there are no issues with colons or anything else, but there is no such issue in the custom CSS.

2 Likes
2

Did you use the Auto-Bem feature from automatic.css before this happened?
Does styling on ID level still work?

Your Problem could be connected to mine: WIP: Styling on Class does not work anymore - #6 by timmse

and maybe to this one: SOLVED: Some of classes' styling not loading on front-end - #5 by lustadesign

3

Yes, CSS styling is being applied directly to the ID level.

This issue popped up yesterday morning when I updated to Bricks Theme version 1.9.6.1.
Yes, I’ve been using ACSS BEM for a while now, and I’ve been working on this website for nearly a month. No issues with ACSS. I’ve deactivated it and tried static values, but the styling still isn’t working.

@timmse could you take a look and confirm + solve this?

Thank you
Philipp

1 Like
4

Okay so here is what I know so far:

It is not clear yet, if it is connected to ACSS Auto BEM.
I had a chat with Christoph from ACSS and he investigated: There is a slight chance, that when using the Auto BEM function and saving the page within 100ms, that an empty array gets added to the global classes. When this happens styling on Class level does not work anymore - in this case it doesnt matter if automatic.css is activated or deactivated.

But I am not sure if that was the reason for the empty array at my global classes or for your problem.

If thats what happened at your site:
Jenn from Bricks fixed it for me - here is how:

It’s just a one-line fix, please note that it might vary in the official release.

  1. Edit the includes/helpers.php
  2. Search for save_global_classes_in_db (roughly on line 1628)
  3. Add $global_classes = array_values( array_filter( $global_classes ) ); before $global_classes = array_values( array_filter( $global_classes ) );

The final method should look like this:

imagefix
imagefix1966×930 141 KB

After adding this line of code, please edit your template, you must tweak some styles like add underline or bold text to trigger a resave of the global class, then save the builder.

Now all your styles on class should work in frontend.

Now everything works for me, but I am a bit scared to use the Auto BEM feature, cause I am not sure if this caused it or not.

Hope that helps you as well!

2 Likes
5

The code is working. Can you confirm if this is a permanent fix.?

Thanks a lot, Philipp.

1 Like
6

I am not sure if this is a permant fix. If I understod Bricks Support correctly, they are implementing this in the new update. If I understood Automatic.css Support they are also implementing this in their next update.

Maybe @timmse can confirm this.

1 Like
7

Hi guys,

This is exactly the problem. We will include the fix mentioned in the next version.

I’m closing this report because it’s a duplicate :v:

3 Likes