I am wondering if there is a way to change the size of the close ‘x’ in the corner because on the HMI screen it is a little difficult to hit it? any Ideas?
Not that I know of unless there is something you can do in the CSS files. Easier way is to remove that close option and create your own, then you have full customization. In the events of that new close button select action performed and closepopup.
1 Like
I can’t do the specifics for you as I don’t have ignition on this machine, but here’s what you can try:
press ctrl + shift + i to bring the browser inspector on a page where this popup appears.
Click on this icon: 
Then click on the x close button. This should select and highlight it in the tree (you might need to navigate a bit in that tree to adjust the selected element).
See if that element has a special class. If it does, then you can use a selector and apply css to it, but you’ll have to either add it in the theme file, or use the injection hack trick.
The injection would look something like that (let’s say the class is ia-closebtn):
} .ia-closebtn { property: value; } {
You would put that in a property of a style class, backgroundImage for example.
Check css docs to find what property you want to change.
This is a very basic injection, you could dive in a bit deeper to make the selector more specific (for example by also selecting the class you’re creating, adding psc- in front of it and adding that class to your popup view).
If you’re not familiar with css this might seem a bit hairy, in this case @craigb’s solution would be simpler: disable the default close button and add your own close method (maybe a big button).
You can also configure popups to be modals and to close when the user clicks/touches any part of the screen that is not the popup. This might be an even easier solution.
1 Like
For the sake of the next person looking into this. You can modify the css to do this by creating an sdvanced style sheet in styles called stylesheet.css and then put this in it.
.close-icon {
position: absolute;
top: .15rem;
right: .5rem
}
.material-icons.md-18 {
width: 30px;
height: 30px;
}
You can figure this out by just inspecting the chrome session and finding the html for the button.