UCI Styles

Use this procedure for getting started with creating your own styles.

Note: Styles may also be available for download from Q-SYS Asset Manager (Tools > Show Asset Manager).

1. Q-SYS Designer checks the following directory for .css files to install: \Users\user-name\Documents\QSC\Q-SYS Designer\Styles. Within this directory, create a folder for each style. The folder name is used for the style name in Q-SYS Designer.
2. Create a file called style.css and place it in the folder for your style.
   • Use a common code authoring tool such as Visual Studio Code to write your style.
   • Refer to Supported CSS Properties to see what selectors are compatible with Q-SYS UCI design graphic and control elements. Q-SYS supports common CSS selectors.
3. If your style uses images or custom fonts, place them in the folder containing your style. Ensure that your .css file refers to the proper subfolders for referenced files.
4. Install the style to a design. See Managing UCI Styles.
5. Apply the style to a UCI. See Applying and Updating UCI Styles.

Tip: Because style .css files are installed to the design, if you share a design containing installed styles with someone else, that person will also see those styles.

Installing New Styles to a Design

1. Place the .css file and any supporting image files into the Styles folder. See Getting Started: Creating Styles.
2. In Q-SYS Designer, create or open a design file.
3. Click Tools > Manage UCI Styles.
4. From the Available list, select the style name, and then click Install Style.
5. Close the Manage UCI Styles window.

The installed style is now available for selection in your UCI. See Applying and Updating UCI Styles.

Saving Styles from a Design

If a design contains a styles file that is not currently on your local disk, you can save it from the design. You can then edit the file.

1. Click Tools > Manage UCI Styles.
2. From the Installed list, select the style name, and then click . The style is now saved to the Styles folder on-disk.

Note: Referenced image files are not saved.

Removing Styles from a Design

1. In Q-SYS Designer, create or open a design file.
2. Click Tools > Manage UCI Styles.
3. From the Installed list, select the style name, and then click .
4. Close the Manage UCI Styles window.

Once you have installed a UCI style file to a design, you can then apply it to a UCI. Applied styles take precedence over individual graphic and control properties in Designer.

1. With your design file open in Q-SYS Designer, select User Control Interfaces in the left pane.
2. Select your UCI name.
3. In the User Control Interface Properties (right side pane), select a Style from the drop-down menu.
4. Optionally, use the CSS Class Name property to adjust the assigned classes for a UCI element (button, fader, text box, etc.). An element can belong to as many CSS classes as needed to provide the desired styling.

Tip: Click to access the Manage UCI Styles window from the UCI Properties pane.

Updating Styles

If you modify a styles .css file – either via an update from Q-SYS Asset Manager or in a code editor – Q-SYS Designer detects any changes and prompts you to update the style in your design.

You can modify a .css file whether your design is open is Q-SYS Designer or not. To allow Q-SYS Designer to automatically update styles while your design is open (without prompting), click Tools > Auto Update Styles.

Note: The Auto Update Styles option is not saved with the design. The option reverts to disabled the next time you open your design file.

The following tables indicate what selectors are supported for specific UCI graphic and control elements.

= Supported

Graphics

Property	Page	Textblock	Groupbox	Header	Image	Polygon
background
background-color
background-image4
background-position
background-size
border5			1			1
border-width			1			1
border-*			1			1
border-*-width5			1			1
border-*-color			1			1
border-radius			2
color
content
font-family
font-size5
margin
opacity
padding
text-align
text-transform
vertical-align
-qsc-font-style3

1. Only supports single border color and thickness (uses left).

2. Only supports single corner radius (uses top left).

3. Specific to QSC, and uses the same values as the Font Style property drop-down – Bold, Italic, Bold Italic, etc.

4. Only supports url() and linear-gradient() background-images.

5. Supports viewport relative sizes. See UCI Styles for example usage.

Controls

	Button	Textbox	Knob	Led	Fader	Meter	Combobox	Listbox
background			1		1
background-color
background-image4
background-position
background-size
border5					2
border-width					2
border-*					2
border-*-width5					2
border-*-color					2
border-radius					3
color
content
font-family
font-size5
margin
opacity
padding
text-align
text-transform
vertical-align
-qsc-font-style

1. Only supports color (not images) on the background.

2. Only supports single border color and thickness (uses left).

3. Only supports single corner radius (uses top left).

4. Only supports url() and linear-gradient() background-images.

5. Supports viewport relative sizes. See UCI Styles for example usage.

Creating, Installing, and Applying a Style

Setting CSS Properties

Defined CSS style properties override the same properties in Designer. For example, in this style.css file, all buttons are defined to use a blue background. Therefore, if a button is set to use red in the Designer properties, it is overridden by the applied style and therefore uses blue. Note, however, that because there is no font size defined in the style, the size specified in Designer is used.

button{
    background: Blue;
    font-family: Lato;
    font-face: Bold;
}

In this example, the On state of the button is set with button:value(1). The code sets the On state color for all buttons to be red:

button:value(1){
    background: Red;
}

To apply styling to a subset of items (for example, source buttons), you first define a class in the CSS document. The example code below adds a class for preset buttons and sets the buttons to be green when Off and orange when On. Note that you can use names, RGB values, or RGBA values when defining colors.

.source{
    background: Green;
}
.souce:value(1){
    background: rgb(255, 174, 0);
}

Referencing Images and Custom Fonts

Reference images by providing a path to the image file as the background-image property – for example, for buttons.

.pc{
    background-image: url(images/pc.png);
}

Reference custom fonts in your CSS file using the @font-face rule. Make sure to reference the location where your fonts are stored in relation to your CSS file. For example, here is a reference to a font stored in a fonts subfolder at the same level as the CSS file:

@font-face {
  font-family: "My Fancy Font";
  src: url( fonts/fancyfont.ttf );
}

textbox {
  font-family: "My Fancy Font";
}

This section contains a list of available CSS classes and their intended uses for UCI styles provided by QSC.

Teams

Use this style for Q-SYS room control UCIs displayed on Microsoft Teams Rooms consoles. For more information, see Microsoft Teams Room (MTR).

CSS Class Name	Description/Usage	Example
buttonprimary	Intended for buttons with primary purpose – for example, function toggles. Fill is light purple when on and dark purple when off.
buttonsecondary	Intended for buttons with secondary purpose – for example, mode selection. Fill is light purple when on and transparent when off.
buttonsnapshot	Intended for snapshot buttons – for example, camera position presets. Fill is light purple when a snapshot is saved and dark purple when not saved.
icondown iconup iconleft iconright	Intended for directional buttons – for example, camera position control.
icondownbar iconupbar	Intended for directional buttons – for example, room temperature control.
iconeye	Intended for buttons for hiding visibility – for example, entering camera privacy mode.
iconhome	Intended for buttons for returning to a home position – for example, a camera's home position.
iconpower	Intended for power buttons.
iconvoldown iconvolup iconvoloff iconvolmute	Intended for volume control buttons.
iconzoomin iconzoomout	Intended for camera zoom controls.
justifycenter justifyleft justifyright	Use the justify tags in combination with textbodydisplay, textheadingdisplay, textlabeldisplay (shown), or texttitledisplay.
textbody	Body text with a left justify.
textbodydisplay	Body text with a default center justify. Optionally use in combination with justifyleft or justifyright.
textboxfader	Text box with purple fill intended for fader labels. Center justify.
textheading	Heading text with left justify.
textheadingdisplay	Heading text with a default center justify. Optionally use in combination with justifyleft or justifyright.
textlabel	Label text with left justify.
textlabeldisplay	Label text with a default center justify. Optionally use in combination with justifyleft or justifyright.
texttitle	Title text with left justify.
texttitledisplay	Title text with a default center justify. Optionally use in combination with justifyleft or justifyright.