# Style Classes using CSS properties not in Designer GUI **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [September 27, 2022, 3:49pm UTC](https://forum.inductiveautomation.com/t/style-classes-using-css-properties-not-in-designer-gui/64543 "2022-09-27T15:49:37Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![nicoli.liedtke](https://avatars.discourse-cdn.com/v4/letter/n/ee59a6/32.png) [@nicoli.liedtke](https://forum.inductiveautomation.com/u/nicoli.liedtke)\ **Post date:** [September 27, 2022, 3:49pm UTC](https://forum.inductiveautomation.com/t/style-classes-using-css-properties-not-in-designer-gui/64543/1 "2022-09-27T15:49:37Z")
From my poking around it seems like it’s impossible for Style Classes to be set up with CSS properties that aren’t standard in Ignition’s CSS picker GUI such as ‘tranform’ or ‘writingMode’. Is there any work around to this. Editing the underlying file style.json to have the CSS property seems to have no effect, and I don’t think there’s a way to add it to a style class in the designer. ---
**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:** [September 27, 2022, 3:53pm UTC](https://forum.inductiveautomation.com/t/style-classes-using-css-properties-not-in-designer-gui/64543/2 "2022-09-27T15:53:57Z")
In an upcoming release, we’re planning to add a ‘stylesheet’ resource where arbitrary CSS can be added to each project (an interim between themes and style classes). We might extend style classes to allow arbitrary CSS to be added to them at some point, but there are currently no formal plans to do so. ---
**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:** [September 27, 2022, 3:57pm UTC](https://forum.inductiveautomation.com/t/style-classes-using-css-properties-not-in-designer-gui/64543/3 "2022-09-27T15:57:57Z")
Out of curiousity inline with the question about available keys. In true CSS almost of these keys are not camelcase, more like `-writing-mode` but everything here is camelcase. Is there a rule for how that works? I.e. for something like `-webkit-aspect-ratio` ---
**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:** [September 27, 2022, 4:00pm UTC](https://forum.inductiveautomation.com/t/style-classes-using-css-properties-not-in-designer-gui/64543/4 "2022-09-27T16:00:08Z")
> [@paul-griffith](#): > > In an upcoming release, we’re planning to add a ‘stylesheet’ resource where arbitrary CSS can be added to each project (an interim between themes and style classes). Also wanted to bring this to the attention of @nader.chinichian, @nminchin, and @victordcq cause I figured y’all would enjoy it. ---
**Author:** ![nicoli.liedtke](https://avatars.discourse-cdn.com/v4/letter/n/ee59a6/32.png) [@nicoli.liedtke](https://forum.inductiveautomation.com/u/nicoli.liedtke)\ **Post date:** [September 27, 2022, 4:03pm UTC](https://forum.inductiveautomation.com/t/style-classes-using-css-properties-not-in-designer-gui/64543/5 "2022-09-27T16:03:46Z")
Cool, thanks for the quick reply @paul-griffith. I guess I can still accomplish the type of functionality I’m looking for with CSS in my own custom theme ---
**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:** [September 27, 2022, 4:15pm UTC](https://forum.inductiveautomation.com/t/style-classes-using-css-properties-not-in-designer-gui/64543/6 "2022-09-27T16:15:08Z")
> [@kgamble](#): > > Out of curiousity inline with the question about available keys. In true CSS almost of these keys are not camelcase, more like `-writing-mode` but everything here is camelcase. > > Is there a rule for how that works? I.e. for something like `-webkit-aspect-ratio` It's camel case because that's how React does inline styling, as far as I know. I don't know if there's an easy way to translate between them; you might be able to approximate the correct results with [CaseFormat](https://guava.dev/releases/19.0/api/docs/com/google/common/base/CaseFormat.html) if you're trying to do something programmatic. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [September 28, 2022, 6:49am UTC](https://forum.inductiveautomation.com/t/style-classes-using-css-properties-not-in-designer-gui/64543/7 "2022-09-28T06:49:25Z")
you can kinda inject new css in the styleclasses using the backgrroundimage `;` This might break some visual things in the designer, so test it in the browser ```auto ; transform: rotate(90deg) !important; ``` ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/1/c1970b89e488e995b554d60a02ec7c8bff988811.png) Note for some styles you will have to add !important, transform is one of those styles that will need it. You can only really figure out which by inspecting the browser element… (or memorizing all the igntion default styles ((dont do this lol)) ---
**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:** [September 28, 2022, 8:13am UTC](https://forum.inductiveautomation.com/t/style-classes-using-css-properties-not-in-designer-gui/64543/8 "2022-09-28T08:13:34Z")
You can make empty classes and reference them in your theme file, so that you can still apply the style to components by adding that style class to them. You’ll need to add `psc-` in front of the class name in the theme file. Well, I never tried it, never needed to, but I can’t see a reason why it wouldn’t work. @paul-griffith How about direct access, from the designer, to the theme file ? ---
**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:** [September 29, 2022, 9:55pm UTC](https://forum.inductiveautomation.com/t/style-classes-using-css-properties-not-in-designer-gui/64543/9 "2022-09-29T21:55:57Z")
> [@pascal.fragnoud](#): > > Well, I never tried it, never needed to, but I can’t see a reason why it wouldn’t work. This does work > [@pascal.fragnoud](#): > > How about direct access, from the designer, to the theme file ? One interesting thing here is that it’s not a resource the same way we consider everything else to be a resource because it’s gateway based and not project based. When the tags eventually make their way into being a gateway based file resource, it will really enable the ability to create editors for gateway based resources like this. Right now it would require some workarounds since it’s not technically a “resource” the way styles are. Someone savvy enough could create a client-side designer module that enables this, but it would be relatively hacky since it wouldn’t leverage true Project Resources. ---
**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:** [September 29, 2022, 10:38pm UTC](https://forum.inductiveautomation.com/t/style-classes-using-css-properties-not-in-designer-gui/64543/10 "2022-09-29T22:38:06Z")
> [@pascal.fragnoud](#): > > How about direct access, from the designer, to the theme file ? It's actually not that hard to create a screen in perspective that allows you to do this. Just read the directory into a tree and open each file in a text area component. I made one for the project I'm working on right now. Maybe I'll export it when I'm in the office tomorrow and post it, if I remember. ---
**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:** [September 29, 2022, 11:34pm UTC](https://forum.inductiveautomation.com/t/style-classes-using-css-properties-not-in-designer-gui/64543/11 "2022-09-29T23:34:12Z")
The creature comforts of syntax highlighting though ☹ ---
**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:** [September 30, 2022, 12:04am UTC](https://forum.inductiveautomation.com/t/style-classes-using-css-properties-not-in-designer-gui/64543/12 "2022-09-30T00:04:37Z")
I'm fully aware that it's _a solution_, not **the solution**. I would love a built-in editor with all the QoL features. ---
**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:** [September 30, 2022, 1:39am UTC](https://forum.inductiveautomation.com/t/style-classes-using-css-properties-not-in-designer-gui/64543/13 "2022-09-30T01:39:14Z")
We're currently working on a first-party solution where we provide a stylesheet resource which is editable in the Designer and which can be used to configure CSS between themes and Named Styles. Should hopefully be available in 8.1.22, but no promises. ---
**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:** [September 30, 2022, 7:15pm UTC](https://forum.inductiveautomation.com/t/style-classes-using-css-properties-not-in-designer-gui/64543/14 "2022-09-30T19:15:26Z")
Hey look, I remembered. [Theme Manager Perspective View.zip](https://forum.inductiveautomation.com/uploads/short-url/28pt58I9WuNGgnzgblRUrcGh6Re.zip) (45.5 KB) ---
**Author:** ![bao.nguyen](https://avatars.discourse-cdn.com/v4/letter/b/8c91f0/32.png) [@bao.nguyen](https://forum.inductiveautomation.com/u/bao.nguyen)\ **Post date:** [October 3, 2022, 11:14pm UTC](https://forum.inductiveautomation.com/t/style-classes-using-css-properties-not-in-designer-gui/64543/15 "2022-10-03T23:14:44Z")
Hi Randall, Thank you for sharing this great resource! I attach a screenshot here just in case somebody wonders how it looks before giving it a try. [Theme Manager Perspective View] ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/f/3f49af5811ae5e80d9967b97122adfbc6ec6bf70.png) ---
**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, 2:00am UTC](https://forum.inductiveautomation.com/t/style-classes-using-css-properties-not-in-designer-gui/64543/16 "2022-10-04T02:00:42Z")
The new resource is available in the nightlies: [New Stylesheet resource](https://forum.inductiveautomation.com/t/new-stylesheet-resource/64787) ---
**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 9, 2022, 9:23pm UTC](https://forum.inductiveautomation.com/t/style-classes-using-css-properties-not-in-designer-gui/64543/17 "2022-10-09T21:23:25Z")
This _is_ actually pretty useful as it saves having to RDP into the server to modify theme files, and can also be used to edit other resources as well 🙂 thanks for sharing! Might be something to consider adding to the Exchange. One suggestion though, would be to convert it from a coord container into flex containers ---
**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 9, 2022, 10:07pm UTC](https://forum.inductiveautomation.com/t/style-classes-using-css-properties-not-in-designer-gui/64543/18 "2022-10-09T22:07:00Z")
That is a good idea. I hadn't really intended for it to be used by anyone else... hence only accounting for one screen size. If I have time I'll spruce it up a bit and add it to the exchange. I also don't know how well it'll work on non-windows gateways. ---
**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 10, 2022, 12:18am UTC](https://forum.inductiveautomation.com/t/style-classes-using-css-properties-not-in-designer-gui/64543/19 "2022-10-10T00:18:04Z")
I rewrote it to work on non-windows gateways and is responsive Now let’s see if I remember to upload it when I’m at my computer… lol ---
**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 10, 2022, 12:22am UTC](https://forum.inductiveautomation.com/t/style-classes-using-css-properties-not-in-designer-gui/64543/20 "2022-10-10T00:22:14Z")
Haha, I converted it to a flex container and added a few other things like: - moved upwards bindings, down (added extra `view` custom props to hold other component values) - added enable conditions on buttons to disable them when a default file/folder is selected - added revision history prop Note: I added my own perspective styles to the buttons which I haven't included in the zip, so these obviously won't work Might need to make your same changes into my version as well. I couldn't see what would need to change though, but then again, I don't do _any_ Apple work and _very_ limited Linux work [Theme Manager v1\_1.zip](https://forum.inductiveautomation.com/uploads/short-url/lqvYkKmkq3wltBngIxa4ROaMHh5.zip) (33.4 KB) [Next page](https://forum.inductiveautomation.com/t/style-classes-using-css-properties-not-in-designer-gui/64543.md?page=2)