Perspective popup header color change?

Ignition
1

I am currently using Ignition 8.0.7 and trying to figure out how to change the header or top banner on a popup to something other than the white. I have attached a sample below. Any recommendations would be great,

Thanks!
image

1 Like
2

We don’t provide any options for customizing the appearance of Popups, outside of such settings that would alter the structure of the Popup (title, closeIcon), so changing the background color, text font, or even corner radius is not available at this time.

If you’d like to request access to those properties or others like those, you could open a request on the ideas forum.

3

I don’t display the title bar on my popups, and instead create my own close button and mouse drag script to handle dragging of the popup around the screen. That way you have full control of how you want to present the titlebar.
Edit: just saw this was perspective. Not sure you can do the same thing as in Vision?

1 Like
4

How do you manage to drag and reposition the popup by using a component in view?
Is its performance good?

5

This is what I use for vision, no performance issues whatsoever:

Not sure for perspective

6

2 posts were split to a new topic: Question about Perspective header

7

Has there been any update on this?

8

Here is the link to the ideas portal. It does not show as Planned yet, so it will not happen anytime soon most likely. Upvoting it will help.

style for perspective popup title | Voters | Inductive Automation

1 Like
9

You can't directly style the Popup, but this post was made long before we added the stylesheet.css resource. That resource can absolutely assist in styling the Popup, though it would be all Popups within the project. There is no way to style an individual Popup.

2 Likes
10

As an example, this is how you can use the adv. stylesheet to change the popup styling, as well as adding a "fade in" animation when it opens:

image
image915×275 15.9 KB

/* =================================================================================================
 * Set Popups to:
 *  - remove the "focus" border (default blue in chrome)
 *  - show a black titlebar with white BOLD text
 *  - rounded edges
 *  - fade popup in when opened
 *  - softer shadow
 */
div[id^="popup-"]{
    border: none;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 6px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px !important;
    border-top-left-radius: 5px;
    overflow: hidden;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    animation: fadeInOnly 0.5s;
}

div[id^="popup-"]:focus {
    outline: none !important;
}

/* Popup Title styling */
div.popup-header.ia_popup__header {
    background-color: #2b2b2b !important;
    color: #fff !important;
    border-bottom: 1px solid #000;
    font-size: 0.875rem;
    font-weight: bold !important;
}

/* The popup title is made dark grey above so need to change close button to white */
svg.close-icon.material-icons.md-18 {
    fill: #fff;
}

/* Animate the opening of a popup, fading it in and sliding it up into position*/
@keyframes fadeIn {
   0% {
      opacity: 0;
      transform: translateY(25%);
   }
   100% {
      opacity: 1;
      transform: translateY(0);
    }
}

/* Animate the opening of a popup, fading it in */
@keyframes fadeInOnly {
   0% {
      opacity: 0;
   }
   100% {
      opacity: 1;
    }
}
/* ================================================================================================= */
3 Likes
11

There is: Use the popup id to target that specific popup.

let's say we open the popup with id foo,
then in the stylesheet we can use

#popup-foo .ia_popup__header {
    background-color: blue;
}

You can even target a group of popups if you prefix their ids with something.
Let's say you open popups with ids formatted like this : group1_foo, group1_bar,
You can use this selector:

.ia_popup[id^=popup-group1] .ia_popup__header {
    background-color: red;

And now your popups foo and bar have a red title bar.

8 Likes