# Perspective style override

**URL:** <https://forum.inductiveautomation.com/t/perspective-style-override/57994>\
**Category:** Ignition\
**Tags:** perspective, ignition81\
**Created:** [April 4, 2022, 2:10pm UTC](https://forum.inductiveautomation.com/t/perspective-style-override/57994 "2022-04-04T14:10:57Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [April 4, 2022, 2:10pm UTC](https://forum.inductiveautomation.com/t/perspective-style-override/57994/1 "2022-04-04T14:10:57Z")

</div>

I’m attempting to create an alarm priority/severity border, which is a view made up of an indicator (see first photo - priority 1-4) and a border.

![2](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/0/202524179f3e7f5e026bde3484765971a4078843.png)

This is what I have so far:

![1](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/9/29862e7ef22e590872a2da75e30697bfeef1f2e1.png)

I want to flash/animate when the alarm in unacknowledged and be static for acknowledged. So, I thought it would be best to use one style for both indicator and border. The indicator is a fill and the border is a stroke. If I use one style then the border will fill in. Is there a way to override or prevent a style from working on a property? Or is there a better way to do this? I don’t like using separate styles as there is a potential for the animation(s) to be out of sync.

Suggestions?

---

<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:** [April 4, 2022, 2:19pm UTC](https://forum.inductiveautomation.com/t/perspective-style-override/57994/2 "2022-04-04T14:19:18Z")

</div>

can you show the styles you made? (formated with `</>`)

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [April 4, 2022, 2:39pm UTC](https://forum.inductiveautomation.com/t/perspective-style-override/57994/3 "2022-04-04T14:39:47Z")

</div>

Sure, right now I have separate styles for fill and static…

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

Fill style

```auto
{
  "base": {
    "animation": {
      "direction": "normal",
      "timingFunction": "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
      "keyframes": {
        "0%": {
          "fill": "#FF0000"
        },
        "100%": {
          "fill": "#808080"
        }
      }
    }
  }
}

```

Stroke style

```auto
{
  "base": {
    "animation": {
      "direction": "normal",
      "timingFunction": "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
      "keyframes": {
        "0%": {
          "stroke": "#FF0000"
        },
        "100%": {
          "stroke": "#808080"
        }
      }
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [April 4, 2022, 2:47pm UTC](https://forum.inductiveautomation.com/t/perspective-style-override/57994/4 "2022-04-04T14:47:41Z")

</div>

Not relevant to the question you’re directly asking, but this is something we’re planning to add as a first-party feature (eventually):

> **[Alarm Priority Box | Voters | Inductive Automation](https://inductiveautomation.canny.io/ignition-features-and-ideas/p/alarm-priority-box)**

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [April 4, 2022, 2:49pm UTC](https://forum.inductiveautomation.com/t/perspective-style-override/57994/5 "2022-04-04T14:49:58Z")

</div>

@paul-griffith Can you give me a date on a release?

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [April 4, 2022, 3:42pm UTC](https://forum.inductiveautomation.com/t/perspective-style-override/57994/6 "2022-04-04T15:42:00Z")

</div>

No. We don’t ‘waterfall’ features into particular releases. We work on things as they come up, and they go into the next release when it’s ready. (Outside of a few major things that _have_ to go into the next major version for compatibility reasons).

Something like this ‘alarm priority container’ _could_ happen in basically any release. As of right now, it’s not going to happen anytime _soon_ (I wouldn’t rely on it coming out within six months) but that’s just a general estimate.

---

<div class="post-metadata">

**Author:** ![swolnisty](https://avatars.discourse-cdn.com/v4/letter/s/7bcc69/32.png) [@swolnisty](https://forum.inductiveautomation.com/u/swolnisty)\
**Post date:** [April 4, 2022, 5:39pm UTC](https://forum.inductiveautomation.com/t/perspective-style-override/57994/7 "2022-04-04T17:39:47Z")

</div>

Can you not just manually override the fill attribute within the border object’s view and set it to transparent, or is there something more complex here I am not quite grasping?

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

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [April 4, 2022, 5:51pm UTC](https://forum.inductiveautomation.com/t/perspective-style-override/57994/8 "2022-04-04T17:51:11Z")

</div>

That doesn’t work, at least for me. The style seems to have priority over the property. Which I would assume is by design.

---

<div class="post-metadata">

**Author:** ![swolnisty](https://avatars.discourse-cdn.com/v4/letter/s/7bcc69/32.png) [@swolnisty](https://forum.inductiveautomation.com/u/swolnisty)\
**Post date:** [April 4, 2022, 5:57pm UTC](https://forum.inductiveautomation.com/t/perspective-style-override/57994/9 "2022-04-04T17:57:02Z")

</div>

Strange, my own test on an 8.1.9 gateway seems to allow properties defined in the style object within the view to override the properties from the style class.

What about creating a separate style class that only has its fill property set to whichever value you’d like? That way you could assign your alarm style class and the extra fill style class both to your border object. Depending on which version of Ignition you’re using, you may need to play around with the naming of this style class. I believe older versions of Ignition 8 would load style classes in the order of their paths, alphabetically, rather than in the order in which they are listed in the style.classes property.

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [April 4, 2022, 6:14pm UTC](https://forum.inductiveautomation.com/t/perspective-style-override/57994/10 "2022-04-04T18:14:09Z")

</div>

My classes are bound, perhaps that is the difference. I will play around with this more. Thanks for the help.

---

<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:** [April 5, 2022, 7:17am UTC](https://forum.inductiveautomation.com/t/perspective-style-override/57994/11 "2022-04-05T07:17:55Z")

</div>

adding `!important` after a style makes it overrule anything  
`"fill": "#FF0000 !important"`

idk if that is of any use here tho,  
the styleclasses dont show me enough, could you also show me where you use them?  
an empty view with the component and styles attached would be ideal

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [March 4, 2023, 8:58pm UTC](https://forum.inductiveautomation.com/t/perspective-style-override/57994/12 "2023-03-04T20:58:10Z")

</div>

I know it's been awhile, but I did finally get some more details on why I wasn't able to get an override to work. Attached is a simple example, two styles and one view. The view has two labels, both look at the different styles. One style uses animation. It appears that when using animation in a style, it no longer honors overrides. The label that looks at the style without animation allows the override. Using `!important` doesn't seem to make a difference.

Two questions, is this considered a bug or normal and if normal are there any workarounds?

I'm on 8.1.25.  
[OverrideTest.zip](https://forum.inductiveautomation.com/uploads/short-url/asUlezlBj8xLbQOP6SK18FDwU9U.zip) (5.4 KB)

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [March 8, 2023, 7:00pm UTC](https://forum.inductiveautomation.com/t/perspective-style-override/57994/13 "2023-03-08T19:00:26Z")

</div>

I submitted a ticket, 74073. The initial response from IA is as follows:

_I did identify why the animation background is overriding the individual style class. This occurs because animation in CSS is it's own class and not a direct style change style. this means that it is running the background color and the animation colors at the same time, and the animation ends up displaying on top. I am currently following up with my team to see if there is anything we can do on our end to get around this._

My question, has anyone found a responsible workaround, other than creating a bunch of separate classes?

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [March 10, 2023, 3:00pm UTC](https://forum.inductiveautomation.com/t/perspective-style-override/57994/14 "2023-03-10T15:00:11Z")

</div>

IA responded that style overrides are not possible when using animation and that this behavior will not change. I will mark this as a solution.
