UCI Styles

You can create your own .css styles using common code authoring tools such as Visual Studio Code. Note these requirements:

• Q-SYS Designer checks the following directory for .css files to install:

  \Users\user-name\Documents\QSC\Q-SYS Designer\Styles

• Within the above the directory, create a folder for each style. The folder name is used for the style name in Q-SYS Designer.
• The folder must, at minimum, contain a file called style.css.
• Optionally, place images in the Styles folder – for example, within an images subfolder. Ensure that your .css file refers to the proper images location.

Note: Q-SYS supports common CSS selectors. See Supported CSS Selectors to see what selectors are compatible with Q-SYS UCI design graphic and control elements.

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 Installation Location and Requirements.
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 Add.
5. Close the Manage UCI Styles window.

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

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 Remove.
4. Close the Manage UCI Styles window.

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. In the Installed column, if a style is not currently saved to disk, a button appears next to the design name. Click the button.

The style is now saved to the Styles folder on-disk.

Note: Referenced image files are not saved.

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.

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

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

1. Only supports single corner radius (use top left).

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

3. Only supports single border color and thickness (use left).

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

Graphics

	Page	Textblock	Groupbox	Header	Image	Polygon
background						2
background-color
background-image
background-position
background-size
border			3			3
border-width			3			3
border-*			3			3
border-*-width			3			3
border-*-color			3			3
border-radius			1
color
content
font-family
-qsc-font-style4
font-size
text-align
text-transform
vertical-align
margin
opacity
padding

Controls

	Button Trigger	Button Toggle	Button Momentary	UCI Button	Textbox	Knob	Led	Fader	Meter	Combobox	Listbox
background-color						2		2	2	2	2
background-image
background-position
background-size
border								3
border-width								3
border-*								3
border-*-width								3
border-*-color								3
border-radius								1
color
content
font-family
-qsc-font-style
font-size
text-align
text-transform
vertical-align
margin
opacity
padding