Perspective 'cover' docked views -- how to remove glow?

So there is a default outer glow on any docked view that is using the ‘cover’ option. I’ve been trying to figure out how to remove that glow as it sort of messes up other things we’re doing in terms of styling. I’ve tried using the ‘boxShadow’ and ‘box-shadow’ css properties(within the designer) but haven’t had any success.

Is this a global property that needs to be over written somewhere? The same glow doesn’t exist when using the ‘push’ option on docked views, so it is clearly being turned on somewhere that I can’t find.

Currently using Ignition 8.1.7

Yep it’s set in global css styling. You can override it in your custom theme or by injecting css into a component’s styles. Not at laptop at the moment, but you can find what you need to override (what sets the style) by using your browser dev tools and inspecting the dock. You’ll then be able to see what css is being applied to it and from what selectors.
Once you know the selector, you can use that to override the styling e.g.

.ia-component-name {
    margin: 10;
}

Thanks for your reply. That got me to the right place, now just to go in and swap those out in the CSS. Thanks!

For someone else looking the CSS classes to modify are:

.docked-view.dock-cover-shadow-left
.docked-view.dock-cover-shadow-right
.docked-view.dock-cover-shadow-top
.docked-view.dock-cover-shadow-bottom

1 Like

Maybe I am missing something here, but were you ever able to overwrite the box shadow in any of those classes? Every time I add some CSS to overwrite their box shadow properties in my custom theme, it gets ignored in chrome:

image

You can see at the bottom of that screenshot that even though I added the !important flag to my class modifier something is keeping it from functioning.

Don’t have a good way of checking this right now, but I believe there is an issue with you’re CSS. I could be wrong, but I think that it doesn’t like the quotes.

Try this:

.docked-view.dock-cover-shadow-bottom {
    box-shadow: 0px 0px 0px #00000000 !important;
}
1 Like

That was it. I guess I assumed that it would require quotation marks since the property takes a string value. Thanks!

Hi! How do you edit the global css styling permanently?

I found this by inspecting the element but I can't find it on the gateway. Where can I find the 'res/perspective' folder?

Easiest way is to add it into the Stylesheet (right click on Perspective Styles, and enable the stylesheet). You'll need one of the more recent revisions of 8.1.

Otherwise, you can add them into your CSS theme, assuming you have one, which would be located in the Ignition data directory under modules/com...perspective.../themes