# \[FEATURE\] Perspective Style Class Enhancements **URL:** \ **Category:** Ignition\ **Tags:** ignition81, perspective\ **Created:** [June 15, 2022, 9:52pm UTC](https://forum.inductiveautomation.com/t/feature-perspective-style-class-enhancements/60810 "2022-06-15T21:52:46Z")\ **Posts on this page:** 15\ **Page:** 1
**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:** [June 15, 2022, 9:52pm UTC](https://forum.inductiveautomation.com/t/feature-perspective-style-class-enhancements/60810/1 "2022-06-15T21:52:46Z")
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): > [@\[IGN-6700\] rotate icon on button](https://forum.inductiveautomation.com/t/bug-rotate-icon-on-button/60757/3): > > Thanks @victordcq! I figured this looked like a bug, but don't have a web background--need to spend some time wrapping my mind around CSS. We need dynamic rotation (using this in a view as template with rotation set in view parameter). I've already got it done with an icon overlaid, but am curious if there is a way to inject this transform directly in a property on the button so we can create it in an expression that takes the degrees from a parameter on the view? I tried a few variations unde… > [@Perspective: How can I hide a tab in a tab container?](https://forum.inductiveautomation.com/t/perspective-how-can-i-hide-a-tab-in-a-tab-container/44890/7): > > Hello, How can i hide a single tab in tab container based on condition. I have created 12 tab. As per view changes tab should have to hide. Thanks > [@How to create a gauge like this](https://forum.inductiveautomation.com/t/how-to-create-a-gauge-like-this/60715/10): > > If you need it to apply only to this particular slider, you can select the style class you’re making instead of the general slider element. You’ll need to prefix it with psc- though: } .psc-sliderSize .slider-mark-text { font-size: 30px !important;}{ > [@Set Text Focus On Perspective module](https://forum.inductiveautomation.com/t/set-text-focus-on-perspective-module/58789/4): > > You could ‘css hack’ it: Create a new style, call it highlight-text, then in one its field (for example the background image), paste this: }.psc-highlight-text::first-line { background-color: blue;}{ (replace blue by whatever color you need/want) Now, add the highlight-text class to your input field on your button’s actionPerformed event script to enable the effect, and remove it + delete the text when you get your new data. edit: You can also put that css bit, without the first and last bra… The question is, is there a plan to improve this experience? I feel like style classes are a bit watered down to help people that aren't very familiar with CSS, but in order to leverage them in the designer in any kind of capability past beginner it requires this trickery, or leaving the designer completely to go into theming. Maybe an "advanced" mode in the style class builder that just shows the css for the actual style class that will be created, that you can edit directly would be nice. I look forward to ideas or improvements that are already planned! An idea what it could look like with some level of syntax checking, similar to in script transforms: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/0/a07247b1e64c88c7812a85a11885f439caf425d7.jpeg) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/0/205f5274bc8fd505169ae5a4c19f67900a4f1657.jpeg) ---
**Author:** ![dhananjay\_vichare](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dhananjay_vichare/32/74712_2.png) [@dhananjay\_vichare](https://forum.inductiveautomation.com/u/dhananjay_vichare)\ **Post date:** [June 16, 2022, 6:08am UTC](https://forum.inductiveautomation.com/t/feature-perspective-style-class-enhancements/60810/2 "2022-06-16T06:08:12Z")
> [@kgamble](#): > > when you want to do any kind of intermediate-level css > [@Perspective table column format](https://forum.inductiveautomation.com/t/perspective-table-column-format/58918/15): > > Thank you for help Victor and Pascal. I am able to add style class and my both issues solved. I can see “Eng. unit” after value in same column and can sort the column clicking on column header. Thank you once again. Here it is another example. [kgamble](https://forum.inductiveautomation.com/u/kgamble) It will be very helpful. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [June 16, 2022, 6:17am UTC](https://forum.inductiveautomation.com/t/feature-perspective-style-class-enhancements/60810/3 "2022-06-16T06:17:09Z")
chad mode 🤣 > [@kgamble](#): > > ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/0/205f5274bc8fd505169ae5a4c19f67900a4f1657.jpeg) > > image1398×1406 119 KB When i first found out about this trick it was about a year ago, i believe they than said they werent going to do anything because css is to much to make something about. But maybe since they made its possible now, since more poeple seem to need it and since they recently also changed the ither script editor it might be possible now? ---
**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:** [June 16, 2022, 7:18am UTC](https://forum.inductiveautomation.com/t/feature-perspective-style-class-enhancements/60810/4 "2022-06-16T07:18:49Z")
That would be cool and useful. 👍 ---
**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\ **Post date:** [June 16, 2022, 11:21am UTC](https://forum.inductiveautomation.com/t/feature-perspective-style-class-enhancements/60810/5 "2022-06-16T11:21:21Z")
+1 yes please. Even for simple classes I find the existing style editor slow and tedious to use. - Instead of just remembering property names, you have to also remember where to find them in the many pages of the editor. - I feel like the “Applied Styles” pane is difficult to look at. Sure it looks “nicer” than raw style sheet, but I at least have difficulty processing it quickly. - It takes many clicks to change a single property (navigation, property selection, value entry). - It’s impossible to copy/paste to speed up repetitive tasks. - I understand and agree with the goal of making CSS easier for new users. But, eventually, even new users are going to have to lookup external CSS resources. And when they do, some mental gymnastics are required to map existing CSS examples/resources to Ignition because of the unique style editor. ---
**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:** [June 16, 2022, 7:30pm UTC](https://forum.inductiveautomation.com/t/feature-perspective-style-class-enhancements/60810/6 "2022-06-16T19:30:33Z")
It sounds like there isn’t anything currently planned, so I went ahead and created an ideas post for this. Please go upvote to show IA how valuable this is! > **[Style Class Direct Editing | Voters | Inductive Automation](https://inductiveautomation.canny.io/ignition-features-and-ideas/p/style-class-direct-editing)** ---
**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:** [June 16, 2022, 7:37pm UTC](https://forum.inductiveautomation.com/t/feature-perspective-style-class-enhancements/60810/7 "2022-06-16T19:37:36Z")
We have an existing ticket that’s sort of a sibling feature to the proposal here - a ‘stylesheet’ resource, per project, where you can enter arbitrary CSS declarations plain text. I think the ‘chad mode’ proposal here (😆) is _probably_ a non starter because of the difficulty of mapping to/from user entered styles and the built in editor (if you enter something by hand that we can’t parse when you deactivate ‘chad mode’, what happens?) - but I’m also not in charge of anything in Perspective, so an ideas post is definitely the way to go. ---
**Author:** ![zacht](https://avatars.discourse-cdn.com/v4/letter/z/ea5d25/32.png) [@zacht](https://forum.inductiveautomation.com/u/zacht)\ **Post date:** [June 16, 2022, 8:24pm UTC](https://forum.inductiveautomation.com/t/feature-perspective-style-class-enhancements/60810/8 "2022-06-16T20:24:29Z")
> [@paul-griffith](#): > > if you enter something by hand that we can’t parse when you deactivate ‘chad mode’, what happens? They are slightly different, but there's precedent for _either_ nice GUI configuration _or_ advanced configuration in plain text but not both. The same thing could be done here. The stylesheet resource might make this irrelevant though. From a button action script, for example: ```auto # This script was generated automatically by the navigation # script builder. You may modify this script, but if you do, # you will not be able to use the navigation builder to update # this script without overwriting your changes. ``` ---
**Author:** ![witman](https://avatars.discourse-cdn.com/v4/letter/w/d2c977/32.png) [@witman](https://forum.inductiveautomation.com/u/witman)\ **Post date:** [June 16, 2022, 8:28pm UTC](https://forum.inductiveautomation.com/t/feature-perspective-style-class-enhancements/60810/9 "2022-06-16T20:28:41Z")
> [@zacht](#): > > there’s precedent for _either_ nice GUI configuration _or_ advanced configuration in plain text but not both Yes, in fact that method--where you can use GUI and then switch to see plain text it created--is actually great for newbies figuring out how stuff works. At least I found it useful for the action scripts when first starting with Ignition. There's no need to go back from plain text to GUI. Same precedent as used in Vision action scripts would be perfect here IMNSHO. ---
**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:** [June 16, 2022, 8:55pm UTC](https://forum.inductiveautomation.com/t/feature-perspective-style-class-enhancements/60810/10 "2022-06-16T20:55:29Z")
> [@paul-griffith](#): > > a non starter because of the difficulty of mapping to/from user entered styles and the built in editor (if you enter something by hand that we can’t parse when you deactivate ‘chad mode’, what happens?) While I agree with the above mentioned comments about "This might not work in an automatic mode if you edit it", would you still need to put the `.psc-` in front of a theoretical available style sheet? Or would it also just be allowed to add regular classes as possible in the `style.classes` property? ---
**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:** [June 16, 2022, 9:12pm UTC](https://forum.inductiveautomation.com/t/feature-perspective-style-class-enhancements/60810/11 "2022-06-16T21:12:25Z")
The way things are currently implemented, to _use_ these manually authored classes you would have to use the `psc` prefix. We take whatever you put in the `style.classes` list and emit it to the rendered component with the prefix, so we’d have to figure out some way to bridge that across. It’s another one of the complications with the idea. ---
**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:** [June 16, 2022, 9:15pm UTC](https://forum.inductiveautomation.com/t/feature-perspective-style-class-enhancements/60810/12 "2022-06-16T21:15:07Z")
> [@paul-griffith](#): > > The way things are currently implemented, to _use_ these manually authored classes you would have to use the `psc` prefix. Without looking at the code, I will say it doesn't feel obvious why this is a requirement? Wether I name it `psc-bananas` or `bananas` I feel like it would just look at the property in the `view.json` and just add it as a class on the actual component? Unless its to keep the user from accidentally overriding built in classes? ---
**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:** [June 16, 2022, 9:29pm UTC](https://forum.inductiveautomation.com/t/feature-perspective-style-class-enhancements/60810/13 "2022-06-16T21:29:53Z")
I think that’s exactly why. Both for our own purposes, and indirectly (because we’re using third party libraries with their own components in various places) it’s “risky” to allow user stylesheets directly onto the page. The `psc` prefix is just some safety to ensure no weird interactions happen. ---
**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, 8:06pm UTC](https://forum.inductiveautomation.com/t/feature-perspective-style-class-enhancements/60810/14 "2022-10-04T20:06:17Z")
For those curious by the way, this was essentially implemented, just not exactly how I asked: > [@New Stylesheet resource](https://forum.inductiveautomation.com/t/new-stylesheet-resource/64787/10): > > 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:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\ **Post date:** [January 30, 2023, 7:56pm UTC](https://forum.inductiveautomation.com/t/feature-perspective-style-class-enhancements/60810/15 "2023-01-30T19:56:53Z")
A rather simple solution that, I think, would be good in addition to the stylesheet resource would be allowing users to manually enter attributes and values in the "applied styles" area of the editor. Extends the capabilities of the editor without changing the current experience or messing with an extra resource. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/4/e48c2e22072937ed023b2acc67b87973d90bde89.png) I find it annoying having to jump back and forth between the stylesheet and my other pre-defined styles. There is a workaround to do this in a way: > [@Tip: how to create SVGs and changing the fill color dynamically](https://forum.inductiveautomation.com/t/tip-how-to-create-svgs-and-changing-the-fill-color-dynamically/53361/38): > > Actually, I think you can coerce extra CSS properties into a style class from the designer alone. Whether you’re supposed to be able to or not is another matter. slight_smile A quick test in version 8.1.9 seems to confirm that a sort of “property injection” similar to the CSS injection hack @victordcq found will also work if you place your intended property within a property that takes a string value, you would just need to prefix it with a semi-colon to close the property you are entering it … ```auto font size : ; color : var(--error) ```