Contact Us
Please reference this article first for how to use CSS styling in Modules and some basic examples: CSS Styling In Control Module UI's.
In this article, we will go over a collection of examples that may be useful when changing Page or Element styling using CSS. All of the given examples reference using a CSS file for the given code.
Info
This is an evolving article, will be added to as more common examples are found.
Making the Page Background Transparent
Sometimes you will want to have the background of a Page be transparent, maybe to allow invisible buttons on an output allowing the suer to select options, for example. In this case, you will want to modify the classes used for the page, such as this:
body, html, .UbPage{
background-color: transparent !important;
}body, html, and .UbPage all control the background-color. Referencing these classes and elements to change is needed as well as adding the “!important” tag to ensure this value is used above all others.
Button Changes Color When Active or Inactive
If you want a button that changes color upon a status change, you can use the &::after tag to specify what happens when the button is finished changing state. You can then also use the .active class to specify what happens when the button is toggled on vs off:
button{
background-color: red;
&::after{
content: " disconnected";
}
}
.active{
background-color: green;
&::after{
content: " connected";
}
}
PIXERA 2.0.223 | 16. December 2024 | CL