This is weird, I thought I had it.
I set borderRadius in root.
Border radius setting does not do it.
How do you set border radius?
Added this in advance stylesheet:
.ia_popup{
border-radius : 20px;
border:none;
}
1 Like
And what happened?
All his popups are now circles.
1 Like
Its a client requirement.
Don't look at me..
They want triangular, also possible.
1 Like
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!
12 Likes
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?
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
Press F12 or ctrl+shift+i to make the dev tools appear.
On the top left corner, you'll find this button:
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:
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;
}
5 Likes
Thank you for this..
This helps me get head start..
Whats the style you used in stylesheet?
I tried below style:
{
"classes": "",
"backgroundColor": "white",
"overflow": "auto",
"borderRadius": "8px",
"boxShadow": "0px 4px 20px rgba(0, 0, 0, 0.2)",
"padding": "10px"
}
but am still not getting rounded border in popup
You put that in the stylesheet ?
That's not css, that's json.
Ask google about css syntax.
Also, include the selector you used, maybe it's wrong.
I applied the following style using a style sheet:
css
.psc-popup {
background-color: white;
overflow: auto;
border-radius: 8px;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
padding: 10px;
}
I’ve tried applying this both through the style sheet and directly to the root component’s style, but it hasn’t taken effect.
psc-popup tells me you're targeting an element on which you've put a class (psc = perspective style class).
The thing is, you cannot put a class on the "actual" root of a popup. So you're bound to apply your rounded corners on something that's INSIDE the popup.
Look again at the examples I gave previously in this thread. They use .ia_popup to target the actual outermost element of the popup. You'll need to round its corners too.
2 Likes
Yes, exactly as I said, you're rounding the corners of an inner container, not of the popup.
Read this thread again.
Hey got it. Thanks!
.ia_popup:has(.psc-popup): is also an option if its only some popups you want to target