Calling variables from View PROPS

Ignition
1

I have set up some color variables in a styles.css sheet which is imported to the light.css sheet in the Themes directory. I'm working in Perspective with an alarm table view. My session theme is 'light'.
image

I want to use these to style my rows in the alarm table.
image

When I add the variable name, it does not find the reference color.
image

I also noted that the rgba format for color doesn't work here.
image

Any advice for me here? I have tried the manual and forum.
Thanks

2

You're probably best defining a class and assign these as to that class and setting the alarm table to that class

1 Like
3

I think you have done this backwards. The default themes are overwritten on each upgrade or reinstall. The recommendation is that you create your own theme and import an Ignition theme into yours instead. This also means that when you put
@import "./light/index.css";
at the top of your CSS file that you can overwrite any existing styles by redefining them below that line.

I can't see what's wrong with your color definitions. Maybe check in your browser's development tools (F12) and see if they're listed down at the bottom.

1 Like
4

Yes I see that the default alarm table colours are overwritten at start up. I worked a way around this with a start up script to reset the colours to my choosing but I think you are right in stating that creating a dedicated class would be cleaner. I'll have a crack at that. Cheers.

5

Hi Steve, you were 99% there ! You just have to encapsulate your variable name in var(--myVar) like this:

image

It might "complain" about it and show the parameter in red, but it does accept it. Sometimes it might not render it directly in the designer for some reasons, but it eventually does and it always render in the browser anyway. We've used that method across several projects and never had an issue.

However I would not recommend you editing the Ignition default themes as those can be overridden in some instances like on an Ignition upgrade I suppose. The way to go with it is to create your own theme. You can import in it the Ignition light theme as a base and then add all the css you want. Your own custom theme will remain in the directory and won't be overridden.

You can then select your own custom theme in the perspective project properties:

image
image

Some reading around Ignition themes:

1 Like