Custom Class CSS

Community Usage questions
1

In an effort to reduce my session file I want to rationalise my css using custom classes but I am struggling to work this out.

I assume that I have to use my theme and then call on the classes but I can’t get this to work.

For example, if I have a standard style for my button widget I would like to put this into my theme but is this correct?

In the Theme:

.wizardGreenBtn {

    white-space: normal;
    word-break: break-word;
    color: #2dcf7a;
}

Then in the css box of the button widget:

:host {
class: wizardGreenBtn 
}

Or have I missed the point on this completely?

Sorry, I have tried to work this out myself but I can’t find anything on the forums and css is not my strongpoint!

2

You got it just well, doing what you describe does works but you may not be targetting the right element in your theme, “.wizardGreenBtn label” might be it. Note that if you want to style every button widget at once, you can skip the extra class part and write

.button-container label {
  /* etct */
}

Or to style every button in a specific container, give that container an extra css class and write

.myCssClass .button-container label {
  /* etct */
}
3

Thanks, I want to create a set of buttons that follow the theme and followed your advice here to create a name that is unique.

So from what you have said I need to amend my Theme css file to add the word “label”? So:

.wizardGreenBtn.label

is that right??
Eventually I want to create a set

.wizardGreenBtn
.wizardGreenBtnWithLogo
.wizardGreenFrame

Etc.

As you say, I have worked out how to do it with everything in specific containers but was hoping to be able to set it up properly in the Theme so I only then when I’ve set up the session file correctly I only need to change a few properties and affect the whole session file.

4

No, .wizardGreenBtn label with a space between the two selectors -> Descendant combinator - CSS: Cascading Style Sheets | MDN
See also:

5

Thanks.

Really useful resources too.