# Custom style on specific component is not working

**URL:** <https://forum.inductiveautomation.com/t/custom-style-on-specific-component-is-not-working/92082>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [June 19, 2024, 12:48pm UTC](https://forum.inductiveautomation.com/t/custom-style-on-specific-component-is-not-working/92082 "2024-06-19T12:48:55Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\
**Post date:** [June 19, 2024, 12:48pm UTC](https://forum.inductiveautomation.com/t/custom-style-on-specific-component-is-not-working/92082/1 "2024-06-19T12:48:55Z")

</div>

Good morning,  
I'm forcing the checkbox color in an Alarm Status Table in perspective in this way

```python
} .ia_checkbox__icon--useColor { fill: var(--neutral-30) } {

```

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/3/9363b43b93195bc89a54d20ae64ab78327c5abaa.png)

and it works good, but the problem is that even in other checkboxes that I've in the project the color changes.

So I try this code and I select the class in the alarm status table style, but it's not working, where is the mistake guys?

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/5/95e2720604e5b6c3eaabe3c1d22d5d1f83cc6fa8.png)

---

<div class="post-metadata">

**Author:** ![Noah\_Casey](https://avatars.discourse-cdn.com/v4/letter/n/e480ec/32.png) [@Noah\_Casey](https://forum.inductiveautomation.com/u/Noah_Casey)\
**Post date:** [June 19, 2024, 1:01pm UTC](https://forum.inductiveautomation.com/t/custom-style-on-specific-component-is-not-working/92082/2 "2024-06-19T13:01:42Z")

</div>

You can modify the css and add a ID identifier to the front here is what the style would look like:

```python
} #YourIdentifierHere .ia_component .......

```

Then inside of the component in the meta section add a new meta property called "domId"  
Inside if this you would call YourIdentifierHere

Here is an example where I have done it:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/e/9e49b73e93f7f922081db3de7516e1f267997e52.png)

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/c/3cb597b4a46f6cdfc7ca222fe89b12fbddaaf5ee.png)

This removes shadows as you can see on normal tables I have a shadow:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/c/ac8c242cb56ad0d5d912ae904944ba2aaf188048.png)

But the one with the dom ID does not have shadows:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/4/8489558bfaa9ee16bee64dfcb2e846b81eb28fd4.png)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [June 19, 2024, 1:07pm UTC](https://forum.inductiveautomation.com/t/custom-style-on-specific-component-is-not-working/92082/3 "2024-06-19T13:07:38Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/e/ceb96509b4b93bfbfc83b38cedd9fa0f08bdcf12.png)  
You need to put the folders also in the name here.

BUT instead of just` /` its needs to be `\/`  
so  
somethign like `.psc-Componenti\/Alarm...\/checkbox`  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/e/0e072b8b45f965b856a25dec47aee63916a7b899.png)

---

<div class="post-metadata">

**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\
**Post date:** [June 19, 2024, 1:33pm UTC](https://forum.inductiveautomation.com/t/custom-style-on-specific-component-is-not-working/92082/4 "2024-06-19T13:33:27Z")

</div>

Thanks both for the help, actually the @victordcq solution is very easy to implement, I tried to insert the path but not with the `\/`.

Thanks again

---

<div class="post-metadata">

**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\
**Post date:** [June 19, 2024, 1:52pm UTC](https://forum.inductiveautomation.com/t/custom-style-on-specific-component-is-not-working/92082/5 "2024-06-19T13:52:37Z")

</div>

I take this opportunity to ask another thing.

I'm trying to do the same with more properties at the same time.. this work for all the dataTimeInput

```python
} .ia_dateTimeInputComponent input { font-Family: Noto Sans; font-size: clamp(8px, calc(0.52*(1vmax + 1vmin)), 16px) ; color: var(--neutral-100) ; } {

```

if I convert it this

```python
} .psc-Componenti\/DateTime\/text .ia_dateTimeInputComponent input { font-Family: Noto Sans; font-size: clamp(8px, calc(0.52*(1vmax + 1vmin)), 16px) ; color: var(--neutral-100) ; } {

```

it's not working in this way, I try even adding !important like this (i'm sure if it is correct)

```python
} .psc-Componenti\/DateTime\/text .ia_dateTimeInputComponent input { font-Family: Noto Sans !important; font-size: clamp(8px, calc(0.52*(1vmax + 1vmin)), 16px) !important; color: var(--neutral-100) !important ; } {

```

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/3/8330d030b274e525f0c292244e5d1c38f6bdf301.png)

Am I doing something wrong concatenating more properties?

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [June 19, 2024, 2:38pm UTC](https://forum.inductiveautomation.com/t/custom-style-on-specific-component-is-not-working/92082/6 "2024-06-19T14:38:38Z")

</div>

> [@Aiasa21](#):
>
> `.psc-Componenti\/DateTime\/text .ia_dateTimeInputComponent`

Sometimes depending on how perspective made its styling, you are not allowed to put a space between these, im guesing its something like that

So try `.psc-Componenti\/DateTime\/text.ia_dateTimeInputComponent`

btw if you are gonna use a lot of these styles i suggest you take a look at the advanced stylesheet

> **[Style Classes | Ignition User Manual](https://docs.inductiveautomation.com/docs/8.1/ignition-modules/perspective/styles/style-classes#enabling-the-advanced-stylesheet)**
>
> A Style Class is a group of Style settings that are saved together. Style Classes can be applied to multiple components to provide consistency in design. A Style Class enables you to define style elements in one place, and then quickly apply that...

---

<div class="post-metadata">

**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\
**Post date:** [June 19, 2024, 3:16pm UTC](https://forum.inductiveautomation.com/t/custom-style-on-specific-component-is-not-working/92082/7 "2024-06-19T15:16:16Z")

</div>

Thanks again @victordcq that was the problem, this is crazy because I'm using this

```python
} .psc-Componenti\/AlarmStatusTable\/checkbox_acknowledge .ia_checkbox__icon--useColor { fill: var(--neutral-30); } {

```

and is working with the space.

Thanks for the link, I'll study it as soon as possible if this is the best option to move on

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [June 20, 2024, 8:21am UTC](https://forum.inductiveautomation.com/t/custom-style-on-specific-component-is-not-working/92082/8 "2024-06-20T08:21:08Z")

</div>

It depends on how the html is made. A space means its on an element **below**

example:

```python
<div class=".psc-Componenti\/AlarmStatusTable\/checkbox_acknowledge">
<span class=".ia_checkbox__icon--useColor">
...

```

While without a space is if its on the same level

```python
<input class=".psc-Componenti\/DateTime\/text .ia_dateTimeInputComponent">
...

```

You can only know what the perspective component uses by inspecting the generated html,