How to override custom CSS base style to use same core style?

Ignition
1

Hi,

Im trying to define a custom CSS style that "shapes" a button. Then I want to use this base definition and add or override a couple of styles like color or text color. Im sure this can be done but i cannot get it working. Example:

.psc-generalbutton {
    border-radius: 30px !important;
    min-width: 120px !important;
    width: auto;
    max-width: 140px !important;
    height: 30px;
    padding: 0 !important;
    font-size: 0.9rem;
    font-weight: 400;
    overflow: hidden !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

Then I want to use this definition to create the green button final style. Something like this:

.psc-greenbutton .psc-generalbutton {
    border: none !important;
    background-color: #1AFF80;
    color: black;
}

If i connect the class "generalbutton" in the screen editor it works. But it does not work for "greenbutton" class:

image

2

You cannot "extend" CSS classes like that. Put both classes on the target component.

1 Like
3

How?

4

Write both classes, or tick both classes in the menu...

1 Like
5

Cascading style sheets. Despite being called classes, it's not OOP. I don't really understand why the decision was made to do things the way they were so many years ago, but it's what the world is stuck with.

1 Like
6

remove this space. assigned 2 classes on the same element should not have a space in between.

  • descendant selector (space)
7

I think what he wanted was not to target elements that have both classes, but to make greenbutton inherit from generalbutton.

8

Ah there isnt realy inheritance, but you could just use ',' next to the general. every new class wil have to be added here too tho.
Make sure they are on top of the list. As the one on top wil be overridden by the lower one (if they have the same selector)
image

image

9

That worked, thanks!!

1 Like