[00:00] Perspective's standard looks for components provide a great starting point for different projects, but there are circumstances where changing the default look for particular components and enforcing consistency in styles across the entire project makes more sense for business purposes. If you already know how to use the power of CSS, Advanced Stylesheets can give you the means to reconfigure almost any component's appearance by changing the original style values to a set of custom defaults. We'll be focusing the majority of our time in this lesson on project-wide custom default styles that will impact all of the views in your Perspective project, but I'll also review how to create more individualized user-created style classes for instances where you may want to focus a small style change on one element or component and override those custom defaults. In our last lesson, we created some custom base color styles for our background and some simpler components. This time, I've added a few more components to our Perspective view, so we can work with different cylindrical tanks, a gauge component, labels, sliders, and buttons.

[01:08] We'll need to enable our Stylesheet, pop in the original branding styles with the custom colors we used previously, and then we can look at how more complex components could be restyled to suit your needs. Once again, we have some color variables, the basic background color applied across the entire project, some custom styles for our labels, and a user-created style class that we used last time to make our gauge component more visible. Now, with most of our previous styles in place, I'll close and reload the view. Then I'll select our gauge component in the view and add the myNewColorStyle class under style in the Perspective Property Editor. This gets us to where we left off in the last lesson. The first item I'd like to restyle is the color of all gauge components' numeric labels across the entire project. We'll need to go to the browser to begin this process, so I can go to views, right click on my view name, and select Launch URL to open it in the browser.

[02:05] Next, I'm going to use the developer tools in the browser to help me drill down to the selector I need to target in my Stylesheet if I want to change the color of the numeric labels on our gauge. I'll just hover over one of the numbers and right click on it. I'll select Inspect from the menu. In the elements panel within the dev tools, I can see that the selector I need is tspan. Let's add that into our Stylesheet and change the gauge numeric label color to orange. Then we'll need to save, close our view, and reopen to preview the changes in the designer. Woo, that's bright! That neon green might not be something people are going to want to stare at all the time, and we want the numbers to stand out better against the original blue background, so let's click on the gauge within the view and remove the style class myNewColorStyle. That's better. Let's take a quick look at how that change made an impact across our entire project. I have another couple of views that had sets of gauges already, so I'll open them up here and we can see if that project-wide change really works or not.

[03:11] Not bad. Might need a little more tweaking for readability, but that's a pretty decent starting point for our first custom default value. Let's add a bit of black text shadow to make our numeric labels pop out a little better. Then we can save and reload the different gauge views to see our changes. Much better. Now let's turn our attention to the cylindrical tanks in our designer. The winery I'm designing this project for specializes in white wines with only a couple of reds and blush wines, so setting custom default styling values to represent white wines in cylindrical tanks makes sense for efficiency's sake. If we do have a few tanks with reds or blush wines, we can generate some user-created styles to apply to those tanks individually later.

[04:04] This first cylindrical tank example in our view holds Scuppernong Wine. Right now, the default color of the liquid is blue with Perspective's default style values. I want to make it look more like the white wine product by setting a new custom default fill value. Let's go find the right selector for our Stylesheet using the dev tools. We need to use this selector: dot IA underscore cylindrical tank component underscore underscore liquid. This class name uses the reserved prefix IA underscore that identifies it as a built-in Perspective class. We'll make use of several similar classes throughout the rest of this lesson to create our custom defaults. Please note that the suffix uses two underscores in succession instead of just one. This is a suffix convention used in many of the built-in Perspective classes. If I hover over different parts of the code in the elements panel where I see that class, it looks like the bottom part of the tank outline is controlled by the same selector, so I'll start there by adding a gold fill color for the liquid with a touch of opacity and a green stroke color for the tank outline.

[05:18] That's only part of the equation, though, since we want the outline to be consistent for the tanks. The top is still the default color, so let's go find the selector we need for the top part of the tank outline. We'll use this selector: .ia_cylindricalTankComponent__tank and change the stroke color to match our previous work. Next, I want to make that percentage value inside the tanks bolder and more visible across the entire project. We'll go back to the browser dev tools and find that class name (.ia_cylindricalTankComponent__valueDisplay). Let's add some font weight to that and boost the size. I like it. Let's try an even more complex component restyle for our sliders. It looks simple, but it actually uses a number of different Perspective classes for the default styles that we're going to override with new custom default values.

[06:20] Let's go to the browser and find what we need. We'll need to restyle these slider classes (.ia_slider__rail, .ia_slider__track, .ia_slider__handle) and set new custom defaults that will once again apply across the entire project. I'll paste in some new default color values to make each part of the slider more visible and responsive to user actions. We can see all the parts in action best in preview mode. You'll notice that the pseudo-classes :hover and :active change the style based on the user's hover and click actions to give a little user feedback when activating the slider.

[07:04] Let's talk about user-created classes and custom defaults for a moment. You can still override your new custom defaults for an individual component when necessary. Let's say we're looking at a blush wine in this second cylindrical tank instead. I'll change the label to Blush Wine, and then we'll need to make the liquid color match what's inside for this single component. We'll need to use the reserved prefix dot PSC dash on our style declaration in the Stylesheet, and then combine it with a built-in Perspective style class for the tank liquid like this: .psc-blushWine .ia_cylindricalTankComponent__liquid. Then we just need to select that second cylindrical tank in our designer view and attach our blush wine user-created class under style in the Perspective Property Editor to see the changes. We have one last component to restyle. For our primary button, we'll use a combo of custom defaults and user-created styles once again. It's back to the browser to find our Perspective class name for the primary button (.ia_button--primary).

[08:10] I've added a few base styles to boost its size and make it stand out a little more. With many components, adjusting the height and width values may require using !important to override any other styling set in a different location within Ignition. I've also put a couple of tricks in there that we can use with some additional CSS to animate our button on hover, just for fun. Let's add in an effect with a :hover pseudo-class attached to that Perspective class. Then we'll add a user-created class that we're just going to use for this single button in the project. If you add different user-created style classes with different color gradients in the Stylesheet, each button can have its own unique look and user feedback effect while still building on the custom default CSS foundation. Let's add that user-created class to our first button example and try it out. Select the button within the view, add in the new class btn dash one under style in the Perspective Property Editor, and save.

[09:10] One other way we can find selectors for custom default styles is by inspection of component CSS theme files, if we have access. First, I'll need to go to the installation directory where I installed Ignition. I'm working on a Windows machine, but the process is similar for other operating systems. Here are the default installation directories for Windows, MacOS, and Linux, for reference. For more information on installation directories, please see the link to the User Manual below this video. So I'll open my Ignition installation directory, go to the data directory, go to modules, go to com.inductiveautomation.perspective, themes, light, and palette, to find some examples of built-in CSS that can help us find what we need. Not every component will appear here, but these CSS files are still a great resource.

[10:04] For example, let's open the CSS file for the cylindrical tank. You can see the sample CSS and class names for the different parts of the cylindrical tank and take what you need to adapt in your Advanced Stylesheet. So with a little detective work in the theme files or the developer tools, it's easy to find the selectors you need to customize nearly any component to meet your requirements. With the power of CSS at your fingertips, Advanced Stylesheets give you the freedom to tailor multiple components across an entire project at once, or modify individual components at will with a mix of custom defaults and user-created style classes. Let your imagination be your guide as you fine tune the look and feel of your projects for branding purposes, visual interest, consistency, and more.