[00:00] Ignition offers many different tools to help you tailor the look and feel of your projects. In the past, Default and Custom Themes in Perspective helped expand the basic options for customizing projects with Cascading Style Sheets, or CSS. As useful as Themes are as a foundation for styling, they can't be exported with a project or gateway backup, and they may not allow you to fine tune your components the way that more targeted CSS can. Here I have a Perspective view with several labels in my designer. I want to create a different look for each, but I don't want to modify the style property on my labels with existing tools in the Property Editor With the Advanced Stylesheet, we can add our own project-scoped CSS stylesheets into the Perspective project itself, instead of spending time inserting CSS through the gateway style directory or creating theme assets that need to be managed separately from a regular project or gateway backup. To enable the Advanced Stylesheet, let's go into the Project Browser within the Designer and right click on the Styles folder.

[01:06] Select Enable Advanced Stylesheet. The stylesheet.css resource will then be available under styles in the Project Browser. Once in place, The stylesheet allows us to add CSS just like any normal CSS file. The Advanced Stylesheet can override or extend Perspective style classes or CSS classes used within a component's structure, but one important thing to note is that the editor doesn't support auto-complete CSS syntax, so prior knowledge of CSS is a must. The CSS rules we define here in stylesheet. CSS will be inserted into the Perspective project in between the theme files of the gateway and the style classes created with the built-in style tools. Unlike Theme files that affect the entire gateway, the scope of the Advanced Stylesheet CSS resource is at the project level to allow for more individualized styling from project to project. To disable this feature, you can delete the resource from within the Styles directory by right clicking on stylesheet.CSS and selecting the delete option.

[02:06] Now, I want to make a project-wide base label style to get us started, but we'll first need to find the right selector to target all our project labels in the code. Here's how to find that selector. Go to view in the Project Browser, right click on our label view, and select Launch URL. The Perspective view will open in the browser and then we can dig into the code a bit using the browser's Developer tools. I'm using Chrome on a Windows machine, so I can use a dedicated shortcut: control + shift + I to see the dev tools for my most recent panel. Linux works the same way. If you're on a Mac, you can use Cmd + Option + I. Another alternative is to right-click on a label in the browser and choose Inspect from the menu that appears. Inside my dev tools window, I'll click on the Elements tab. In the top left corner of the elements panel, I can toggle this square with an arrow to turn my inspector capabilities on and off as needed.

[03:04] With the inspector on, I can hover over my label to see the different parts of that component. I have a label div that holds a span element with my label text inside it. In order to target everything inside that label DIV container and make all the changes I want, I'm going to use this existing class called dot IA underscore labelComponent. The prefix IA underscore is reserved for the base, predefined styling that's built into Perspective. If I were to grab another label from my component palette and bring it into my view in the designer, it would automatically have the same predefined class attached to that label div. You can also see this class in the Elements panel where you're inspecting the Document Object Model, or the DOM. Since I know what class to use, I can add some simple custom styles in my style sheet that I want to apply to all labels across my entire project. You can see the results immediately on save because this is targeting the CSS class selector on the label component directly in the stylesheet.css file.

[04:05] Every single label in the project will now reflect our base styles. Maybe we really want this standard style to apply to most of our labels, but we also want to use CSS to override some of those styles or add to them in other contexts. Let's create some custom style classes next in our stylesheet. CSS. Perspective uses the prefix dot psc dash for Perspective style classes before they're injected onto the page. So if we're trying to target a custom user-created style class, we'll need to add this prefix to the name of our user-created Style declaration in our Advanced Stylesheet. I'm going to name this dot psc dash userCreatedStyle1, I'll paste in a few styles, and then save my work. Nothing changed yet because we haven't told Perspective where to use our new custom user-created Style Class. Style classes set up in this way will not appear in style dropdowns in the Perspective Property Editor as other style classes do, since these are tied to our custom CSS in the Advanced Style sheet. We'll need to add our new style class name without the psc prefix to the style field within the Perspective Property Editor to see the changes. Attach this new class to the style field in the Property Editor and hit enter.

[05:24] You can see how it affects the previous styles, overriding the font size and changing the color and orientation of the text. There is another way to target a specific component by assigning a Document Object Model ID, or domId, to it first, then using that custom CSS selector in the advanced style sheet. The ID of an element should be unique, so I'm going to select my third label here and go to my Perspective Property Editor to attach a domId to it. Scroll down to find the meta section in the Property Editor and click on Add Meta Property. Select properties, domId, and it should appear under the Meta properties section.

[06:03] Give it a unique name and hit enter. We can add whatever styles we want associated with that ID. For domId, There's no need to go into the Perspective Property Editor to make any other changes if you've assigned a unique ID value and targeted it in this way. Just to make it really fun, let's add a quick animation to our Advanced Stylesheet and make our label shine. The creative possibilities for styling your Ignition project are virtually endless with prior knowledge of CSS and the power of Advanced Stylesheets. In later videos, we'll look at how you can incorporate custom fonts into your projects, use custom colors, set custom defaults, create animations and more.