Popup border radius How

Ignition
1

This is weird, I thought I had it.
I set borderRadius in root.
image

Border radius setting does not do it.

How do you set border radius?

2

Added this in advance stylesheet:

.ia_popup{
    border-radius : 20px;
    border:none;
}
1 Like
3

And what happened?

4

All his popups are now circles.

1 Like
5

Its a client requirement.
Don't look at me..

image

They want triangular, also possible.

1 Like
6

I. Am. Vindicated.

In the earliest days of Perspective, I was trying to build projects and style them in ways I expected customers would, and one of the very first roadblocks I ran into was the Popups - which looked like they were more-or-less straight out of Java. At that time we didn't even have the theme files as we now know them, and so trying to get the Popups to look like anything more modern was a nightmare. I lobbied hard to provide user avenues for styling everything without having to apply style classes to everything, with my primary example being that I wanted to provide a border radius to Popups so that I could make them look a bit more like the windows of my Mac. They were a prime example of shortcoming because we don't expose their style props.

While the theming update in 8.0.13(?) provided a huge boost, it was also sort of cumbersome when trying to tweak minor settings, and it is applied to everything on the Gateway. I continued lobbying with the same example, and eventually the advanced stylesheet was proffered as a way to quickly modify settings in a Project-based resource. Now here we are - with someone using the exact resource for the exact reason I used as an example. I'm so proud!

11 Likes
7

Instead of setting style on component's property in property editor.

I wanted the style to be standard and be inherited to all instance of a component.

Is there CSS property reference to lookup which css properties use by each component? So I can modify this via advance stylesheet?

8

No, there's nothing like that. In order to determine which rule you should specify for the setting to be applied to, you'll need to get comfortable using the browser to inspect components.

1 Like
9

Press F12 or ctrl+shift+i to make the dev tools appear.
On the top left corner, you'll find this button:
image
click it, then click an element on the page. This will unfold the DOM tree () and highlight the line that describes the element you clicked.
Now this is just to get you in the right ballpark, you'll still have to explore a bit more in depth to find the exact element you want to style.

Let's take popups as an example. Let's say I want to change the style of the title bar and the close button.
Let's open a popup, click the "select" button, then the title bar.
I get a div with the class popup-drag. This is not exactly what I want, but at least I'm now in the popup.
Looking at the other divs, I can spot one with the class popup-header. Sounds good.
Hovering over an element in the tree will highlight it on the page, so I try with this one and it does highlight the title bar.
Let's try adding a style for the classes of that element:

.ia_popup .ia_popup__header {
	background-color: red;
	color: green;
	font-weight: 900;
	font-size: 2em;
}

And I get this:
image

I got the right selector, now I can do whatever I want to that element.
Let's find the close button, with the same process: select, click the button, adjust the selection.
I get an svg element with the class close-icon. Looks good to me.

.ia_popup > .close-icon {
	margin-top: -5px;
	margin-right: -5px;
	width: 26px;
	height: 26px;
	background-color: blue;
	color: white;
	transform: rotate(45deg);
}
.ia_popup > .close-icon:hover {
	color: orange;
}

image

4 Likes
10

Thank you for this..
This helps me get head start..