# Changing background color of a single tab/button in sidebar

**URL:** <https://discourse.nodered.org/t/changing-background-color-of-a-single-tab-button-in-sidebar/56996>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [21 January 2022 07:34 UTC](https://discourse.nodered.org/t/changing-background-color-of-a-single-tab-button-in-sidebar/56996 "2022-01-21T07:34:29Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![nico25](https://avatars.discourse-cdn.com/v4/letter/n/d2c977/32.png) [@nico25](https://discourse.nodered.org/u/nico25)\
**Post date:** [21 January 2022 07:34 UTC](https://discourse.nodered.org/t/changing-background-color-of-a-single-tab-button-in-sidebar/56996/1 "2022-01-21T07:34:30Z")

</div>

I am trying to change the background color of a single tab/button in the sidebar.  
This tab is basically a disabled page, which just shows up, when the user is logged-in(visual feedback).  
It would be neat if I could manage to have it highlighted in green, when it´s visible.  
Since I mainly do PLC-Programming, I am not very good at CSS and could use some help here.

 ![screenshot2101](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/3/13dceb0b986d792b897e349794cfcd2e877c3343.png)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [21 January 2022 07:56 UTC](https://discourse.nodered.org/t/changing-background-color-of-a-single-tab-button-in-sidebar/56996/2 "2022-01-21T07:56:04Z")

</div>

Right click the button HTML & copy its CSS Selector

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/f/0fba104bbe0a008183ad21db9f74e5bc43aba09f.png)

then you can use that in a ui-template node to add styling

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/7/971492fb68d8c5d2a17d25c2df5fce03bc2d39bb.png)

Give that a go, pop back if you get stuck.

---

<div class="post-metadata">

**Author:** ![nico25](https://avatars.discourse-cdn.com/v4/letter/n/d2c977/32.png) [@nico25](https://discourse.nodered.org/u/nico25)\
**Post date:** [21 January 2022 09:49 UTC](https://discourse.nodered.org/t/changing-background-color-of-a-single-tab-button-in-sidebar/56996/3 "2022-01-21T09:49:03Z")

</div>

Thanks, that did the trick.

 ![grafik](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/1/f150a9e1470340fa6f80a31e58d1d758aa098b4a.png)

My online issue now is, that as soon as I log out, some tabs go invisible and the background color changes for the first entry of the list.

![grafik](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/3/f30f55271ed129ffef9c38424c3b074239ca49bb.png)

Is it possible to only operate on a specific entry in the list?  
Otherwise I would just have the button always displayed on first spot.

> Otherwise I would just have the button always displayed on first spot.

Edit: On a second thought, that is not gonna work. It would always be highlighted in green then.  
So I need a way control the execution of the ui-template

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [21 January 2022 10:00 UTC](https://discourse.nodered.org/t/changing-background-color-of-a-single-tab-button-in-sidebar/56996/4 "2022-01-21T10:00:32Z")

</div>

if your original issue is resolved, can you chose the relevant post and mark it as the solution please?

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [4 February 2022 10:00 UTC](https://discourse.nodered.org/t/changing-background-color-of-a-single-tab-button-in-sidebar/56996/5 "2022-02-04T10:00:47Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.