[00:00] Perspective offers plenty of built-in tools to help you customize components, but you may want to reach beyond those built-in possibilities and completely transform the look of a complex component using the Advanced Stylesheet. We'll explore a blend of both approaches in order to restyle this Alarm Status Table in our Perspective view from the standard look you see here to this. For some of the more complex components like the Alarm Status Table, it's a good idea to use the built-in tools first, and then we can graduate to the Advanced Stylesheet to complete the transformation using our knowledge of CSS. To begin, I'll select my Alarm Status Table in the view and go to the Perspective Property Editor. I want to start by changing the tab color on the edge of the state filter marked Active, Unacknowledged. I'll expand rowStyles in the Property Editor, expand activeUnacked, and then expand base.

[01:05] Here, I can change the backgroundColor property to a bright orange. Now that we have our filter tab color, let's use it for the Active, Unacknowledged alarm row color in the Alarm Status Table. I can see that active, unacknowledged alarms are marked as low priority, so I'll stay within activeUnacked in the Perspective Property Editor, go to priorities and find low. If I expand low, I can set the backgroundColor to that same orange. Unfortunately, that represents much of what we can accomplish in terms of styling this component using the built-in tools. I'll save my work, and then we can go look at the results in the browser. I'll go to Views in the project browser, right click on my view and select launch URL. We're off to a good start. Now let's tackle what you can't do with the built-in styling tools by enabling our Advanced Stylesheet. Here I'll drop in a few of the custom colors and base styles we've been using in other lessons in this series and save. I've got my color variables and our background color for the entire project.

[02:11] My first objective with our customization process here in the stylesheet is to change the outline color of the majority of the table to green, so we'll need to find the selectors for those parts using the developer tools. I can right-click on the table and choose inspect to start this process. It looks like one of the classes I need to target is this one: .alarmStatusTable . If we keep going down and expand this div with the class toolbarTabContainer, it also looks like we'll need to use this class (.ia_alarmTableComponent__toolbar__tab). These two tabs, active and shelved, have that class in common. In a previous lesson, we talked about how many of the built-in Perspective classes that begin with the dot IA prefix use a suffix convention with two successive underscores like we see here. That's something to keep an eye out for as we progress. I'll switch back over to our stylesheet and paste in some styles to change those outlines to our neon green color.

[03:09] I've included changes to the outline, border, and stroke properties to give it a bit of a retro feel. Now, let's go back to the browser. I want to use my neon orange color in a couple more places besides the row color and part of that state filter. The active tab at the top could use a little more color. If I right click on that piece, it looks like we need to use this class (.ia_alarmTableComponent__toolbar__tab--active) to target it. There's also a hidden button I'd like to change, so I'll select one of my rows in the table with a check box, and this hidden bar will slide up into view. If I right-click on the acknowledge button, I can find the class I need to change the button color to orange. We'll use the .ackAlarmsButton class. Let's combine those two classes we found together and target them in our stylesheet, comma-separated like this to keep our CSS more dry. That looks pretty good in the browser, but I think we need to change the font color in a number of places for better readability.

[04:08] The tab text, the tab icons, my icons up in the right corner, and the filters label on the left could all use a change to a white font color. Let's grab the selectors for the tab text, icons, and the filter label and combine them in a comma separated list of selectors that we want to use for this font color change. I'll start a running list of selectors as we go to keep track. Before, we used this selector (.ia_alarmTableComponent__toolbar__tab) that's shared between both tabs to create our outline for the different tabs in green. We'll use it again in this context to make sure that both of our tabs use our white font color. Now, let's find the icon selectors within the tabs. If I right click on this bell icon, I can find and grab both of these classes (.ia_alarmTableComponent__toolbar__tab__icon--active, .ia_alarmTableComponent__toolbar__tab__icon) that the active and shelved tabs use. Then we can right-click on the magnifying glass icon and get this class (.ia_alarmTableComponent__toolbar__controlIcon). Last, we'll get the selector for the filter label (.ia_alarmTableComponent__toolbar__preFilterCount).

[05:11] Now that we have all the selectors we need for this part, let's put that into our stylesheet and change the font color to white. We'll take a look at the results in the browser. Next, I'd like to apply some more of my green color in certain places. Let's brighten up the color for these state and priority filters and do the same for the header bar in the table. I'll right-click and inspect the filters bar first. You can see that the filter pills all share this same class (.ia_alarmTableComponent__preFilterPill). We can grab the other selector we need for the header bar using the element inspector icon and clicking on one of the columns. Here in the dev tools window, it's clear that these column header cells all share this same class (.ia_table__head__header__cell). Let's combine our selectors and apply the green color to them in the stylesheet. The results look pretty good in the browser so far.

[06:07] Now let's add in more of our standard blue color to the table and see the difference it makes. I'll start at the top of my table in the browser and work my way down to find all of the selectors we need. I'd like to change the background color to blue for the main toolbar, the close buttons on the filters, the state and priority filter bar, the filter count section, the background behind the remove all button, the bottom pager bar, and the hidden shelve and acknowledge bar. I'll take note of our selectors again as we go, so we can combine them all at the end in our style sheet to make that change. The toolbar at the top uses this class (.ia_alarmTableComponent__toolbar). Let's get the selectors for the state and priority filters next. They're described as pills in the CSS. I'll right click on one of the filters and inspect it. It looks like this is the best class to use if I want to add the blue background behind the whole set of pills (.alarmPreFiltersPills).

[07:07] Next, I want to target the close buttons on each of those filter pills to add a blue background, so I'll use the same process to find the class that those items share and add that to my list (.alarmPreFilterPillClose). These areas to either side of the state and priority filters both need a bit of blue too, so let's take a look at each to find their selectors. For the filter count area, it looks like this is our target (.ia_alarmTableComponent__toolbar__preFilterCount). For the remove all button area, let's use this(.ia_alarmTableComponent__toolbar__preFilter__removeAll). Then we can find the selector for the pager bar at the bottom of the table (.ia_pager). We'll wrap up our selector search by clicking on one of the rows and inspecting the hidden bar that holds the shelve and acknowledge buttons (.ia_alarmTableComponent__foot--show). Now we can put all those selectors together with our blue background color and see the final product. As you can see from this demonstration, it's possible to tailor even complex component styles to meet your needs in an efficient, flexible way within Perspective.

[08:09] Finding the right selectors to target might take a little time and effort, but your projects will benefit from the CSS magic you create using a hybrid approach between Perspective's own built-in styling tools and the Advanced Stylesheet.