Creating Custom Conditional Modifiers In GoHMI

Question

How to create custom conditional modifiers in GoHMI

Answer

For some widgets you might not like the appearance of the pre-set CSS Modifiers.

For example, you might not like the 'warn' CSS modifier of the button-rocker widget.

First go the to IQ styling setting and configure what you want your widget to look like when a certain CSS modifiers is activated. 
Every setting in here you can also set in a custom CSS modifier.

In this example I adjust the Widget Input Background Color to red

This is what the widget will look like with Input Background Color set to red (255,0,0)

Now navigate to the Code Manager and click "Create Entry".

Fill in the "Name", select the Widget in the Template dropdown and fill in the description. Then click "Apply".

Now click "Edit selected entry"

You will notice that a lot of default code is already present. This code doesn't do anything. This code is basically for the end user to easily see all the classes of the widget that can be used. 

The class refence code lines are built up like this:

Control Name: .iq-button-rocker  

Stylesheets Name:  .Rocker-box-input-field-Red

Part of Class Name:  .iq-variant-01.iq-icon-variant-01

Widget IQ styling selector:  .iq-input

You can remove all the code that isn't relevant.
In this example only in the Input field is relevant so all other code could be removed.
Between the "{ }" signs code can be added to adjust appearances. 
In this case the background color is set to red.

The "!important" declaration is used to give a style rule higher precedence, ensuring that it overrides other conflicting styles

Tip: If you don't know the exact color code you can click the square before rgb. Then a color selecter screen will appear as shown below.