[Feature-13049] Perspective Popup View Title Bar Color

[MikeAllgood]

Is there a simple way (without drilling down into the Java objects) to change the title bar color of a Perspective View Popup?

[cmallonee]

In the Designer there is no way to customize the color of the title bar. You do have the option of using the theme files to set the color of the title bar, as well as any other style options you prefer.

.ia_popup_header {
    background-color: #00FF00;
}

I recommend being on 8.0.13 or newer to set this up. Yo should also read the following threads/posts as they provide a walkthrough on what you need to do:

Theming
Setting up custom imports

[MikeAllgood]

So, our dev server is not yet been upgraded to .13 (still on .12). From discussions we have had the decision was made to skip 13. Anyway, this will still be an issue when we do upgrade, what ever that version may be.
I’ll admit to not being well versed in the whole themes thing. Can you point me to some resources to help get a better understanding? I look at your example and it simply make no sense to me. I get that a color is being defined, but I don’t know where that lives or how to assign it to the popup header.

Thanks!

[cmallonee]

Oh boy… Buckle up.

Themes have been present in Perspective since launch, but only out of necessity. It wasn’t until 8.0.13 that we provided top-to-bottom theming for every component in an effort to get all components looking and feeling the same by default.

Theming a project makes use of CSS, or Cascading Style Sheets. It boils down to using inheritance to apply properties to HTML elements. Elements does not equate to “Components”, as individual Perspective components can have many many HTML elements which provide their actual appearance.

Here’s a (hardly) simple example:
First, let’s look at the the Component, the HTML elements which make it up, and the classes applied to those elements…

Here is a Perspective Button component onto which I have applied the 8.0.13 “dark” theme.

If you open the browser’s developer tools, you’ll see that the Button actually has three pieces, a <button>, which contains a <div>, and which in turn also contains a <div>.

If you look at the class attribute of the component, you can see which CSS classes are being applied to each level of the button. Examination of the “Styles” tab in the “Elements” tab of the developer tools will show you what properties are applied to each class.

Now, a way-to-brief overview of how CSS works:
CSS uses inheritance and specificity to determine what properties are applied to classes.
In the Perspective themes directory, dark.css imports a singular file, which then imports some other files, which then import some other files, but eventually you’ll find that some of the imports actually have element types and/or classes defined.

Way up at the most general level of the import tree, there is a part of light/globals.css (which is imported into dark.css through a along inheritance chain) which looks like this:

input, textarea, keygen, select, button {
    font-family: var(--font-NotoSans);
    font-weight: 400;
}

It means “whenever one of these elements is in use, apply these properties”. You can see it in use in the bottom of the screenshot of the “styles” in use (it’s applied by dark.css because that’s what we’re using, which is why you don’t see light.css). You can also see that font-weight is crossed out in that screenshot, because something that was further down the chain OR WAS MORE SPECIFIC overrode font-weight with its own value. In our case, this was the ia_button--primary class in button.css (which again, is inherited by dark.css). Since the class is more specific than the general element type, the class is used instead of the element type.

And how to use this:
Say you want to set ALL of your “primary” buttons in ALL of your projects to be the green I used in a previous example. You would go into light/common/button.css and find the most specific class used for only primary buttons and set the color there.

Popups use the same idea, but their file is light/app/popup.css. In this file we list the classes applied to Popups (I’m only showing the header portion).

.ia_popup__header {
    background-color: var(--containerNested);
    color: var(--neutral-90);
    border-bottom: var(--containerBorder);
    font-size: 0.875rem;
}

These are the settings applied to elements which have the ia_popup__header class. The var(--someValue) is how CSS handles values based on a variable. Changing background-color here would change your Popup header color.

If you do NOT want these changes applied to al of your projects, there are some alternative approaches, but I would recommend a new file, named MyProjectDark.css (or something similar for each theme you want to mimic). That file should should import dark.css and it should also have its own declaration of the ia_popup__header class. This setup would override anything inherited with your values.

perspective/themes/MyProjectDark.css

@import "./dark.css";

.ia_popup__header {
    background-color: #00FF00;
}

This would essentially use everything in the dark theme we bundle in Perspective but it would override the Popup header color.

[MikeAllgood]

We’re using Ubuntu on this project.
Where would these .css files live on this or other Linux OSes?

[cmallonee]

Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\themes

or whatever file separator is used by your OS.

[MikeAllgood]

I found the light and dark css files here:
/var/lib/ignition/data/modules/com.inductiveautomation.perspective/themes
I created a new text file named darkPopupHeader.css and added the following content:

@import "./dark.css";

.ia_popup__header {
    background-color: #777777;
}

Knowing that we are still on .12 I’m expecting this to have no effect. Is that a correct assumption? Is it possible to apply that in .12?

Thanks again for your help and persistence!

[cmallonee]

You should be able to set the session’s theme to “darkPopupHeader” (no .css on the end), and then the Popups should start using that color, BUT my theming knowledge is 100% with respect to 8.0.13. Theming before 8.0.13 was no fun and I don’t know what the structure or behaviors are like using my recommendations before 8.0.13. I also don’t have an environment on hand which would allow me to test it right now. I can tell you that your sample would work in 8.0.13.

[MikeAllgood]

No worries. You’ve helped tremendously already.
I did put the new theme in the session’s theme parameter but it did not seem to do anything.
When we have upgraded to a newer version I will revisit this.

Thanks.

[MikeAllgood]

I have 8.0.14 on a test VM and tried this. It works as described!
Thanks!

[MikeAllgood]

So I now have a follow on question. I can change the BG color and the font color, but I’m not finding a way to change the color of the title bar close button.

Am I just missing a variable assignment or something that controls this?
Thanks.

[cmallonee]

In the same file you placed the header changes, supply

svg.close-icon {
    color: #FF0000
}

but change #FF0000 to whatever color you want.

[MikeAllgood]

Perfect! Thanks again!

[bschroeder]

@cmallonee

I’m trying to do this very thing and I’m having a few issues.

To setup my environment I have a theme named light-ESP that has the following in the file:

@import "./light-ESP/index.css";

In the ./light-ESP/index.css I have the following:

@import "./variables.css";
@import "../light/fonts.css";
@import "../light/globals.css";
@import "../light/app/index.css";
@import "../light/common/index.css";
@import "../light/designer/index.css";
@import "../light/palette/index.css";

And then in the variables.css file I have this:

.ia_popup__header {
    background-color: #00FF00;
}

@import "../light/variables.css";

When I run the popup the title isn’t styled out with the green background color and if I look into Chrome Developer it is showing as being over-written:

How do I get my custom CSS to overwrite the internal CSS? This is my first start into styling up the IA components so I want to make sure that I’m doing it correctly.

Thanks!

[PGriffith]

What if you put the @import above the defined style in your variables.css?

Failing that, there’s always !important…

[bschroeder]

Changing the location of the import didn’t help. I originally had it on top and moved it to the bottom to see if there was a weird order in which things where loaded that caused the custom CSS to load after the IA CSS.

!important did work though.

[Abhijit_Jagtap1]

Hi.
I want to increase the size of the close button symbol. We are using a touch panel HMI, so in that case, it will not be properly touch-sensitive. I have created custom CSS. Please give me some hints to increase the size of the popup close symbol.

[richardNZ15]

Should probably start a new topic with your specifics, but we've increased the X button by editing the "popup.css" as follows:

.close-icon {
    top: 0%;
    right: 0%;
	min-width: 40px;
	min-height: 40px;
}