Cascading Style Sheets

While you're learning all the various ways to control things in your Q-SYS installation, you'll eventually realize something slightly terrifying.

You have to let other people touch your controls.

That's right.

Humans, the worst thing to ever happen to good code.

The most common way to build a user control interface or UCI is to simply drag in the relevant controls,

adjust their size and color to your liking, and then let those humans poke and prod your screen with their little human fingers.

We've got tons of videos in the Q-SYS level one course on how to build those UCI's style, the controls, add images, all the good stuff.

So head there if you wanna learn the basics, but there's another way to make your UCI look sleek and professional.

That doesn't involve manually setting every single color and font and background one by one.

Now sure, that is fine for a single small UCI, but for systems with multiple UCIs and multiple pages,

adhering to your marketing team's brilliant decision of changing the corporate blue to slightly different corporate blue could be an all day job.

That's when it's time to use CSS or cascading style sheets.

CSS has been around for a long time, and it's not unique to Q-SYS.

It's the same stuff used on websites everywhere.

For instance, HTML may be used to define the content of a website,

while CSS is used to determine the manner in which that content is displayed and can apply its changes to everything it needs to simultaneously.

Think of yourself as a billionaire looking at your house and saying, no, I want it all Victorian.

Well, the billionaire doesn't then go antiquing for silverware and learn how to oil paint.

They just pay someone to do it all for them.

Well, CSS is the someone you hire to do it all for you.

You can change a single line of code and the CSS will automatically affect every object defined by that line of code,

making it very easy to deploy massive stylistic changes, update logos, et cetera, with just a couple of keystrokes.

So what is a cascading style sheet essentially?

It's just a text document, except it has a special kind of magic because it ends in CSS instead of txt.

If you wanna create one from scratch, you could start by creating a new text document and then immediately resave your file and change its extension.

We're gonna call it style css, and yes, every CSS in Q-SYS must be named style CSS because Q-SYS is also your cat and it's picky.

You'll notice the windows now identifies it as a CSS file rather than a text document.

So let's delete that first text document and just use our CSS file now.

Most importantly, this file has to be placed in the Styles folder wherever Q-SYS stores its assets by default.

This is in your documents folder under Q-SYS Designer slash Styles, but you can customize this under file preferences General asset directory.

So be sure to use this to find the correct location of your styles folder.

Inside that styles folder, create a new folder named for your CSS theme and place your file there.

This folder name is how it will appear inside Q-SYS.

Next, you can start writing your file.

Most professionals will use a code editing software, but let's just do this in good old notepad to keep it real simple.

Let's write one line.

Button background blue.

The coding here is very simple.

Name of the object you want to target.

Open some braces.

You know those squiggly brackets, name of the attribute you wanna change and the parameter to change it to.

That's it.

You've just told Q-SYS to make every button blue.

Congratulations, you're a graphic designer now.

Now let's get it into Q-SYS first.

Create a quick UCI to test it on and add a button so that we can see this in action.

Next, go to tools.

Show design resources.

Here you'll see the names of all the available CSS options in your styles folder.

Click on install style and it will embed that CSS into your Q-SYS file.

You can click on the installed tab to check which ones you've added.

Larger CSS files may end up having lots of images, which is why we only want to install the CSS files we're gonna use to avoid accidentally making a cutest file that's 900 megabytes.

Uh, once it's installed, it's not applied automatically because.

Chaos.

You may have multiple UCIs and multiple CSS you want to apply to them.

Q-SYS is not your child and therefore does not control you.

So you have to select your UCI in the left hand pane and then find its style property in the right hand pane.

Voila, a blue button.

Now let's go back and change the CSS file.

Let's say I wanna change this from blue to purple.

As soon as I save my CSS file, you'll notice the Q-SYS prompts if you want to update it as well, which is kind of, it's saying, Hey, I noticed you've been tinkering with my code.

Remember, you're editing a text document on your pc, which is different than the version you baked into