Custom CSS for buttons not visible for users

Product Support

AI-generated summary

Custom CSS for Buttons Not Visible to Users

A user, SchweizerSchoggi, encountered an issue where their custom CSS styles for buttons were only visible to them, not to other users. They defined colors in the custom CSS using variables like $colorWhite and applied them to classes. However, the styles only worked on their machine.

After investigation, SchweizerSchoggi discovered that the issue was due to writing the custom CSS in LESS style, with nested styles, which are not supported. Although it worked on their machine, it did not work for other users, and no error was thrown.

1

Hi,
I am using the Custom CSS option for our theme, but it looks as only I can see the overwritten button styles. e.g. in my custom CSS the buttons are orange and white, all users except myself do see them in green and light grey (these colors are defined in the color palette).

Do I have simply have to add “!important” to my button classes or how can I achieve that every user sees the styles from the custom CSS?

Thanks in advance for any hint!

EDIT:
I should have mentioned that I am defining the colors on top of the Custom CSS like

$colorWhite: #ffffff;
$colorBlack: #000000;
$colorRed: #ff0000;

and in the classes I am using it like

p {
font-size: 1.6rem;
color: $colorBlack;
}

As I said, it’s working but only on my side, not for the other users.

2

oh, I’ve found the reason.

I wrote the Custom CSS LESS-style, like

body {
    p {
        font-size: 1.6rem;
    }
}

And it did work on my machine. That’s just crazy! It did work on my machine but not on any other. I would have expected an error if nested styles are not supported or at least it should not work as if everything is ok. :roll_eyes: