# Change Header Color for Alarm Status table in Perspective

**URL:** <https://forum.inductiveautomation.com/t/change-header-color-for-alarm-status-table-in-perspective/73511>\
**Category:** General Discussion\
**Tags:** perspective\
**Created:** [May 10, 2023, 7:11am UTC](https://forum.inductiveautomation.com/t/change-header-color-for-alarm-status-table-in-perspective/73511 "2023-05-10T07:11:15Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![Senthoor\_Mani\_M](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@Senthoor\_Mani\_M](https://forum.inductiveautomation.com/u/Senthoor_Mani_M)\
**Post date:** [May 10, 2023, 7:11am UTC](https://forum.inductiveautomation.com/t/change-header-color-for-alarm-status-table-in-perspective/73511/1 "2023-05-10T07:11:15Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/e/ee638d962c03b21b487b47439c63f80ec005138a.png)  
i have tried to change the header colour but i can't able to change.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [May 10, 2023, 8:41am UTC](https://forum.inductiveautomation.com/t/change-header-color-for-alarm-status-table-in-perspective/73511/2 "2023-05-10T08:41:49Z")

</div>

You need to change the `props.headerStyle` to affect the header style

---

<div class="post-metadata">

**Author:** ![Senthoor\_Mani\_M](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@Senthoor\_Mani\_M](https://forum.inductiveautomation.com/u/Senthoor_Mani_M)\
**Post date:** [May 10, 2023, 10:51am UTC](https://forum.inductiveautomation.com/t/change-header-color-for-alarm-status-table-in-perspective/73511/3 "2023-05-10T10:51:36Z")

</div>

Thank you for your reply, Alarm Status table haven't headerStyle property.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [May 10, 2023, 10:53am UTC](https://forum.inductiveautomation.com/t/change-header-color-for-alarm-status-table-in-perspective/73511/4 "2023-05-10T10:53:56Z")

</div>

Oh, whoops! I must have just seen Table and gone with that 😬

Edit:  
You're most likely going to have to change it with the advanced style sheet by referring to the page in your browser dev tools to find out which css selector you need to override

---

<div class="post-metadata">

**Author:** ![Arnaud\_Declerck](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/arnaud_declerck/32/44872_2.png) [@Arnaud\_Declerck](https://forum.inductiveautomation.com/u/Arnaud_Declerck)\
**Post date:** [May 10, 2023, 4:15pm UTC](https://forum.inductiveautomation.com/t/change-header-color-for-alarm-status-table-in-perspective/73511/5 "2023-05-10T16:15:38Z")

</div>

Hi @Senthoor_Mani_M.

under the Meta data of your alarm status object create a domId with the value of your choice  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/f/2f76b3f95f3669f723d383422b13c81d7d17f845.png)

Under Styles/stylesheet.css

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/1/71df03a60c171018816039576a917873dcde373f.png)  
enter the following code

```auto
#alarmTable .ia_table__headContainer{
  background-color:black;
}

```

Just change the #alarmTable with the domId value you use (always with an # first).  
Then save your project and the modification should be applied to all alarm status table with the same domId.  
Be aware that the advanced style sheet is available on gateway 8.1.22 and after.  
To activate it right click on the styles folder and Enable advance stylesheet.  
Fyi it's the same for an alarm journal table.

Regards  
Arnaud

---

<div class="post-metadata">

**Author:** ![Senthoor\_Mani\_M](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@Senthoor\_Mani\_M](https://forum.inductiveautomation.com/u/Senthoor_Mani_M)\
**Post date:** [May 11, 2023, 10:46am UTC](https://forum.inductiveautomation.com/t/change-header-color-for-alarm-status-table-in-perspective/73511/6 "2023-05-11T10:46:35Z")

</div>

@Arnaud_Declerck ,  
Thank You for your Answer, it's working.

---

<div class="post-metadata">

**Author:** ![Arnaud\_Declerck](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/arnaud_declerck/32/44872_2.png) [@Arnaud\_Declerck](https://forum.inductiveautomation.com/u/Arnaud_Declerck)\
**Post date:** [May 11, 2023, 12:06pm UTC](https://forum.inductiveautomation.com/t/change-header-color-for-alarm-status-table-in-perspective/73511/7 "2023-05-11T12:06:19Z")

</div>

@Senthoor_Mani_M,

Glad it helps. Don't forget to mark it as solution so it's easier to find if someone has the same problem.  
Regards

---

<div class="post-metadata">

**Author:** ![chaoliang](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@chaoliang](https://forum.inductiveautomation.com/u/chaoliang)\
**Post date:** [September 18, 2023, 1:30am UTC](https://forum.inductiveautomation.com/t/change-header-color-for-alarm-status-table-in-perspective/73511/8 "2023-09-18T01:30:14Z")

</div>

I was looking for a solution just to change one particular table, instead of overall change to all table.

Your solution works perfectly.

---

<div class="post-metadata">

**Author:** ![richard\_hamilton](https://avatars.discourse-cdn.com/v4/letter/r/a9a28c/32.png) [@richard\_hamilton](https://forum.inductiveautomation.com/u/richard_hamilton)\
**Post date:** [January 30, 2024, 7:35am UTC](https://forum.inductiveautomation.com/t/change-header-color-for-alarm-status-table-in-perspective/73511/9 "2024-01-30T07:35:55Z")

</div>

Hi, I was hoping for some help, I have followed the instructions above but can not get my Alarm table to change its colour.

The only instruction I have not been able to do is "To activate it right click on the styles folder and Enable advance stylesheet."

When I right click I do not have this option?

Any one any ideas, I am using version 8.1.35

Regards Richard

---

<div class="post-metadata">

**Author:** ![Arnaud\_Declerck](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/arnaud_declerck/32/44872_2.png) [@Arnaud\_Declerck](https://forum.inductiveautomation.com/u/Arnaud_Declerck)\
**Post date:** [January 30, 2024, 8:02am UTC](https://forum.inductiveautomation.com/t/change-header-color-for-alarm-status-table-in-perspective/73511/10 "2024-01-30T08:02:55Z")

</div>

hi @richard_hamilton,

Could is be that stylesheet is already enabled?

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/1/71c73b96168977be56f4ab688cd314b9f722bf8c.png)

regards

---

<div class="post-metadata">

**Author:** ![richard\_hamilton](https://avatars.discourse-cdn.com/v4/letter/r/a9a28c/32.png) [@richard\_hamilton](https://forum.inductiveautomation.com/u/richard_hamilton)\
**Post date:** [January 30, 2024, 8:08am UTC](https://forum.inductiveautomation.com/t/change-header-color-for-alarm-status-table-in-perspective/73511/11 "2024-01-30T08:08:02Z")

</div>

Ah, yes it is. Thanks Arnaud.

I wonder why the header of the table is not changing colour then...

Richard

---

<div class="post-metadata">

**Author:** ![Arnaud\_Declerck](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/arnaud_declerck/32/44872_2.png) [@Arnaud\_Declerck](https://forum.inductiveautomation.com/u/Arnaud_Declerck)\
**Post date:** [January 30, 2024, 8:36am UTC](https://forum.inductiveautomation.com/t/change-header-color-for-alarm-status-table-in-perspective/73511/12 "2024-01-30T08:36:13Z")

</div>

have you save your project after copy the following code in the stylesheet?

```auto
#alarmTable .ia_table__headContainer{
  background-color:black;
}

```

is the domid on your table set to alarmTable?

Regards

---

<div class="post-metadata">

**Author:** ![richard\_hamilton](https://avatars.discourse-cdn.com/v4/letter/r/a9a28c/32.png) [@richard\_hamilton](https://forum.inductiveautomation.com/u/richard_hamilton)\
**Post date:** [January 30, 2024, 8:55am UTC](https://forum.inductiveautomation.com/t/change-header-color-for-alarm-status-table-in-perspective/73511/13 "2024-01-30T08:55:04Z")

</div>

Yes Arnaud I have,

I have the table looking like this

 ![table](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/5/f590dc05b384caa3a699650c6e1d5574d637ad16.png)

meta properties are

![table1](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/2/12136f48ef82c0e721e282abd6f058a2017993a2.png)

and the css file is

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

Just unable to get the header to change colour.

Richard

---

<div class="post-metadata">

**Author:** ![richard\_hamilton](https://avatars.discourse-cdn.com/v4/letter/r/a9a28c/32.png) [@richard\_hamilton](https://forum.inductiveautomation.com/u/richard_hamilton)\
**Post date:** [January 30, 2024, 9:18am UTC](https://forum.inductiveautomation.com/t/change-header-color-for-alarm-status-table-in-perspective/73511/15 "2024-01-30T09:18:18Z")

</div>

I have just realised that i had enableHeader set to false.

When it was set to true the colour had changed...

So, it appears i am trying to change the toolbar, 🤦

Richard

---

<div class="post-metadata">

**Author:** ![Arnaud\_Declerck](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/arnaud_declerck/32/44872_2.png) [@Arnaud\_Declerck](https://forum.inductiveautomation.com/u/Arnaud_Declerck)\
**Post date:** [January 30, 2024, 9:19am UTC](https://forum.inductiveautomation.com/t/change-header-color-for-alarm-status-table-in-perspective/73511/16 "2024-01-30T09:19:37Z")

</div>

Ok this is not the header. This is the toolbar

```auto
#alarmTable .ia_alarmTableComponent__toolbar{
  background-color:black;
}

```

for the filter section

```auto
#alarmTable .alarmTable .alarmTableToolbar .alarmPreFiltersFilter{
  background-color:black;
}

```

---

<div class="post-metadata">

**Author:** ![richard\_hamilton](https://avatars.discourse-cdn.com/v4/letter/r/a9a28c/32.png) [@richard\_hamilton](https://forum.inductiveautomation.com/u/richard_hamilton)\
**Post date:** [January 30, 2024, 9:23am UTC](https://forum.inductiveautomation.com/t/change-header-color-for-alarm-status-table-in-perspective/73511/17 "2024-01-30T09:23:11Z")

</div>

That's it Arnaud,

thanks very much.

Richard
