# Perspective: How to use css theme classes on components?

**URL:** <https://forum.inductiveautomation.com/t/perspective-how-to-use-css-theme-classes-on-components/40152>\
**Category:** Ignition\
**Tags:** ignition80, perspective\
**Created:** [October 29, 2020, 9:51pm UTC](https://forum.inductiveautomation.com/t/perspective-how-to-use-css-theme-classes-on-components/40152 "2020-10-29T21:51:23Z")\
**Posts on this page:** 15\
**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:** [October 29, 2020, 9:51pm UTC](https://forum.inductiveautomation.com/t/perspective-how-to-use-css-theme-classes-on-components/40152/1 "2020-10-29T21:51:23Z")

</div>

I found this to implement tooltips:  
[https://www.w3schools.com/css/css\_tooltip.asp](https://www.w3schools.com/css/css_tooltip.asp)  
But I have no idea how to actually implement it in Perspective 🤔  
I can put it into my own theme file, but how do I actually apply it to a component in Perspective?

---

<div class="post-metadata">

**Author:** ![CTavakoli](https://avatars.discourse-cdn.com/v4/letter/c/278dde/32.png) [@CTavakoli](https://forum.inductiveautomation.com/u/CTavakoli)\
**Post date:** [November 4, 2020, 3:47pm UTC](https://forum.inductiveautomation.com/t/perspective-how-to-use-css-theme-classes-on-components/40152/2 "2020-11-04T15:47:10Z")

</div>

I have the same question, in general, after creating my own class in css (so far is fine), then how do I insert my own division in a view referring to that class ?

Thanks if someone could help.

perspective, css

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [November 4, 2020, 4:17pm UTC](https://forum.inductiveautomation.com/t/perspective-how-to-use-css-theme-classes-on-components/40152/3 "2020-11-04T16:17:33Z")

</div>

Instead of `.tooltip`, you should supply something like `.psc-MyStyleClass`. You should then attach a Perspective Style Class named "MyStyleClass" to the component which you would like to attach the tooltip to. There is no way to attach a css class of "tooltip" to a Perspective component, but you can attach Perspective Style Classes, which are then attached to the component with the pattern of `"psc-" + <style_class_name>`.

If you want to attach the tooltip to a component across ALL of your projects, you would ignore the "classes" in the example and instead place the _properties_ from that example into the component.

To be clear - we do NOT recommend this, and I would suspect that if you do this and then encounter an issue with the component that support would not help you. We build and test components with the properties you see in the .css files because those are the properties we feel the components need to behave properly across hundreds of scenarios.

> [@CTavakoli](#):
>
> how do I insert my own division in a view referring to that class ?

There is no way to insert your own `<div>` element, outside of the Markdown component (not that the Markdown component would do what you want). The only way to "apply" a class to a component is through using Perspective Style Classes.

---

<div class="post-metadata">

**Author:** ![CTavakoli](https://avatars.discourse-cdn.com/v4/letter/c/278dde/32.png) [@CTavakoli](https://forum.inductiveautomation.com/u/CTavakoli)\
**Post date:** [November 4, 2020, 5:52pm UTC](https://forum.inductiveautomation.com/t/perspective-how-to-use-css-theme-classes-on-components/40152/4 "2020-11-04T17:52:38Z")

</div>

Thanks for the reply,

Is it possible to add “animate” for individual SVG elements? I couldn’t make it work, if I can do that, then I can work around everything else I need,

---

<div class="post-metadata">

**Author:** ![rbabcock](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/rbabcock/32/13425_2.png) [@rbabcock](https://forum.inductiveautomation.com/u/rbabcock)\
**Post date:** [November 4, 2020, 7:28pm UTC](https://forum.inductiveautomation.com/t/perspective-how-to-use-css-theme-classes-on-components/40152/5 "2020-11-04T19:28:33Z")

</div>

I was able to get some animations working by doing as cmallonee suggested. Create or modify one of the CSS theme files and do something like:

```auto
.psc-SomeStyleName {
    animation: <some animation CSS here>;
}

```

Keyframes work, as well. Then you just type SomeStyleName into the style.classes property of your component and you're good to go.

These posts might explain it better than I can.

> [@CSS pseudo-elements](http://forum.inductiveautomation.com/t/css-pseudo-elements/34953):
>
> I’ve been playing around with some css animation For example I have a rectangle representing a device. There will be multiple of these in a room. If the device goes into an error state the box shadow flashes red. User can then click on the device to open a new view to interact with the device. I also have a settings icon come into screen if the user holds down the mouse. [CSS animation] The blinking box shadow comes from custom CSS @keyframes flashbox { 0% {box-shadow: 0px 0px 2px 1…

> [@Perspective base a style class on another style class](http://forum.inductiveautomation.com/t/perspective-base-a-style-class-on-another-style-class/37783):
>
> v8.0.15 Can I base a style class on another style class? Instead of having to either define the same styles twice or assign two styles to a component, I want to be able to add the styles defined in one class into another class, where the same precedence logic would apply as normal: if a particular style has two definitions (one from the linked class and one from the current class), then the current class’ version would take precedence. Or am I doing Perspective wrong? (really I’m just fumblin…

On another note, I was able to get a tooltip to show up with some static text, but I've been looking for a way to change it within the designer, maybe as a component property. I am learning as I go with CSS, so if anyone has any suggestions I would appreciate it.

---

<div class="post-metadata">

**Author:** ![CTavakoli](https://avatars.discourse-cdn.com/v4/letter/c/278dde/32.png) [@CTavakoli](https://forum.inductiveautomation.com/u/CTavakoli)\
**Post date:** [November 4, 2020, 8:05pm UTC](https://forum.inductiveautomation.com/t/perspective-how-to-use-css-theme-classes-on-components/40152/6 "2020-11-04T20:05:09Z")

</div>

Thank you,  
It did it, more or less the same way you indicated, I just set the animation on the object itself, instead of the css class, but the result is the same, thank you again for the tip, I try to upload a small demo video.

[https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/7/b72602439061bab5bd3cda814eaea5602599e8ce.mp4](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/7/b72602439061bab5bd3cda814eaea5602599e8ce.mp4)

---

<div class="post-metadata">

**Author:** ![rbabcock](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/rbabcock/32/13425_2.png) [@rbabcock](https://forum.inductiveautomation.com/u/rbabcock)\
**Post date:** [November 4, 2020, 8:21pm UTC](https://forum.inductiveautomation.com/t/perspective-how-to-use-css-theme-classes-on-components/40152/7 "2020-11-04T20:21:41Z")

</div>

I guess I did fail to mention that you could do it that way. I’ve been interested in making animations easily repeatable, tunnel vision gets us all, apparently!

---

<div class="post-metadata">

**Author:** ![John\_S1](https://avatars.discourse-cdn.com/v4/letter/j/c0e974/32.png) [@John\_S1](https://forum.inductiveautomation.com/u/John_S1)\
**Post date:** [February 10, 2023, 6:23am UTC](https://forum.inductiveautomation.com/t/perspective-how-to-use-css-theme-classes-on-components/40152/8 "2023-02-10T06:23:57Z")

</div>

Can you please tell me how you have achieved this? I'm a newbie in this, so please share some docs or video that I can refer to do the same.  
Thank you.

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [February 10, 2023, 4:03pm UTC](https://forum.inductiveautomation.com/t/perspective-how-to-use-css-theme-classes-on-components/40152/9 "2023-02-10T16:03:21Z")

</div>

Animations are quite a bit easier to manage if you're using 8.1.22 or newer. This thread deals with a simple rotation animation: [Style for (Icon) Rotation](https://forum.inductiveautomation.com/t/style-for-icon-rotation/69177)

---

<div class="post-metadata">

**Author:** ![John\_S1](https://avatars.discourse-cdn.com/v4/letter/j/c0e974/32.png) [@John\_S1](https://forum.inductiveautomation.com/u/John_S1)\
**Post date:** [February 13, 2023, 9:07am UTC](https://forum.inductiveautomation.com/t/perspective-how-to-use-css-theme-classes-on-components/40152/10 "2023-02-13T09:07:53Z")

</div>

Thank you very much,  
Do you have some reference on how I can create something like that, any document link from IA, As I Said I'm just a newbie and stared to explore more on this. Please guide me.

---

<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:** [February 13, 2023, 9:53am UTC](https://forum.inductiveautomation.com/t/perspective-how-to-use-css-theme-classes-on-components/40152/11 "2023-02-13T09:53:47Z")

</div>

I suggest you have a look at this exchange project, and then Google how to create a CSS animation for what you're trying to achieve. IA won't have anything explaining how to do this. While Perspective supports CSS, IA don't officially support CSS in terms of providing resources for using it, especially not more advanced concepts.

> **[Ignition Exchange](https://www.inductiveautomation.com/exchange/2155/overview)**
>
> Discover, share, and download community made Ignition resources in collaboration with your organization or the Ignition community.

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [February 13, 2023, 2:54pm UTC](https://forum.inductiveautomation.com/t/perspective-how-to-use-css-theme-classes-on-components/40152/12 "2023-02-13T14:54:08Z")

</div>

As @nminchin said, CSS is not an Inductive Automation concept or tool - it's an existing language users may use within our product. Much like Python or Java, we might have simple examples - but to learn the in-depth, advanced techniques you need to explore documentation of the language itself.

---

<div class="post-metadata">

**Author:** ![John\_S1](https://avatars.discourse-cdn.com/v4/letter/j/c0e974/32.png) [@John\_S1](https://forum.inductiveautomation.com/u/John_S1)\
**Post date:** [February 14, 2023, 3:28am UTC](https://forum.inductiveautomation.com/t/perspective-how-to-use-css-theme-classes-on-components/40152/13 "2023-02-14T03:28:40Z")

</div>

Thank you guys, I will have a look at it. Thanks for the support.

---

<div class="post-metadata">

**Author:** ![Elsayed\_Ragab](https://avatars.discourse-cdn.com/v4/letter/e/bcef8e/32.png) [@Elsayed\_Ragab](https://forum.inductiveautomation.com/u/Elsayed_Ragab)\
**Post date:** [September 12, 2024, 10:07am UTC](https://forum.inductiveautomation.com/t/perspective-how-to-use-css-theme-classes-on-components/40152/14 "2024-09-12T10:07:58Z")

</div>

How to import Animate.css library into ignition ?

---

<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:** [September 12, 2024, 10:23am UTC](https://forum.inductiveautomation.com/t/perspective-how-to-use-css-theme-classes-on-components/40152/15 "2024-09-12T10:23:19Z")

</div>

The problem with imported css libs is that perspective adds a prefix to classes.  
So you will have to edit all the css to acount for that

```python
%installDirectory%\data\modules\com.inductiveautomation.perspective\themes\README.md

```

You could add your css files here, follwing the instructions  
Than will have to edit the css to account for the `psc-` prefix from perspective. And than import them into your themes