How to get Perspective view in Designer to recognize co-branding CSS variables?

tyler.bennett · November 8, 2023, 6:02pm

Is there a way to get a Perspective view in Designer to recognize co-branding CSS variables?

When inspecting a Perspective page (using the browser inspect feature) it is apparent that the co-branding CSS variables are available and defined in co-branding.css.

Seeing that Perspective pages views in a browser now include Perspective Co-branding settings as CSS variables. I setout to use those variables in some perspective views. However it would seem that Perspective views in Designer do not recognize (or have access to) those CSS variables.

Using the co-branding CSS variables for styles in Perspective views has the expected result when viewing the Perspective app through a browser but when viewing a view in Designer they are not applied at all. My assumption is that the co-branding.css file is not considered within designer.

Bug, or feature? Is use of the co-branding CSS variables in a perspective view an unsupported use case and thus intentionally omitted from being recognized in designer?

Ignition v8.1.33

tyler.bennett · November 8, 2023, 6:11pm

In my mucking about I added the co-branding CSS variables to the Advanced Stylesheet and was successful in having them recognized in Designer. Of course if your doing that you are eliminating the dynamic update of those CSS variables to match the gateway co-branding settings and one is better off defining new CSS variables that do not conflict/override the built-in variables.

One feature/bug/behavior I noticed is that an open perspective view in Designer does not automatically recognize changes in the advanced style sheet. I had to close and reopen a view to have it recognize changes/additions to the advanced stylesheet.

tyler.bennett · November 8, 2023, 6:49pm

Another work-around that seems less-bad than over-writing the co-branding CSS Variable value is to use the Advanced Stylesheet in Designer to create a parallel set of CSS variables that reference the co-branding CSS variables and have a fallback value for when the referenced CSS variable is not defined.