# Perspective Table Highlight styling - Change text colour?

**URL:** <https://forum.inductiveautomation.com/t/perspective-table-highlight-styling-change-text-colour/72620>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [April 19, 2023, 4:40am UTC](https://forum.inductiveautomation.com/t/perspective-table-highlight-styling-change-text-colour/72620 "2023-04-19T04:40:10Z")\
**Posts on this page:** 11\
**Page:** 1

<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:** [April 19, 2023, 4:40am UTC](https://forum.inductiveautomation.com/t/perspective-table-highlight-styling-change-text-colour/72620/1 "2023-04-19T04:40:10Z")

</div>

Can I change anything other than row background colour when the mouse hovers over table rows?

I want to change text colour to white instead of black. I want to avoid a coloured background since colours are used to indicate statuses of things, so I want a dark grey highlight with white text.

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

---

<div class="post-metadata">

**Author:** ![WillMT10](https://avatars.discourse-cdn.com/v4/letter/w/7feea3/32.png) [@WillMT10](https://forum.inductiveautomation.com/u/WillMT10)\
**Post date:** [April 19, 2023, 5:22am UTC](https://forum.inductiveautomation.com/t/perspective-table-highlight-styling-change-text-colour/72620/2 "2023-04-19T05:22:19Z")

</div>

Looks like you could add something along these lines to your stylesheet as an override:

```auto
.ia_tableComponent __body__ row--hovered {
	color: white;
}

```

---

<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:** [April 19, 2023, 5:24am UTC](https://forum.inductiveautomation.com/t/perspective-table-highlight-styling-change-text-colour/72620/3 "2023-04-19T05:24:12Z")

</div>

I actually found that and tried it, but my `props.data[x].<colname>` style is overwriting the text colour ☹ I opted for the easier option by simply using bolder font. It's not ideal

---

<div class="post-metadata">

**Author:** ![WillMT10](https://avatars.discourse-cdn.com/v4/letter/w/7feea3/32.png) [@WillMT10](https://forum.inductiveautomation.com/u/WillMT10)\
**Post date:** [April 19, 2023, 5:27am UTC](https://forum.inductiveautomation.com/t/perspective-table-highlight-styling-change-text-colour/72620/4 "2023-04-19T05:27:58Z")

</div>

Oh yuck...you're right. And `!important` doesn't appear to help either.

---

<div class="post-metadata">

**Author:** ![WillMT10](https://avatars.discourse-cdn.com/v4/letter/w/7feea3/32.png) [@WillMT10](https://forum.inductiveautomation.com/u/WillMT10)\
**Post date:** [April 19, 2023, 5:38am UTC](https://forum.inductiveautomation.com/t/perspective-table-highlight-styling-change-text-colour/72620/5 "2023-04-19T05:38:07Z")

</div>

Only solution I can think of is to use a style class to style the cell and then use a stylesheet rule to alter the cell style class whenever the row is hovered:

```auto
.ia_tableComponent __body__ row--hovered .psc-Cell_Style_Class {
	color: unset;
}

```

---

<div class="post-metadata">

**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\
**Post date:** [May 25, 2023, 6:10pm UTC](https://forum.inductiveautomation.com/t/perspective-table-highlight-styling-change-text-colour/72620/6 "2023-05-25T18:10:47Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/0/606a43f623c4e95d7a753724ce35195123691d65.png)

I am doing something wrong.  
When I hover, mine still changes colors.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/6/06d17a99d72ff6f18a5d3037103cc2fd09a8c08e.png)

* * *

update  
I turned off highlight.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/8/c8a8db782cec1c64dadd37269b773e07d3af231e.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:** [May 26, 2023, 6:53am UTC](https://forum.inductiveautomation.com/t/perspective-table-highlight-styling-change-text-colour/72620/7 "2023-05-26T06:53:43Z")

</div>

css injection does not work in properties, only in styleclasses

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [May 26, 2023, 7:15am UTC](https://forum.inductiveautomation.com/t/perspective-table-highlight-styling-change-text-colour/72620/8 "2023-05-26T07:15:40Z")

</div>

Then you can target the cell instead:

```css
.ia_tableComponent __body__ row--hovered .ia_table__cell{
	color: white;
}

```

---

<div class="post-metadata">

**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\
**Post date:** [May 26, 2023, 1:07pm UTC](https://forum.inductiveautomation.com/t/perspective-table-highlight-styling-change-text-colour/72620/9 "2023-05-26T13:07:18Z")

</div>

> [@victordcq](#):
>
> css injection does not work in properties, only in styleclasses

I don't know what this means.  
I think you mean not in background color, but instead in the background image area?  
Or not in body style, but in style at the bottom of the table component props?

I read about CSS, but struggle to understand CSS syntax, structure, and targeting.  
I thought that background color was part of a style class.  
So I looked up the post again, and I see it was in the background image.  
[Time Series chart xtrace font - #4 by victordcq](https://forum.inductiveautomation.com/t/time-series-chart-xtrace-font/55670/4)]

I really like this technique as the footprint is so small.  
I kind of hope that in future versions we might just have a spot there designated for placing CSS and that there might be some help there to identify the objects we want to target to make it easier for myself.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [May 26, 2023, 2:01pm UTC](https://forum.inductiveautomation.com/t/perspective-table-highlight-styling-change-text-colour/72620/10 "2023-05-26T14:01:15Z")

</div>

> [@zacharyw.larson](#):
>
> I don't know what this means.

It means exactly what it says: You can't use css injection directly in the properties, only in style classes.

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

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

The css property name itself doesn't matter, as we're "closing" it anyway with `} {`

---

<div class="post-metadata">

**Author:** ![Tim\_Carlton](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tim_carlton/32/52835_2.png) [@Tim\_Carlton](https://forum.inductiveautomation.com/u/Tim_Carlton)\
**Post date:** [May 26, 2023, 2:01pm UTC](https://forum.inductiveautomation.com/t/perspective-table-highlight-styling-change-text-colour/72620/11 "2023-05-26T14:01:50Z")

</div>

CSS is a top-down design philosophy. It applies settings from the most specific (the actual element) to the most general (containers, body). Settings can be applied explicitly or based on a name or type match. More specific settings override less specific settings. A good design will have most of the settings done at a high level and will have very few element specific overrides.

CSS allows you to build a set of visual settings (color, background color, margin, padding, font, ...) and give it a name in the Styles part of the tree in the designer. You can then apply that style to all of the visual elements that should look like that in the _style_ property. The designer gives you a nice pick list for that.

You should prefer to use named styles anywhere possible.

Not everything that you will want to apply a style to has a _style_ property though. For those things you can override the individual element settings (e.g., _color_) that will only affect that particular element.  
Instead, you can add an override in the stylesheet.css that will affect all elements in the project that match the selector. In the stylesheet.css there are lots of options.

To find the appropriate selectors, use the developer tools in the browser and inspect the elements. You can change the values, add new settings, enable/disable in the browser tool until it looks like you want.

Note that "ia\_tableComponent\_\_body\_row" and "ia\_table\_\_cell" are named styles that Perspective has defined behind the scenes. They are part of a theme are designed to work with the selected theme. If you override them (or parts of them) in your stylesheet.css then you will have effectively broken (or suboptimized) the theme - it may look good in your currently selected theme but perhaps not in a different one (or a future one).

If you end up with a large number of explicit selectors in your stylesheet.css it is probably time to take a step back and refactor / abstract the visual design a bit.