Simian GUI Documentation v3.1.0

Use custom CSS classes

Each of the component objects has a customClass property that can be leveraged to alter the appearance of the components by using CSS classes. Use spaces to separate classes. For example, by using the following code, you can make the font of the label of a TextField component smaller and italic:

occupationTextField.addCustomClass("small", "font-italic")

% Alternatively:
occupationTextField.customClass = "small font-italic";

The textfields with and without custom classes are shown below.

You can use custom styles as well, using your own *.css files. This can be done by adding your stylesheet files to a css folder in the same (package) folder your gui_init and gui_event functions are in.

Consider the following .css file in the css folder:

.bigButton {
    color: black;
    font-size: 28pt;
    height: 80px;
    width: 200px;
    text-align: left;
}

Add the class to your button:

finishButton.customClass = "bigButton";

A comparison between buttons with and without custom classes:

A special css class that can be used is the "form-check-inline" class. When this class is added to all components in a grouping component (like a Container or Panel), the components are laid out horizontally instead of vertically. You can also add it to the individual components you wish to lay out horizontally. In the Example, two CheckBoxes in a Container have this css class: