topic Re: Change layer list border color in Experience Builder Custom Widgets

Change layer list border color

LondonWalker — Tue, 06 Jun 2023 22:41:05 GMT

I am building a custom layer list widget that also displays the legend in experience builder. For whatever reason, I can't get this gray border to change colors. I am trying to get it white but I can turn every else white except this border, and it occurs between the legend and layer name, the layer names and the group layer name, and the whole layer list. Any ideas on what it might be? I am using a scss style sheet and also changed the container background color inline with the HTML.

Re: Change layer list border color

LanceCole — Wed, 07 Jun 2023 10:02:05 GMT

@LondonWalker ,

In your browser utilize the developer tools (F12) to identify which class is assigned the gray color. You will then need to override that class in your widget CSS. You can also temporarily override the color in your browser to experiment with the desired effect. Do note, overriding ESRI CSS may impact other experience builder components. You can add an additional class to your widget to apply this exclusively. You may need to utilize the CSS !important Property to force your CSS preference.

For example in the image below, I have temporarily set the backgound-color for .jimu-widget.esri-layer-list.esri-widget.esri-widget--panel to green.

Re: Change layer list border color

LondonWalker — Wed, 07 Jun 2023 12:40:41 GMT

Thank you so much!