Custom CSS class properties not reflecting

Bugs
1

Bricks Version: 1.4
Browser: Firefox
OS: Windows

Ok I have a header container with id = brxe-mhoxxg. The ID does not have any background color, it is transparent by default.

Now, I create a new class on it called ‘header_active’ which should change its background color. But I do not want to apply this class right when the page is loaded, so I ‘Remove’ the class ‘header_active’ from the element which makes it still available for use later.
And since I only want it to trigger and apply the class on the element when the window is scrolled, hence I am using the ‘scroll’ eventListener to ‘classList.add’.

What I find in the preview is that the class is properly added on the element on scrolling the page, but the background color attached to this class is not reflecting. The class properties do not even show in the CSS rules list. What to do in such cases? Am I using classes in the wrong way?

All this is done in the Header template. But the preview is checked on the home page.

Thanks for the patience.

issue 2
issue 21128×618 170 KB

2

Are you wanting to add the background color to the header bar? I checked your code. You are trying to add it to your menu bar. Where are you wrote the CSS for header_active?

3

I am not ‘custom’ writing the CSS. I only set the background color on the class through Bricks editor settings.

4

@timmse could you please take a look? Is it not possible in Bricks to add a global class, give it some properties and to apply it via JS eventlisteners on an element?

5

Hi,

How do you remove the class in the builder once the background is set?

You need to use the little cross icon on the left, NOT the trash icon on the right, which totally destroys the class and removes it from Bricks.

6

Thank you for your reply. Yes, I am pretty sure I only ‘REMOVED’ the class instead of deleting it. It can be seen here. And when I select it in builder, it properly applies the background color. The question is, that bricks has the CSS properties associated with the class saved somewhere. But it’s not applying on the front end. I tried it with other elements further down the page too, same result. class gets applied on EventListener but the properties do not.

Untitled

7

This is my code:

<script>
let your_element= document.getElementById('enter your element id');
document.addEventListener( 'scroll' , () => {
your_element.classList.add('my_custom_class');
})
</script>

The class properties are registered correctly in Bricks. Here is a proof of it when reloading the page with the class already applied:

Untitled
Untitled1092×600 158 KB

8

Sorry, I had to ask :wink:

A quick fix for now would be to define the class in your header template custom CSS:

.header_active {
  background-color: #blabla;
}

I’ll run some tests to check what’s happening.

1 Like
9

Yes that is an option, but inconvenient when you already have a class system in place. I just wanted to bring it to the Bricks team’s attention coz I love this builder and want to really see it grow and squash all the bugs. :slight_smile:

10

(I understand, I feel the same, hence the “quick fix” label!)

After second thought, the issue is known, but I can’t find the corresponding thread anymore.

Bricks actually uses a combination of element-class/custom-class to set element style, which is wrong, I agree, but that must be for some (unknown to me) purpose.

For instance, I create a class on header element and set background color. See frontend style:

image

And it seems the .test-class is not generated on its own anywhere in Bricks stylesheets, so it won’t be applied if you manually set it on any element.

@timmse Any update on this?

1 Like
11

I think that it should not work this way. You will create a custom CSS in CSS file or Bricks settings. Then you will add the class via JS and hope that it would work.

12

I am guessing that if the global classes are not applied by default, their properties are NOT getting added to the actual stylesheet, since the browser is not picking them up.

13

Yes, I think the rule is dynamically added when applied to builder element, but since you removed the class from the element, it is not generated anymore.

This design choice for class styling is all the more strange that it creates a lot of duplicated rules: If you use the same class on different elements, same rules are generated for each element selector!

.test-class.brxe-heading {
  background-color: var(--bricks-color-csrkiu);
}
.test-class.brxe-text {
  background-color: var(--bricks-color-csrkiu);
}
1 Like
14

Global classes in Bricks are added to the individual element itself (as Yan illustrated in his last reply).

I agree that this isn’t ideal as the CSS rules defined on the class itself are only available in combination with the element. And it’s something we have to address in a future update. To manage expectations: It’s not a small feat, and not something we can tackle right away.

The reason the classes are applied this way is because Bricks doesn’t have a per-element CSS selector for individual element settings (at the moment). Those selectors are defined via PHP. In order to make global classes apply their styles to the same selectors, they are bound/linked to the element. Otherwise element ID styles & global class definitions would lead to mixed results on an element.

@khan360 Unfortunately, as of right now, all I can advise to is adding the global class definitions (of classes you programmatically add via JavaScript) via the “Custom Code” in the global Bricks settings.

4 Likes
15

Thank you for taking out the time and replying, Thomas. :slight_smile:

1 Like