# Change color of the text in ignition style

**URL:** <https://forum.inductiveautomation.com/t/change-color-of-the-text-in-ignition-style/72399>\
**Category:** General Discussion\
**Tags:** perspective\
**Created:** [April 13, 2023, 9:52am UTC](https://forum.inductiveautomation.com/t/change-color-of-the-text-in-ignition-style/72399 "2023-04-13T09:52:37Z")\
**Posts on this page:** 17\
**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:** [April 13, 2023, 9:52am UTC](https://forum.inductiveautomation.com/t/change-color-of-the-text-in-ignition-style/72399/1 "2023-04-13T09:52:37Z")

</div>

Ignition style, Base Style Background color and Element State (Hover) Background color is working but,  
same format in text color is not working, text is only follow the base style color the hover text color was not accepted or not working. please any suggestion for this........

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [April 13, 2023, 12:04pm UTC](https://forum.inductiveautomation.com/t/change-color-of-the-text-in-ignition-style/72399/2 "2023-04-13T12:04:07Z")

</div>

![Label hover](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/9/e9803f133cc635be7c329797898830cf9e35f031.gif)

The method shown in the documentation works for me on 8.1.26.  
Make sure you haven't got a `props.style` overriding the style class.

[https://docs.inductiveautomation.com/display/DOC81/How+to+Change+Style+on+Hover](https://docs.inductiveautomation.com/display/DOC81/How+to+Change+Style+on+Hover)

---

<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:** [April 17, 2023, 2:49am UTC](https://forum.inductiveautomation.com/t/change-color-of-the-text-in-ignition-style/72399/3 "2023-04-17T02:49:31Z")

</div>

Thank you for your information, but in this method background color only change the text color is not change, i need change the text color while mousehover method.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [April 17, 2023, 6:26am UTC](https://forum.inductiveautomation.com/t/change-color-of-the-text-in-ignition-style/72399/4 "2023-04-17T06:26:21Z")

</div>

Look again. The text color is changing from black to blue.

---

<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:** [April 17, 2023, 10:13am UTC](https://forum.inductiveautomation.com/t/change-color-of-the-text-in-ignition-style/72399/5 "2023-04-17T10:13:11Z")

</div>

Thank You For Your Response,

 ![Screenshot (77)](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/8/c8e0792bcfcf8f96e22649331ba603870ea399f3.png)  
 ![Screenshot (78)](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/0/9046aa4a08daea79a4d121575bebde4ef68ac384.png)

In this image, i am binding the style in the root style class,

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

In this method background color was change while use the mousehover, now i want also change the text color while use the mousehover.

note: i want change the whole text color, so i bind the style in the root style.

Give any solutions..,

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [April 17, 2023, 10:21am UTC](https://forum.inductiveautomation.com/t/change-color-of-the-text-in-ignition-style/72399/6 "2023-04-17T10:21:35Z")

</div>

1. What color do you want when not in hover?
2. What color have you specified for `color` in Base Style?
3. You have specified `#ffffff` for hover text color. Is that what you want?

Tip: Resize the windows to remove blank areas and crop the photos. 80% is not useful information.

---

<div class="post-metadata">

**Author:** ![JordanCClark](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jordancclark/32/83362_2.png) [@JordanCClark](https://forum.inductiveautomation.com/u/JordanCClark)\
**Post date:** [April 17, 2023, 10:27am UTC](https://forum.inductiveautomation.com/t/change-color-of-the-text-in-ignition-style/72399/7 "2023-04-17T10:27:43Z")

</div>

~~I don't think styles are inheritable. You would need to do the text by element.~~  
EDIT: Scratch that. Seems to work in 8.1.25...

[https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/d/4d5699d633bc81994493c54d29af8a245e400e11.mp4](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/d/4d5699d633bc81994493c54d29af8a245e400e11.mp4)

---

<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:** [April 17, 2023, 10:41am UTC](https://forum.inductiveautomation.com/t/change-color-of-the-text-in-ignition-style/72399/8 "2023-04-17T10:41:12Z")

</div>

![Screenshot (79)](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/5/152fbd6523f0f6fd2932ee93138b896ca1aee6cc.png)

---

<div class="post-metadata">

**Author:** ![JordanCClark](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jordancclark/32/83362_2.png) [@JordanCClark](https://forum.inductiveautomation.com/u/JordanCClark)\
**Post date:** [April 17, 2023, 10:50am UTC](https://forum.inductiveautomation.com/t/change-color-of-the-text-in-ignition-style/72399/9 "2023-04-17T10:50:33Z")

</div>

Are there any non-default style values on the labels? That would override the style on the container.

[https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/3/13ae4064579820083910897eb40fb0e7f947e156.mp4](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/3/13ae4064579820083910897eb40fb0e7f947e156.mp4)

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [April 17, 2023, 1:13pm UTC](https://forum.inductiveautomation.com/t/change-color-of-the-text-in-ignition-style/72399/10 "2023-04-17T13:13:47Z")

</div>

![Label hover background confusion](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/a/8a94bae66562760e46baf81256d4d14caa6753bc.png)

You seem to be applying the hover to the root container. You need to apply the style class to the labels.

If you want all labels to change font color when the root container has hover then that is a different problem.

* * *

Tip: Note how to arrange the windows and crop the view so that it is readable in the post.

---

<div class="post-metadata">

**Author:** ![JordanCClark](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jordancclark/32/83362_2.png) [@JordanCClark](https://forum.inductiveautomation.com/u/JordanCClark)\
**Post date:** [April 17, 2023, 2:08pm UTC](https://forum.inductiveautomation.com/t/change-color-of-the-text-in-ignition-style/72399/11 "2023-04-17T14:08:31Z")

</div>

My first post had the hover style on the container only. My second one had an overwitten value for the font color.

---

<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:** [April 18, 2023, 4:33am UTC](https://forum.inductiveautomation.com/t/change-color-of-the-text-in-ignition-style/72399/12 "2023-04-18T04:33:49Z")

</div>

Good,I want this type for many label components.

---

<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:** [April 18, 2023, 4:44am UTC](https://forum.inductiveautomation.com/t/change-color-of-the-text-in-ignition-style/72399/13 "2023-04-18T04:44:56Z")

</div>

Thanks, for your continuous reply, i need below one

#If you want all labels to change font color when the root container has hover then that is a different problem.

when the hover is apply to the root, the background color and text color should be changed.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [April 18, 2023, 6:17am UTC](https://forum.inductiveautomation.com/t/change-color-of-the-text-in-ignition-style/72399/14 "2023-04-18T06:17:54Z")

</div>

It wor  
 ![Hover font color](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/6/46fdd6065a980eda03be190082edaa233077a77d.gif)

It works without difficulty. Make sure that you have no `color` setting on your labels.

* * *

Tip: use `>` for quotations in your post, not `#`.

---

<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:** [April 18, 2023, 10:40am UTC](https://forum.inductiveautomation.com/t/change-color-of-the-text-in-ignition-style/72399/15 "2023-04-18T10:40:53Z")

</div>

Please post your style of the above this.,

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [April 18, 2023, 10:51am UTC](https://forum.inductiveautomation.com/t/change-color-of-the-text-in-ignition-style/72399/16 "2023-04-18T10:51:01Z")

</div>

- Create the style class:
  - Set Base Sytle Text color to whatever you want.
  - Set Element State [hover] color to whatever you want.

- Apply the class to the view root.
- **Make sure that all labels in the view have no other `style.color` settings and no classes set that affect label color.**

---

<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:** [April 18, 2023, 10:57am UTC](https://forum.inductiveautomation.com/t/change-color-of-the-text-in-ignition-style/72399/17 "2023-04-18T10:57:59Z")

</div>

Thanks a lot for your support..,Now it's working.
