# Perspective popup header color change? **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [January 13, 2020, 11:12pm UTC](https://forum.inductiveautomation.com/t/perspective-popup-header-color-change/31269 "2020-01-13T23:12:07Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![Loizel87](https://avatars.discourse-cdn.com/v4/letter/l/91b2a8/32.png) [@Loizel87](https://forum.inductiveautomation.com/u/Loizel87)\ **Post date:** [January 13, 2020, 11:12pm UTC](https://forum.inductiveautomation.com/t/perspective-popup-header-color-change/31269/1 "2020-01-13T23:12:08Z")
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](https://us1.discourse-cdn.com/inductiveautomation/original/2X/4/4ed84d07ccd6764aace43c1839f5999edc45790c.png) ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [January 14, 2020, 12:27am UTC](https://forum.inductiveautomation.com/t/perspective-popup-header-color-change/31269/2 "2020-01-14T00:27:16Z")
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](https://ideas.inductiveautomation.com/). ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [January 14, 2020, 2:20pm UTC](https://forum.inductiveautomation.com/t/perspective-popup-header-color-change/31269/3 "2020-01-14T14:20:28Z")
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? ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [March 17, 2020, 3:28pm UTC](https://forum.inductiveautomation.com/t/perspective-popup-header-color-change/31269/4 "2020-03-17T15:28:27Z")
How do you manage to drag and reposition the popup by using a component in view? Is its performance good? ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [March 17, 2020, 4:44pm UTC](https://forum.inductiveautomation.com/t/perspective-popup-header-color-change/31269/5 "2020-03-17T16:44:17Z")
This is what I use for vision, no performance issues whatsoever: > [@Drag popup from click initiated anywhere in the window](http://forum.inductiveautomation.com/t/drag-popup-from-click-initiated-anywhere-in-the-window/7401/2): > > This should work. Add the following custom properties on the popup. mX (Integer) mY (Integer) On the mousePressed event of the popup, enter the following: event.source.mX = event.x event.source.mY = event.y On the mouseDragged event of the popup, enter the following: [code] window = system.gui.getParentWindow(event) mouseX = event.x mouseY = event.y windowX = window.getX() windowY = window.getY() window.setLocation(mouseX+windowX-event.source.mX,mouseY+windowY-event.source.mY)[/code… Not sure for perspective ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [August 28, 2024, 1:03am UTC](https://forum.inductiveautomation.com/t/perspective-popup-header-color-change/31269/6 "2024-08-28T01:03:09Z")
2 posts were split to a new topic: [Question about Perspective header](https://forum.inductiveautomation.com/t/question-about-perspective-header/95237) ---
**Author:** ![pkhoshroo](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pkhoshroo/32/26801_2.png) [@pkhoshroo](https://forum.inductiveautomation.com/u/pkhoshroo)\ **Post date:** [November 7, 2024, 2:16pm UTC](https://forum.inductiveautomation.com/t/perspective-popup-header-color-change/31269/7 "2024-11-07T14:16:40Z")
Has there been any update on this? ---
**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\ **Post date:** [November 7, 2024, 2:19pm UTC](https://forum.inductiveautomation.com/t/perspective-popup-header-color-change/31269/8 "2024-11-07T14:19:29Z")
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](https://ideas.inductiveautomation.com/ignition-features-and-ideas/p/style-for-perspective-popup-title) ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [November 7, 2024, 9:52pm UTC](https://forum.inductiveautomation.com/t/perspective-popup-header-color-change/31269/9 "2024-11-07T21:52:02Z")
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. ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [November 7, 2024, 11:00pm UTC](https://forum.inductiveautomation.com/t/perspective-popup-header-color-change/31269/10 "2024-11-07T23:00:23Z")
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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/1/d111a869db8ef41aaff96fb3d6221b7645fddf29.png) ```python /* ================================================================================================= * 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; } } /* ================================================================================================= */ ``` ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [November 8, 2024, 9:24am UTC](https://forum.inductiveautomation.com/t/perspective-popup-header-color-change/31269/11 "2024-11-08T09:24:07Z")
> [@cmallonee](#): > > There is no way to style an individual Popup. 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 ```css #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: ```css .ia_popup[id^=popup-group1] .ia_popup__header { background-color: red; } ``` And now your popups foo and bar have a red title bar.