Style Classes using CSS properties not in Designer GUI

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.

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.

4 Likes

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

Also wanted to bring this to the attention of @nader.chinichian, @nminchin, and @victordcq cause I figured y’all would enjoy it.

3 Likes

Cool, thanks for the quick reply @PGriffith. I guess I can still accomplish the type of functionality I’m looking for with CSS in my own custom theme

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 if you're trying to do something programmatic.

1 Like

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

; transform: rotate(90deg) !important;


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

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.

@PGriffith How about direct access, from the designer, to the theme file ?

1 Like

This does work

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.

1 Like

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.

The creature comforts of syntax highlighting though :frowning:

I'm fully aware that it's a solution, not the solution. I would love a built-in editor with all the QoL features.

2 Likes

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.

10 Likes

Hey look, I remembered.
Theme Manager Perspective View.zip (45.5 KB)

4 Likes

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]

1 Like

The new resource is available in the nightlies: New Stylesheet resource

9 Likes

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 :slight_smile: 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

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.

2 Likes

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

1 Like

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 (33.4 KB)

2 Likes