# Vision Title Bar look and feel

**URL:** <https://forum.inductiveautomation.com/t/vision-title-bar-look-and-feel/102984>\
**Category:** Ignition\
**Tags:** ignition81, vision\
**Created:** [February 27, 2025, 2:33pm UTC](https://forum.inductiveautomation.com/t/vision-title-bar-look-and-feel/102984 "2025-02-27T14:33:32Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Urvish\_Mehta](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/urvish_mehta/32/81912_2.png) [@Urvish\_Mehta](https://forum.inductiveautomation.com/u/Urvish_Mehta)\
**Post date:** [February 27, 2025, 2:33pm UTC](https://forum.inductiveautomation.com/t/vision-title-bar-look-and-feel/102984/1 "2025-02-27T14:33:32Z")

</div>

Hello All,

I am using Titlebar Display policy in vision to show title bar in popup windows. It looks very old and doesn't go with our theme. How do I change the style color of it?

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/4/f4908b21c645e47cd66cbc8679fdccf1f3aee3e5.png)

I am sure I read it somewhere that it could be changed. May be it was for message box and not this but It would be great if we can customize this.

---

<div class="post-metadata">

**Author:** ![bschroeder](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bschroeder/32/13260_2.png) [@bschroeder](https://forum.inductiveautomation.com/u/bschroeder)\
**Post date:** [February 27, 2025, 2:36pm UTC](https://forum.inductiveautomation.com/t/vision-title-bar-look-and-feel/102984/2 "2025-02-27T14:36:41Z")

</div>

We created our own as a template, and set all the popups to not have a titlebar. You have to do some scripting on the mouse events so you can move the popup, but it allows us to customize the titlebar and style it to our needs.

---

<div class="post-metadata">

**Author:** ![Urvish\_Mehta](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/urvish_mehta/32/81912_2.png) [@Urvish\_Mehta](https://forum.inductiveautomation.com/u/Urvish_Mehta)\
**Post date:** [February 27, 2025, 2:39pm UTC](https://forum.inductiveautomation.com/t/vision-title-bar-look-and-feel/102984/3 "2025-02-27T14:39:43Z")

</div>

Yes, We do that currently as well but would like to use default options from software. I know it's not a huge issue but would be good to know if we can customize that title bar in anyway.

---

<div class="post-metadata">

**Author:** ![bschroeder](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bschroeder/32/13260_2.png) [@bschroeder](https://forum.inductiveautomation.com/u/bschroeder)\
**Post date:** [February 27, 2025, 2:42pm UTC](https://forum.inductiveautomation.com/t/vision-title-bar-look-and-feel/102984/4 "2025-02-27T14:42:39Z")

</div>

I agree it would be nice to be able to style it. However, we had need to add custom buttons/actions to buttons in the header. So we went the template route.

If you do find a way update this thread... would be handy to know.

---

<div class="post-metadata">

**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:** [February 27, 2025, 2:43pm UTC](https://forum.inductiveautomation.com/t/vision-title-bar-look-and-feel/102984/5 "2025-02-27T14:43:21Z")

</div>

> [@Urvish\_Mehta](#):
>
> I know it's not a huge issue

I did as @bschroeder did as well, as for me at least, it is a huge eyesore and detracts from an otherwise attractive ui

---

<div class="post-metadata">

**Author:** ![JordanCClark](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jordancclark/32/83362_2.png) [@JordanCClark](https://forum.inductiveautomation.com/u/JordanCClark)\
**Post date:** [February 27, 2025, 3:15pm UTC](https://forum.inductiveautomation.com/t/vision-title-bar-look-and-feel/102984/6 "2025-02-27T15:15:49Z")

</div>

> [@How to Set UI Theme in v8.1 Vision Clients](https://forum.inductiveautomation.com/t/how-to-set-ui-theme-in-v8-1-vision-clients/54929/3):
>
> The short answer is you don’t; I think I was probably the person who told you that a while back. 8.0+ is using a custom-skinned version of the Synthetica Look-And-Feel. For performance and other reasons, this LaF effectively renders and paints entire images on components, not single colors that can be easily controlled by UIManager properties. So the way to ‘theme’ a Vision application would be to obtain a Synthetica theme .jar and apply it to the Vision client - except you can’t do that, beca…

---

<div class="post-metadata">

**Author:** ![michael.flagler](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/michael.flagler/32/26272_2.png) [@michael.flagler](https://forum.inductiveautomation.com/u/michael.flagler)\
**Post date:** [February 27, 2025, 3:38pm UTC](https://forum.inductiveautomation.com/t/vision-title-bar-look-and-feel/102984/7 "2025-02-27T15:38:57Z")

</div>

I haven't tried this, but maybe look into this exchange resource:

> **[Ignition Exchange](https://inductiveautomation.com/exchange/2471/overview)**
>
> Discover, share, and download community made Ignition resources in collaboration with your organization or the Ignition community.

I tried it and it's a good place to start. I liked it enough that I used it as a base for all my faceplates. I removed the hover animation/color change on the title bar, but made the colors as parameters so I could customize them for some specific use cases I had, and added both a tool tip and maximize button that does a simulated maximize of the window (I tried some Java functions to maximize but they didn't work so gave up and just resized the window instead)

---

<div class="post-metadata">

**Author:** ![Ryan\_Shaw](https://avatars.discourse-cdn.com/v4/letter/r/dbc845/32.png) [@Ryan\_Shaw](https://forum.inductiveautomation.com/u/Ryan_Shaw)\
**Post date:** [May 18, 2025, 11:14pm UTC](https://forum.inductiveautomation.com/t/vision-title-bar-look-and-feel/102984/8 "2025-05-18T23:14:03Z")

</div>

For those wondering what those scripts are, on your popup's root container add this to the mouse pressed script

```python
window = system.gui.getParentWindow(event)
offsetX = event.getXOnScreen() - window.getX()
offsetY = event.getYOnScreen() - window.getY()
window.putClientProperty("drag_offset", [offsetX, offsetY])

```

and add this to the mouse released script

```python
window = system.gui.getParentWindow(event)
offset = window.getClientProperty("drag_offset")

if offset:
	newX = event.getXOnScreen() - offset[0]
	newY = event.getYOnScreen() - offset[1]
	window.setLocation(newX, newY)

```

---

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [May 23, 2025, 6:35am UTC](https://forum.inductiveautomation.com/t/vision-title-bar-look-and-feel/102984/9 "2025-05-23T06:35:03Z")

</div>

> [@Ryan\_Shaw](#):
>
> For those wondering what those scripts are

Did I miss something or did this code get inadvertently posted on the wrong thread? [I've made this mistake when replying with multiple tabs open]

I only ask because I don't see how repositioning a popup relates to the look and feel of the title bar.

---

<div class="post-metadata">

**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:** [May 23, 2025, 11:36pm UTC](https://forum.inductiveautomation.com/t/vision-title-bar-look-and-feel/102984/10 "2025-05-23T23:36:25Z")

</div>

If you look at the post he replied to it will make sense 😜 basically, to get the look and feel you want, you remove the Java titlebar altogether and build your own, but then you lose window drag functionality without adding it back in wirh a script. But that script wasn't provided in the original reply post

---

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [May 24, 2025, 12:40am UTC](https://forum.inductiveautomation.com/t/vision-title-bar-look-and-feel/102984/11 "2025-05-24T00:40:21Z")

</div>

😎 Thanks!

---

<div class="post-metadata">

**Author:** ![OmarTentmaker](https://avatars.discourse-cdn.com/v4/letter/o/9fc348/32.png) [@OmarTentmaker](https://forum.inductiveautomation.com/u/OmarTentmaker)\
**Post date:** [August 20, 2025, 4:30pm UTC](https://forum.inductiveautomation.com/t/vision-title-bar-look-and-feel/102984/12 "2025-08-20T16:30:16Z")

</div>

Would you like smooth-move floating popups just like when you had the default title bar? Not the discrete/ delayed jumping around from point A to point B? Let's slightly modify and build on this idea!

1. On your popup's Root Container, under Custom Properties, add a property of **Type** Boolean. I will set the **Name** to "myMousePressed"

2. On your popup's Root Container add this to the **mouse \> mousePressed** script

> **Summary**
>
> ```python
> #toggle logic from Custom Properties > myMousePressed
> event.source.myMousePressed = True #start
> #
> window = system.gui.getParentWindow(event)
> offsetX = event.getXOnScreen() - window.getX()
> offsetY = event.getYOnScreen() - window.getY()
> window.putClientProperty("drag_offset", [offsetX, offsetY])
> 
> ```

1. On your popup's Root Container add this to the **mouse \> mouseReleased** script

> **Summary**
>
> ```python
> #toggle logic from Custom Properties > myMousePressed
> event.source.myMousePressed = False	#stop
> 
> ```

1. On your popup's Root Container add this to the **mouseMotion \> mouseDragged** script

> **Summary**
>
> ```python
> #conditional continuous float and update
> if event.source.myMousePressed:
> window = system.gui.getParentWindow(event)
> offset = window.getClientProperty("drag_offset")
> 
> if offset:
> newX = event.getXOnScreen() - offset[0]
> newY = event.getYOnScreen() - offset[1]
> window.setLocation(newX, newY)
> 
> ```

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [August 20, 2025, 4:47pm UTC](https://forum.inductiveautomation.com/t/vision-title-bar-look-and-feel/102984/13 "2025-08-20T16:47:28Z")

</div>

Why do you need the checkbox component? Can you not use a boolean custom prop on the root container?

---

<div class="post-metadata">

**Author:** ![OmarTentmaker](https://avatars.discourse-cdn.com/v4/letter/o/9fc348/32.png) [@OmarTentmaker](https://forum.inductiveautomation.com/u/OmarTentmaker)\
**Post date:** [August 20, 2025, 5:56pm UTC](https://forum.inductiveautomation.com/t/vision-title-bar-look-and-feel/102984/14 "2025-08-20T17:56:00Z")

</div>

Code upgraded. Thank you.
