# 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:** 1\
**Showing post:** 5

<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.

---

_[View the full topic](https://forum.inductiveautomation.com/t/perspective-how-to-use-css-theme-classes-on-components/40152)._