# New Stylesheet resource **URL:** \ **Category:** Ignition Early Access\ **Tags:** ignition81, perspective\ **Created:** [October 4, 2022, 1:48am UTC](https://forum.inductiveautomation.com/t/new-stylesheet-resource/64787 "2022-10-04T01:48:35Z")\ **Posts on this page:** 20\ **Page:** 1
**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:** [October 4, 2022, 1:48am UTC](https://forum.inductiveautomation.com/t/new-stylesheet-resource/64787/1 "2022-10-04T01:48:35Z")
Starting with the 10/4/2022 Nightly (8.1.22) build, users will be able to modify a new styling resource: _stylesheet.css_ This new resource is considered an advanced feature and will not be in place by default. To place the resource, expand the `Perspective` node of the Project Browser, right-click the `Styles` node, and select "Enable Advanced Stylesheet". ![EnableStylesheet](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/5/853a04ad8239f49738a047f8ed16dc4b6872427f.png) Once in place, the stylesheet allows for inserting CSS just as you would in any normal CSS file. The rules defined in this resource are inserted into the Perspective project in-between the theme files of the Gateway and the Named Styles of the project, creating the following hierarchy: `Theming > Stylesheet > Named Styles > Inline Props`. ![CSSEditorFlavoring](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/7/871a0870e9af6ae162d33d37723424af499b25d5.png) Note that this resource is scoped only to the project it resides in - though it is supported during project inheritance - whereas the Theming files are Gateway-scoped. This allows for much finer tuning of styling for an individual project. To disable this advanced feature, delete the resource from within the `Styles` directory. **Support:** While support is available for questions in regard to functionality within Perspective, is is expected that anyone using this resource have extensive background in working with CSS; support is unlikely to be able to assist in troubleshooting why CSS rules defined in this resource are or are not being applied within your project. ---
**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:** [October 4, 2022, 1:59am UTC](https://forum.inductiveautomation.com/t/new-stylesheet-resource/64787/2 "2022-10-04T01:59:05Z")
Pinned on October 4, 2022, 1:59am UTC ---
**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\ **Post date:** [October 4, 2022, 2:32am UTC](https://forum.inductiveautomation.com/t/new-stylesheet-resource/64787/3 "2022-10-04T02:32:27Z")
@nader.chinichian and @victordcq this feature is calling y’all’s names ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [October 4, 2022, 4:19am UTC](https://forum.inductiveautomation.com/t/new-stylesheet-resource/64787/4 "2022-10-04T04:19:14Z")
> [@cmallonee](#): > > resource Perfect. Does the editor support auto-complete CSS syntax too? ---
**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:** [October 4, 2022, 4:34am UTC](https://forum.inductiveautomation.com/t/new-stylesheet-resource/64787/5 "2022-10-04T04:34:14Z")
> [@nader.chinichian](#): > > Does the editor support auto-complete CSS syntax too? No. For all intents and purposes it is currently just a text file which has CSS flavoring for visual assistance. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [October 4, 2022, 6:08am UTC](https://forum.inductiveautomation.com/t/new-stylesheet-resource/64787/6 "2022-10-04T06:08:17Z")
Great! 😃 ---
**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:** [October 4, 2022, 11:06am UTC](https://forum.inductiveautomation.com/t/new-stylesheet-resource/64787/7 "2022-10-04T11:06:00Z")
🥳 ---
**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\ **Post date:** [October 4, 2022, 12:32pm UTC](https://forum.inductiveautomation.com/t/new-stylesheet-resource/64787/8 "2022-10-04T12:32:05Z")
Fantastic 🤯 ---
**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\ **Post date:** [October 4, 2022, 1:50pm UTC](https://forum.inductiveautomation.com/t/new-stylesheet-resource/64787/9 "2022-10-04T13:50:45Z")
Amazing! Although I was getting pretty good at using @victordcq injection trick and/or adding my own CSS files. This is going to save so much time and it'll be the single place to look if I need to have custom CSS 🙏 ---
**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\ **Post date:** [October 4, 2022, 1:54pm UTC](https://forum.inductiveautomation.com/t/new-stylesheet-resource/64787/10 "2022-10-04T13:54:16Z")
This feature puts the advanced CSS development in your project backup which makes future support a lot easier. I love the recent embedded SVG improvements and this CSS improvement for that reason. I like a recovery plan that is essentially restoring the backup vs needing to restore a system image or rebuild a bunch of custom backend stuff. ---
**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\ **Post date:** [October 5, 2022, 5:21pm UTC](https://forum.inductiveautomation.com/t/new-stylesheet-resource/64787/11 "2022-10-05T17:21:03Z")
Slightly disappointed it wasn't called `Chad mode` from the right-click menu @kgamble /s ---
**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\ **Post date:** [October 5, 2022, 5:28pm UTC](https://forum.inductiveautomation.com/t/new-stylesheet-resource/64787/12 "2022-10-05T17:28:33Z")
> [@YF129701](#): > > Slightly disappointed it wasn't called `Chad mode` Really this was a huge missed opportunity by IA... I hope at least in a developer comment somewhere under the hood in Java(Kotlin) it has an homage to the original idea. We can probably blame @paul-griffith 😉 > [@\[FEATURE\] Perspective Style Class Enhancements](https://forum.inductiveautomation.com/t/feature-perspective-style-class-enhancements/60810): > > I have noticed that more and more frequently, when you want to do any kind of intermediate-level css without using theming than you have to escape the style class with what feels like SQL injection with something like }.psc-MyStyleClass svg { background-color: blue;}{ in the backgroundImage prop. i.e. the following (Note anything by @victordcq, @nader.chinichian or @pascal.fragnoud): The question is, is there a plan to improve this experience? I feel like style classes are a bit watere… ---
**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\ **Post date:** [October 7, 2022, 1:46pm UTC](https://forum.inductiveautomation.com/t/new-stylesheet-resource/64787/13 "2022-10-07T13:46:17Z")
Chad mode would have had a name collision with my style class. ---
**Author:** ![Sam\_Corbett](https://avatars.discourse-cdn.com/v4/letter/s/85f322/32.png) [@Sam\_Corbett](https://forum.inductiveautomation.com/u/Sam_Corbett)\ **Post date:** [October 14, 2022, 3:17am UTC](https://forum.inductiveautomation.com/t/new-stylesheet-resource/64787/14 "2022-10-14T03:17:37Z")
I've just tried to use this new resource (Great idea by the way!), but have noticed that the classes are automatically prefixed with "psc-", just as the inbuilt styles would be. See below. Easily worked around by changing the naming in the advanced css though. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/2/620f5c8b7e587a8b9892403d0bfd23751e6bfb76.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/b/fbb02fc52f2e8e8cd21bb6f98e6b2d81f00d55c6.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/a/4ac8502e7b70a94a4d54333ebc286c91022bfba9.png) ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [October 14, 2022, 6:42am UTC](https://forum.inductiveautomation.com/t/new-stylesheet-resource/64787/15 "2022-10-14T06:42:56Z")
Do **not** use dots in your class names. A dot is a css selector, do not use it for naming! ---
**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:** [October 14, 2022, 3:03pm UTC](https://forum.inductiveautomation.com/t/new-stylesheet-resource/64787/16 "2022-10-14T15:03:09Z")
We do everything we can to prevent you from naming your Style Classes in an invalid way. ![Screen Shot 2022-10-14 at 7.59.13 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/a/8afbdff9607a49a4e3bb3f2853ebab55045518e8.png) Please note that all **P** erspective **S** tyle **C** lasses are prefixed with `psc-` before use to prevent you from overwriting our built-in styles accidentally. If you create a Style Class of `device-spinner`, you should attach that Style Class to components with the `device-spinner` name, but your advanced stylesheet rule should target `.psc-device-spinner`. ---
**Author:** ![Sam\_Corbett](https://avatars.discourse-cdn.com/v4/letter/s/85f322/32.png) [@Sam\_Corbett](https://forum.inductiveautomation.com/u/Sam_Corbett)\ **Post date:** [October 16, 2022, 11:34pm UTC](https://forum.inductiveautomation.com/t/new-stylesheet-resource/64787/17 "2022-10-16T23:34:22Z")
Okay, understood. That's actually what I have and it works fine, just was not clear to me as I'm still new to Perspective (coming from Citect). I actually didn't explicitly create a style class called `device-spinner` as you have screen shot, as that seemed redundant for my purpose. The first picture I attached was a typo in my example of what _doesn't_ work, I intended to put `device-spinner` without the `.` as an example. I suppose what I was trying to get across was that it wasn't clear to a user such as myself that when you create a new class selector you must prefix it with `psc-` because in the background Perspective is tacking it on, particularly when looking at your screenshot here > [@cmallonee](#): > > CSSEditorFlavoring669×731 28.1 KB So for an example of what works for anyone else attempting to use this handy new feature: Class selector inside Advanced Style sheet: `.psc-device-spinner`, because psc- prefixed by Perspective. Class applied to element: `device-spinner`, no prefix. ---
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [December 16, 2022, 8:01pm UTC](https://forum.inductiveautomation.com/t/new-stylesheet-resource/64787/19 "2022-12-16T20:01:37Z")
> [@cmallonee](#): > > Note that this resource is scoped only to the project it resides in - though it is supported during project inheritance - whereas the Theming files are Gateway-scoped. When using this in an inheritable project I noticed there is no way to override the resource or open read-only. Just wondering if this is something that should be added? ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [December 20, 2022, 3:11pm UTC](https://forum.inductiveautomation.com/t/new-stylesheet-resource/64787/20 "2022-12-20T15:11:53Z")
For me, it is a bug. I think it should be one of the exceptional resources which should not be inherited, as each project needs to have its own CSS classes. ---
**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:** [December 20, 2022, 3:45pm UTC](https://forum.inductiveautomation.com/t/new-stylesheet-resource/64787/21 "2022-12-20T15:45:34Z")
Yes, it's a bug, and we already have a fix in development. I can't guarantee 8.1.24 because of the holidays, but it'll be in soon. [Next page](https://forum.inductiveautomation.com/t/new-stylesheet-resource/64787.md?page=2)