Every Module's UI uses HTML and Cascading Style Sheets (CSS) files to create it visual in the Web Browser. In the background, a default HTML file is used with a default set of ID's for the Page and each Element.

However, using custom CSS the user can modify the Page and Elements visually however they like. There are three ways to do so:

1. Modify an individual Element's Style in the Style tab of the Element's inspector.
2. Modify the Page Style using given dropdowns and input boxes in the “Show Style Page” tab.
3. Upload a Global Style Sheet with custom CSS code to change Pages and Elements.

Element's Style Tab

Every Element has a “Style” section in its inspector that allows you to change the style, either with given options or using a quick input box for custom CSS.

The options you have for changing using given options include:

1. Typography: How the text presents on the Element, size/color/alignment etc.
2. Borders: How the borders of the Element present, their color/size etc.
3. Background: How the background presents on the Element, its color, if there is an image.
4. Hover: Only affects Buttons on the Element, how the button's color will change when Hovered over.
5. Pressed: Only affects Buttons of the Element, how the button's color will change when Pressed.

Custom CSS

The final section is “Custom CSS” which allows you to manually input CSS properties and set their value. Most Elements do not require class input into this field to change their properties. For example, entering into the field:

background-color: rgb(255,255,255);

Will change a Slider's background color to be white, same as if you had chosen white in the Background section. You can also use premade colors as options in the Custom CSS section, such as:

background-color: white;

Buttons are one of the Elements that can have classes used in the Custom Field to denote if changed properties should be used when it is active or not active, such as being toggled on or off. This can be done by entering “.active” as the class:

.active {
	background-color: white;
}

Page's Show Style Page Tab

Every Page has a button at the top while in edit mode, in the form of a palette icon, which will open the “Show Style Page” settings in the Inspector. This tab holds two sections of settings, in this section we will talk about the input boxes, dropdowns, and color selectors.

Theme & Design

The Theme and Design section holds dropdowns, color selectors, a background input box, and a border selection box. At the top are some default Designs and Themes within those designs to choose from. Below those options are ways to change the Page's visuals and all Elements relating to the mentioned title.

For example, Font will affect the font of every Element with text. Control Color corresponds to different color parts of Elements, etc. The Background section allows you to select an image found inside your Aux Directory to be the background, can find more information on the Aux Directory here: Add pictures and CSS files to your user interface.
 

Current Page Style and Classes

These boxes give you some simple control over aspects of the Page's style. In almost all cases we recommend using the next option as it gives more control, however for simple changes to a Page's width and height, entering the CSS here will change the Page. For example:

width: 500px;
height: 900px;

Will change the width and height to the given pixel values.

The Current Page Style Classes input box allows you to give the page a custom Class which can then be referenced in a Global Style Sheet discussed next.

Global Style Sheets

The final way to change CSS, and the recommended way for the most granular and focused control, would be by entering a Global Style Sheet at the top of the “Show Style Page” options.

A Global Style Sheet is a .css file which will use the inside CSS code to change any part of the UI, this can include the Page, the Inspector panel, the Options bar, and any Elements in the Page. Multiple Global Style Sheets can be added to a UI, allowing the user to either include all the code in one file or compartmentalize the code in multiple files.

To select a Global Style Sheet, you will need to place the .css file you create into “html” folder of the Module's Aux Directory, as mentioned, this article goes over how to use an Aux Directory: Add pictures and CSS files to your user interface.

After doing this and refreshing the UI, the .css file should be selectable in the dropdown created after using the “+” icon.

Below is an example Module with a “Example.css” file for reference.
Download Module
Download CSS File

To test the Module, you will need to place the folder into this directory, restart Pixera, then drag it into the workspace from the library: “C:\ProgramData\AV Stumpfl\Pixera\control_library_user”

Tips

As for important tips for using Global Style Sheets, this section will go over how to find important information within the browser and how to use it for modifying the UI.

Dev Tools Chrome

If using the Chrome Browser, you can use the “Developer tools” option which can be opened either by going to the hamburger/three dots in the top right of the browser, then opening the “More tools” section. Another way is to use the keyboard shortcut “Ctrl+Shift+I”.

These “Developer tools” allow you to see the HTML and CSS of the UI, and in turn see all the IDs you need to modify in the CSS file, as well as the current property values of the HTML Elements.

Common Variables

In the CSS file for the HTML of the UI, there are a variety of variables which if replaced in the :root will allow you to change the color of all Pages and Elements referencing this variable. Variables in CSS are denoted with a double “--” sign infront of whatever name you want followed by the value you want that variable to be set as.

In the given CSS file there is this example code:

/*Root Property Variables*/
:root {
   /*Variables Used by HTML*/
   --font-family: 'Graphik-Regular', sans-serif;
   --font-color: #ffffff;
   
   --background-color: #000000;
   
   --control-color: rgb(255, 0, 0);
   --control-color2: rgb(255, 217, 0);
   --control-color3: rgb(51, 255, 0);
   
   --rectangle-color: hsl(187, 100%, 50%);
   --accent-color: hsl(207, 100%, 50%);
   --accent-color-dark: hsl(286, 100%, 50%);
   
   --hover-color: hwb(325 0% 0%);
   --pressed-color: hwb(0 15% 67%);
   
   --negative-foreground: #ffffff00;
   --negative-background: #ffffff8a;
   --positive-foreground: #ffffff3f;
   --positive-background: #ffffffe1;
   
   --menu-color: #ff0000;
   
   /*Custom Variable Ideas*/
   --theme-color-1: #ff0000;
   --theme-color-2: #00ff15;
   --theme-color-3: #0400ff;
   --theme-color-4: #fffb00;
}

The variables found underneath “/*Variables Used by HTML*/” are those referenced by the Page and all Elements. Note that not all Elements use all of these variables, it depends on how the Element was setup in the background.

Also included is a variety of ways to specify color for these default variables.

The variables found underneath"/*Custom Variable Ideas*/" show how to create your own variables in the :root which can then be referenced in other Element's CSS in the same way as the defaults are.

Example Element IDs

In the Module are six Elements, three being labels and the other three being a Slider, a Button, and a Resource Browser respectively. Inside the ID section of each Element is a given “Name” for that Element. This name is what is used to reference that Element in the CSS file to make changes to it.

Every name will be appended to the end of “ComponentId_” as the ID you want to use in the CSS, for example, the Label for the Slider is named “SliderLabel”, so its ID to be used in the CSS would be “ComponentId_SliderLabel”.

This will have all the code inside that Element (and whatever other additions you use, such as “> div” to change all div HTML elements inside) affect only that Element. So in the example this allows each Label to have different CSS.

If you would like to modify all Labels with a new default CSS, you can use the Component's “type” ID instead, which every one of that Element uses.

For example, the Label's “type” ID is “type_UbControlLabel”. Using this in the CSS will modify every current and future Label to use the given CSS.

This covers Pixera's end of the CSS, for more in-depth info on how to use CSS, please reference the official documentation here: https://developer.mozilla.org/en-US/docs/Web/CSS

PIXERA 2.0.223 | 13. December 2024 | CL