Custom Class CSS for colorWdiget

Community Usage questions
1

I've created a class for a subset of button widgets in my template for which I want to set a standard for colorWidet

I've I set the colour in the inspector for colorWidget the button looks how I want it to but I want to add this to my Theme.

I've done the following, the label bit now works but I can't get the boarder or infill to work:

.wizardGreenInstBtn label {
   	color: #2dcf7a;
word-wrap: break-word;
justify-content: flex-end;
font-size: 150%;
padding-left : 050px
}

.wizardGreenInstBtn.button-container {

border-radius:3px;
colorWidget: #8cff8c;
	
}

I want to do this as a class and I don't want to globally affect the rest of the buttons, just one set. When this is in place I can then create a number of classes of button.

Sorry, my CSS etc is very limited so I'm struggling with this.

2

Hi, i did somethin similar, i took the default nord theme and added in the css file a class

.myClassView1 {
border-top-left-radius: 7rem;
....
}

in the css property i did something like this (of the button):

JS{{
return "class: myClass@{views};"
}}

With the button "views" you can change the css by the gui

you find the theme css in "app/assets/themes/nord.css" (i made a copy of it and loaded it in the server window)

Hope this helps.

3

@Sub3OneDay what you're looking for is css variable behind the colorWidget property, they are listed in the css property's documentation In this case:

--color-widget: red;
4

Brilliant, that's great thanks.
Solution:

.wizardGreenInstBtn.button-container {

border-radius:3px;
--color-widget: #8cff8c;
	}
5

@abstrus Thanks, something like this is the long term plan!