NO BUG: Custom CSS being inserted after upgrade to 1.9.1.1

Bugs
1

Browser: Brave
OS: macOS

I have just upgraded my sandbox site to 1.9.1.1 from 1.9. Sandbox has just been created from the live site.
When looking at elements in the builder, any ID or custom class that did not have custom CSS before now has the following custom CSS displayed:

%root% {
color: firebrick;
}

Below is a screenshot from the sandbox site:

Screenshot 2023-10-15 at 13.42.28
Screenshot 2023-10-15 at 13.42.281920×1038 157 KB

You can see the inserted code in the CSS panel. I cannot delete this CSS and cannot click on it. What is also strange is that the word root is not in green which it is in preexisting CSS code. You can also see on the highlighted element in the structure panel there is no CSS icon displayed on the right hand side.

Here is the same page on the live site that has not yet been updated to 1.9.1.1:

Screenshot 2023-10-15 at 13.45.32
Screenshot 2023-10-15 at 13.45.321920×1168 169 KB

You can see that there is no CSS in the CSS panel.

On IDs/classes that had custom CSS before, this code has not been inserted. It seems that the conversion of root to %root% may have introduced this. It doesn’t seem to be causing an actual display issue as firebrick is not being used.

2

I just added a new page and inserted a single section and container and went straight to the CSS panel for both, and the inserted CSS code is there in the CSS panel. The code is being read from somewhere without it being applied to the backend and frontends.

3

I think you’ll find that is just placeholder text to give you some idea of usage.
It is not active and should be greyed out.
If you type over it it is replaced by your actual css.

So not a bug.

1 Like
4

OK, so I can click and then enter the CSS but this is really confusing. I raised it as a bug as it looked like Bricks had written the code into the panel in error. I was clicking in the panel and then trying to delete the text as I didn’t need to enter any CSS, just remove what I thought was an error (until I saw it everywhere).

This ‘example’ shouldn’t be there as it looks like CSS is being injected into the CSS panel by Bricks. This example to a newbie would suggest they have to write %root% before everything which isn’t the case. There is already help text below the panel on how to use the root selector which is important but it doesn’t need anymore than that as you are just writing normal css. In Bricks settings > Custom code there is no example so again why put one here?

If the decision is made to keep this I would suggest that a) it is removed as soon as the user clicks in the CSS panel (not click and start typing) and b) something like ‘This is an example of use’ is put before it.

5

Hi Simon,
As @alanj already said, this is a placeholder text that shows you how to use the %root% syntax - nothing more, nothing less. From my point of view, this is especially helpful for “newbies” and more experienced users are not bothered by it anyway.

Apart from that, the style is completely different than when you actually write something into the field, so it should be clear enough :wink: If we receive further reports on this we will certainly think about it, but so far there is no need to change anything.