Styling#

Style Containers are used to hold a set of Styles to be applied to a given UI. The Styles within a StyleContainer are applied to every UI element within it. Similar to an html cascading style sheet, these containers make quick work of setting and keeping styles consistent throughout your UI. Easily set font sizes, colors, backgrounds and other visual aspects once and re-used them from button to button or menu to menu.

Create Styles for your UI#

This video shows a simple example of how to style your UI.

The video above shows how you can add styles to an existing UI using these steps:

Create styles for your UI#

Step 1: Create a style#

  1. Navigate to Create > UI and Create the select StyleContainer. This creates a StyleContainer in your Stage.

  2. Bind the new StyleContainer to the Frame:

    1. In the Stage, Select your Frame.

    2. In the Property` panel, find the Style section. Click Add Target.

    3. A dialogue windows comes up. Select the StyleContainer you created earlier.

Note

It’s helpful to apply the StyleContainer to the Frame from the start since it will immediately show the effects of the StyleContainer as it’s being created.

Step 2: Set the style’s properties#

  1. Navigate to Create > UI and select Style.

  2. Select the Style in the Stage.

  3. In the Property window of the style, navigate down to the UI > StyleSelector section.

  4. Set the type_name to “Button.Label”.

  5. In the Style section, press the +Add button and choose “color”.

  6. Set the color to green.

  7. In the Stage, rename the style to “Style_ButtonLabelColor”.

  8. Parent the Style into the StyleContainer if its not already done.

Step 3: Add another style#

  1. Add another Style and name it “Style_ButtonFontSize”. This will control the font size of the Button Label.

  2. In the Property window, navigate to UI > Style. and press the +Add button.

  3. Choose font_size.

  4. Set the font_size property to a value around 30.

Set styling for UI states#

Styles can react to the state of a Widget, such as when a Button is pressed or is Hovered over.

This video above shows how to set a Button’s “hovered” and “pressed” states, using these steps:

Step 1: Create a style its state properties#

  1. Navigate to Create > UI and select StyleContainer. This creates a StyleContainer in your Stage.

  2. Click on Style to add a style to the Stage.

  3. In your Stage, drag the Style to the StyleContainer.

  4. Make sure the Style in the Stage is selected.

  5. In the Property Panel Change type_name to “Button”.

  6. Change state to “hovered”.

  7. In the StyleSelector area, click on Add and choose “color”.

  8. Set the color to green.

Step 2: Create another style#

  1. Create another style and parent it to the StyleContainer.

  2. Set style’s type_name to “Button”.

  3. Set the style’s state to “pressed”.

  4. Set the style’s color to blue.

Using Multiple StyleContainers#

Multiple StyleContainers can be created and swapped out for a given UI. In this video, the StyleContainer created in the previous example is duplicated and then swapped in to replace the existing StyleContainer.

In the video above, we swap the StyleContainers using the following steps:

Step 1: Duplicate the StyleContainer#

  1. In your Stage select the StyleContainer and duplicate it by pressing CTRL + D

  2. Add another style to the StyleContainer.

  3. In the style’s Property window, navigate down to UI > Style and click the +Add button.

  4. This time, select “Button” instead of “Button.Label”.

  5. Click the +Add button and choose “background_color”.

  6. Set the color to white.

  7. Change the existing Style “Style_ButtonLabelColor” to green.

Step 2: Swap out the StyleContainer#

  1. In the Stage, select the Frame.

  2. In the Frame’s Property window, navigate to UI > Style and remove the style binding by pressing the red x button (from above example).

  3. Bind the new StyleContainer by clicking Add target and choosing the a different StyleContainer.

Switching StyleContainers#

This video shows how to use Button events to switch the StyleContainer of a Frame using ActionGraph. We start with two Buttons and two StyleContainers and use Custom Events to trigger ActionGraph to bind the relationship of the chosen StyleContainer to the Frame.

The video above shows how to use custom events with buttons using the following steps:

  1. Two Custom Events are created in ActionGraph: “SET_STYLE_1” and “SET_STYLE_2”

  2. The events are assigned to the clicked_fn event of the Buttons. One event per Button corresponding to the StyleContainer we want to switch to.

  3. For the Custom Events an ActionGraph node “Add Prim Relationship” is used with the “omni:ui:Style:binding” relationship with the Frame and the appropriate StyleContainer as the target.

On this page