# Color change on a label

**URL:** <https://forum.inductiveautomation.com/t/color-change-on-a-label/79165>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [September 14, 2023, 3:28pm UTC](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165 "2023-09-14T15:28:53Z")\
**Posts on this page:** 15\
**Page:** 2

<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:** [March 27, 2024, 1:34pm UTC](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165/21 "2024-03-27T13:34:36Z")

</div>

then just drop the` [datalabel]` bit? you dont even need stylesheets then, the basic classes should work too then

---

<div class="post-metadata">

**Author:** ![Zach\_Larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zach_larson/32/54388_2.png) [@Zach\_Larson](https://forum.inductiveautomation.com/u/Zach_Larson)\
**Post date:** [March 27, 2024, 1:36pm UTC](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165/22 "2024-03-27T13:36:34Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/9/69b3e714ddee81fc58c53055551ce7a8fb7e37db.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/6/7612840062b2c957780880506e97fca6c567f8e2.png)

This did not work.  
Do you know what is wrong?

The color is still black.  
I tried to set it so many ways to green or red, just something to detect it changed at all.

I want the text black.  
I want the background of the pills and the option menu to be changed.  
I tried white, green, and reds to just verify I can change it for now.

---

<div class="post-metadata">

**Author:** ![Zach\_Larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zach_larson/32/54388_2.png) [@Zach\_Larson](https://forum.inductiveautomation.com/u/Zach_Larson)\
**Post date:** [March 27, 2024, 1:44pm UTC](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165/23 "2024-03-27T13:44:39Z")

</div>

I don't know what you mean the basic classes should work.

I have not seen anything to color pill backgrounds or the options background.  
I thought for sure this would work:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/2/822113dfadfc720cc11f4e338859948f8e7242c7.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:** [March 27, 2024, 1:56pm UTC](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165/24 "2024-03-27T13:56:52Z")

</div>

You can not apply css injections inside the properties, this only works in styleclasses.

I think this is what you want

```auto
.psc-smartsheetsdropdowns .ia_dropdown__valuePill{	
	background-color:red;
}
.ia_dropdown__optionsModal:has(.psc-smartsheetsdropdowns){	
	background-color:red;
}

```

to be put in the stylesheet.css

---

<div class="post-metadata">

**Author:** ![Zach\_Larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zach_larson/32/54388_2.png) [@Zach\_Larson](https://forum.inductiveautomation.com/u/Zach_Larson)\
**Post date:** [March 27, 2024, 2:00pm UTC](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165/25 "2024-03-27T14:00:52Z")

</div>

Thank you Victor!

It works.

---

<div class="post-metadata">

**Author:** ![Zach\_Larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zach_larson/32/54388_2.png) [@Zach\_Larson](https://forum.inductiveautomation.com/u/Zach_Larson)\
**Post date:** [March 27, 2024, 3:59pm UTC](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165/26 "2024-03-27T15:59:50Z")

</div>

How do you handle the HTML when it has inherited from a div class?

The "no results found" is also colored different than I wanted I found out.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/1/c18355c7df64b3ff76dc2c73c562f647bb03433f.png)

.ia\_dropdown\_\_optionsModal is already assigned the correct coloring when the style is correct, so is the inheritance obstructing coloring?

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/1/01fccc459b828a8adc420f729b4b3d19c8e04866.png)

.ia\_dropdown\_\_optionsModal inherited from  
`div class="ia_componentModal component-modal-large-viewport component-modal-below hide-arrow iaDropdownCommon_options_modal ia_dropdown__optionsModal"`

* * *

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/a/4ab4bdc9f1c21a18dfebeca8757b6a2a2c64bd9a.png)  
Or maybe it is here.

---

<div class="post-metadata">

**Author:** ![mmadariaga](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mmadariaga/32/63201_2.png) [@mmadariaga](https://forum.inductiveautomation.com/u/mmadariaga)\
**Post date:** [July 1, 2024, 8:09am UTC](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165/28 "2024-07-01T08:09:24Z")

</div>

Let me know if I should open a new topic for this, but how could I achieve this if I want to color the dropdown with a key that's not in label nor value? I've got a query that returns value, label and priority. I want to color the dropdown with priority (1=green, 2=yellow, 3=orange).

---

<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:** [July 1, 2024, 9:47am UTC](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165/29 "2024-07-01T09:47:11Z")

</div>

No not with just css. But you could inject some js with a markdown component that dynamically generates styles to add the color based on label, with python logic that can use the priority to choose what label has what color.

Used it for something similar here

> [@\[FEATURE\] Add ability to add Icon and styling to Perspective Dropdown items](https://forum.inductiveautomation.com/t/feature-add-ability-to-add-icon-and-styling-to-perspective-dropdown-items/73823/2):
>
> put this in the markdown component binding like usual you'll ofc will have to add some python logic to append the style string based on the required labels in de dropdown (idk if everyone has these Builtin/icons or is it from my test project?) styles=".iaDropdownCommon\_options [data-label='YourLabel']:before { content: url('/system/images/Builtin/icons/16/check2.png'); }" code = """\<style\> """+styles+""" \"\>\</style\>""".replace("\n", "").replace("\t", "") return code

Are you familiar enough with css/ js injection to find it on your own? i can give a more fleshed out example tmw

---

<div class="post-metadata">

**Author:** ![mmadariaga](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mmadariaga/32/63201_2.png) [@mmadariaga](https://forum.inductiveautomation.com/u/mmadariaga)\
**Post date:** [July 1, 2024, 9:52am UTC](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165/30 "2024-07-01T09:52:15Z")

</div>

Just looked into it and I don't really know what to do, I'm having trouble understanding the markdown component. Now that I've seen the post you mention, I think it might look even better to add a colored circle next to each dropdown option based on the priority value.

And thanks yeah, no hurries!

---

<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:** [July 1, 2024, 2:09pm UTC](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165/31 "2024-07-01T14:09:25Z")

</div>

Ah here is another link from somone using my example and going into more details. He is using dates to create a "priority" color

This should be good enough:p  
Get a markdown component to paste in the "js" code in the srouce through a binding, dont forget to turn off the espaceHtml.

> [@Change color for each option based on some category for Perspective Dropdown Component](https://forum.inductiveautomation.com/t/change-color-for-each-option-based-on-some-category-for-perspective-dropdown-component/37952/6):
>
> I finally figured out how to do it. I used the method shared here: In their solution, they were able to set a specific style for each drop down option, adding a checkmark image to certain options. I just modified it to add on to the "styles" variable for each option, and set a background-color rather than adding content. [image] I'm using a list of options that I get from my database (it changes all the time). I loop through these options and check a time variable for the…

---

<div class="post-metadata">

**Author:** ![mmadariaga](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mmadariaga/32/63201_2.png) [@mmadariaga](https://forum.inductiveautomation.com/u/mmadariaga)\
**Post date:** [July 2, 2024, 7:41am UTC](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165/32 "2024-07-02T07:41:26Z")

</div>

Wow thanks! This is exactly what I needed. I adjusted the code to get the priorities and it works 🙂

```python
def transform(self, value, quality, timestamp):
	styles = ''
	selectedEventPriorities = value
	for event in selectedEventPriorities:
			machine = event["label"]
			priority = event["priority"]
			#Determine if event has been checked (green), missed (orange), or late for a check (yellow), or just awaiting a check (white).
			#event Back Color
			eventBackColor = 'transparent'
			if priority == 3:
				# ORANGE
				eventBackColor = '#F7901D'
			elif priority == 2:
				# YELLOW
				eventBackColor = '#FFF800'
			elif priority == 1:
				eventBackColor = '#AAFFA1'
			elif priority == 0:
				eventBackColor = 'transparent'
			
			styles = styles + ".iaDropdownCommon_options [data-label='"+ machine +"'] { background-color: " + eventBackColor + ";	}"
	
	code = """<style>
		"""+styles+"""
	\"></style>""".replace("\n", "").replace("\t", "")
	
	return code

```

---

<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:** [July 2, 2024, 7:46am UTC](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165/33 "2024-07-02T07:46:08Z")

</div>

not is you are not using a dropdownoption styleclass, than this will work on every dropdown in the view if they so happen to have the same label

---

<div class="post-metadata">

**Author:** ![mmadariaga](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mmadariaga/32/63201_2.png) [@mmadariaga](https://forum.inductiveautomation.com/u/mmadariaga)\
**Post date:** [July 2, 2024, 8:03am UTC](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165/34 "2024-07-02T08:03:53Z")

</div>

Ok so I'm missing something here, I just changed the code and it's still working even though I haven't specifed any class on the target dropdown component.

```python
def transform(self, value, quality, timestamp):
	styles = '.psc-priorityColorsOptions'
	selectedEventPriorities = value
	for event in selectedEventPriorities:
			machine = event["label"]
			priority = event["priority"]
			#Determine if event has been checked (green), missed (orange), or late for a check (yellow), or just awaiting a check (white).
			#event Back Color
			eventBackColor = 'transparent'
			if priority == 3:
				# ORANGE
				eventBackColor = '#F7901D'
			elif priority == 2:
				# YELLOW
				eventBackColor = '#FFF800'
			elif priority == 1:
				eventBackColor = '#AAFFA1'
			
			styles = styles + " [data-label='"+ machine +"'] { background-color: " + eventBackColor + ";	}"
	
	code = """<style>
		"""+styles+"""
	\"></style>""".replace("\n", "").replace("\t", "")
	
	return code

```

---

<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:** [July 2, 2024, 8:43am UTC](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165/35 "2024-07-02T08:43:35Z")

</div>

This is not the correct way to do it you are only giving the first style the class.  
Also it has to be defined in the dropdown styles and there should be no space

```python
classname = '.psc-priorityColorsOptions'
...
styles = styles + classname + "[data-label='"+ machine +"']...

```

---

<div class="post-metadata">

**Author:** ![mmadariaga](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mmadariaga/32/63201_2.png) [@mmadariaga](https://forum.inductiveautomation.com/u/mmadariaga)\
**Post date:** [July 2, 2024, 8:52am UTC](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165/36 "2024-07-02T08:52:16Z")

</div>

Thanks 🙂

[Previous page](https://forum.inductiveautomation.com/t/color-change-on-a-label/79165.md?page=1)