# Css exception handling **URL:** \ **Category:** Ignition\ **Tags:** ignition81, perspective\ **Created:** [June 7, 2023, 4:06pm UTC](https://forum.inductiveautomation.com/t/css-exception-handling/74722 "2023-06-07T16:06:18Z")\ **Posts on this page:** 17\ **Page:** 1
**Author:** ![KIM\_SUNG\_HOO](https://avatars.discourse-cdn.com/v4/letter/k/977dab/32.png) [@KIM\_SUNG\_HOO](https://forum.inductiveautomation.com/u/KIM_SUNG_HOO)\ **Post date:** [June 7, 2023, 4:06pm UTC](https://forum.inductiveautomation.com/t/css-exception-handling/74722/1 "2023-06-07T16:06:18Z")
hi, I put the following code in the css file ```auto .pager-container div.page { background: #FFCCCC !important; color: #1010FF !important; } .pager-container div.page.active { background: #000000 !important; color: #FFFFFF !important; } ``` But something went wrong. This applies to all styles. I want to decorate as an exception, not this style. is there a way? ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [June 7, 2023, 4:32pm UTC](https://forum.inductiveautomation.com/t/css-exception-handling/74722/2 "2023-06-07T16:32:25Z")
What are you trying to do ? I don't understand what this means: > [@KIM\_SUNG\_HOO](#): > > I want to decorate as an exception, not this style. PS: Use the preformatted text tool when you post code on the forum, or surround it with triple backticks: > ``` > code > ``` ---
**Author:** ![KIM\_SUNG\_HOO](https://avatars.discourse-cdn.com/v4/letter/k/977dab/32.png) [@KIM\_SUNG\_HOO](https://forum.inductiveautomation.com/u/KIM_SUNG_HOO)\ **Post date:** [June 7, 2023, 4:40pm UTC](https://forum.inductiveautomation.com/t/css-exception-handling/74722/3 "2023-06-07T16:40:30Z")
> [@pascal.fragnoud](#): > > PS: Use the preformatted text tool when you post code on the forum, or surround it with triple backticks: Edited as you said. thank you! hm.. for example, When the pager is active, the background color #000000 is applied. But I want to apply #FFFFFF to another pager but i don't know how to apply it. ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [June 7, 2023, 4:42pm UTC](https://forum.inductiveautomation.com/t/css-exception-handling/74722/4 "2023-06-07T16:42:54Z")
Well you'll need to either select every class where you want that style applied, or make a new class, apply the style to it, then add this class to every component where you want the style applied. ---
**Author:** ![KIM\_SUNG\_HOO](https://avatars.discourse-cdn.com/v4/letter/k/977dab/32.png) [@KIM\_SUNG\_HOO](https://forum.inductiveautomation.com/u/KIM_SUNG_HOO)\ **Post date:** [June 7, 2023, 4:45pm UTC](https://forum.inductiveautomation.com/t/css-exception-handling/74722/5 "2023-06-07T16:45:57Z")
> [@pascal.fragnoud](#): > > then add this class to every component where you want the style applied. sorry, I do not understand. can you give me an example? ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [June 7, 2023, 4:51pm UTC](https://forum.inductiveautomation.com/t/css-exception-handling/74722/6 "2023-06-07T16:51:50Z")
In the code you showed, you're selecting ia built-in classes. But you can also make your own style classes and add them to components. Actually, you'll even be able to set the properties you want there directly. It's limited compared to the css style sheet, but it's also a solid built-in functionality. How familiar are you with css ? ---
**Author:** ![KIM\_SUNG\_HOO](https://avatars.discourse-cdn.com/v4/letter/k/977dab/32.png) [@KIM\_SUNG\_HOO](https://forum.inductiveautomation.com/u/KIM_SUNG_HOO)\ **Post date:** [June 7, 2023, 4:54pm UTC](https://forum.inductiveautomation.com/t/css-exception-handling/74722/7 "2023-06-07T16:54:38Z")
> [@pascal.fragnoud](#): > > How familiar are you with css ? I'm newbie. It is a level of skill that brings and writes the necessary code through the forum. > [@pascal.fragnoud](#): > > But you can also make your own style classes and add them to components In the case of the pager, it is a non-configurable element in the style class creation. ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [June 7, 2023, 4:58pm UTC](https://forum.inductiveautomation.com/t/css-exception-handling/74722/8 "2023-06-07T16:58:33Z")
Are you talking about the table's pager ? If so, it does have a style property: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/7/f7f48b7ded56c267851ab4c3f227895fc740e8a0.png) I think you're taking this backwards. You don't select the components you want to target in the style classes, you only configure the properties you want to modify. Then you add the style class to the components you want to select. ---
**Author:** ![KIM\_SUNG\_HOO](https://avatars.discourse-cdn.com/v4/letter/k/977dab/32.png) [@KIM\_SUNG\_HOO](https://forum.inductiveautomation.com/u/KIM_SUNG_HOO)\ **Post date:** [June 7, 2023, 5:06pm UTC](https://forum.inductiveautomation.com/t/css-exception-handling/74722/9 "2023-06-07T17:06:55Z")
> [@pascal.fragnoud](#): > > If so, it does have a style property: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/c/4c1196b8b211fa69daa2beb2465e70b6d9097961.png) As shown in the picture above, the pager background cannot be specified with the style class. What I want is a style for the page numbers. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/6/96adc8ad181288558f48a02ade5a9762616d0724.png) ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [June 7, 2023, 6:23pm UTC](https://forum.inductiveautomation.com/t/css-exception-handling/74722/10 "2023-06-07T18:23:58Z")
Giving it a class, just to make targeting more specific: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/9/e9e658686126643f916dd296741c5c54d450ee32.png) Then targeting the numbers in the stylesheet: ```css .psc-table_pager .ia_pager__page { background-color: red; } ``` results: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/2/62521724f17d9eab3ba80dad8c50eacccd4335f3.png) you can have as much fun as you want with this: ```auto .psc-table_pager .ia_pager__page { background-color: red; width: 32px; height: 32px; border: solid; border-radius: 0; transform: rotate(135deg); } ``` ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/5/0523b91519a086cc5217baa2e89a74569726051c.png) ---
**Author:** ![KIM\_SUNG\_HOO](https://avatars.discourse-cdn.com/v4/letter/k/977dab/32.png) [@KIM\_SUNG\_HOO](https://forum.inductiveautomation.com/u/KIM_SUNG_HOO)\ **Post date:** [June 7, 2023, 6:29pm UTC](https://forum.inductiveautomation.com/t/css-exception-handling/74722/11 "2023-06-07T18:29:24Z")
> [@pascal.fragnoud](#): > > you can have as much fun as you want with this: It's amazing. I need to study more about css. thank you! ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [June 7, 2023, 6:30pm UTC](https://forum.inductiveautomation.com/t/css-exception-handling/74722/12 "2023-06-07T18:30:35Z")
I suggest you start by understanding selectors: > **[CSS selectors - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)** > > CSS selectors define the pattern to select elements to which a set of CSS rules are then applied. This is the backbone of everything css can do. ---
**Author:** ![KIM\_SUNG\_HOO](https://avatars.discourse-cdn.com/v4/letter/k/977dab/32.png) [@KIM\_SUNG\_HOO](https://forum.inductiveautomation.com/u/KIM_SUNG_HOO)\ **Post date:** [June 7, 2023, 6:37pm UTC](https://forum.inductiveautomation.com/t/css-exception-handling/74722/13 "2023-06-07T18:37:32Z")
> [@pascal.fragnoud](#): > > `.ia_pager__page ` Where should I find these commands? ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [June 7, 2023, 6:41pm UTC](https://forum.inductiveautomation.com/t/css-exception-handling/74722/14 "2023-06-07T18:41:14Z")
Get familiar with the developer tools in your browser of choice. ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [June 7, 2023, 6:46pm UTC](https://forum.inductiveautomation.com/t/css-exception-handling/74722/15 "2023-06-07T18:46:04Z")
now that's a pager I like (...) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/5/855ab15c3b8c85841092a2ef42add9c2b7a264b6.png) ---
**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\ **Post date:** [July 31, 2023, 7:47pm UTC](https://forum.inductiveautomation.com/t/css-exception-handling/74722/16 "2023-07-31T19:47:30Z")
I'm trying to change the pager's arrow size, but I don't quite understand the hierarchy for altering the CSS. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/1/9126b69ab40f62ae09b3ad24a317ea08a39f2899.png) I tried this, but it didn't work ```css .psc-table_32px_pager_arrow .ia_pager__prevNext { width: 32px; height: 32px; } ``` ---
**Author:** ![CalebM](https://avatars.discourse-cdn.com/v4/letter/c/71c47a/32.png) [@CalebM](https://forum.inductiveautomation.com/u/CalebM)\ **Post date:** [July 31, 2023, 8:36pm UTC](https://forum.inductiveautomation.com/t/css-exception-handling/74722/17 "2023-07-31T20:36:51Z")
I think you have to apply the width and height directly to the SVG. ```auto .psc-table_32px_pager_arrow .ia_pager__prevNext svg { width: 32px; height: 32px; } ```