nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Legend Widget symbol opacity override

AnthonyThompsonFWP

Is there a way to override the opacity of a symbol displayed in the Legend widget without altering the layer's opacity? A partially transparent layer's symbol is darkened significantly by a dark widget background when displayed as a symbol in the Legend with our branded dark background.

Thanks!

Find more posts tagged with

Accepted answers

MatthewDriscoll

Here is a working codepen example. I have the timeout set really high so you will need to wait around 15-30 seconds to see the opacity change on the 4th item in the legend.

https://codepen.io/mbdriscoll/pen/XWQWexm

All comments

AnthonyThompsonFWP

Thank you for the suggestion and example!

MatthewDriscoll

Here is a working codepen example. I have the timeout set really high so you will need to wait around 15-30 seconds to see the opacity change on the 4th item in the legend.

https://codepen.io/mbdriscoll/pen/XWQWexm

MatthewDriscoll

You need to change the opacity of the class esri-legend__symbol.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.