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; } } }

In Web Appbuilder Dev Edition which file changes the color of the widget panels?

KieranClark

I'm trying to change the color of the panels that pop up when using certain widgets on my web app. We have cable systems in the highest capacity tier colored white so they stand out the most on our map. However, as the background of the Legend and the left-hand layer list in the Jewelry Box theme are white, this color is lost. See image below for what I'm trying to edit.

I just need to know which file I can find the right attribute to change.

Find more posts tagged with

Accepted answers

FGGEms

Dear Clark,

changing the color in the legend can be done with the jimu.css. There you find the .jimu.widget-frame>.jimu-containter where you have to change the background-color.

If you have Chrome:

Use the picker to find the right places to change in your code: In the following example I changed the color of the legend to lightgrey.

All comments

FGGEms

Dear Clark,

changing the color in the legend can be done with the jimu.css. There you find the .jimu.widget-frame>.jimu-containter where you have to change the background-color.

If you have Chrome:

Use the picker to find the right places to change in your code: In the following example I changed the color of the legend to lightgrey.

KieranClark

Thank you so much for your reply! I actually figured this out myself late last night when I remembered "Inspect Element" exists and was going to edit my post to reflect that after I got into the office this morning. I'm not a web developer or anything so I wasn't even thinking about it.

Anyway, "Inspect Element" has really helped me out and enabled me to figure out how to change some other design elements we were looking to change.

I really appreciate you taking the time to help me out!

Updated map can be found here for anyone interested: https://stfanalytics.com/submarine-cables-of-the-world/

FGGEms

Hi Kieran,

I had a short look at your app and found something, which you could improve.

After the layer name you find three Points for additional Information. The user can't click on this three Buttons, because probably you deactive the additional Information. You can make this Buttons to invisible, by changing your Programme Code.

Kind regards

Stephanie

dotMorten_esri_1-1723132204615.png

dotMorten_esri_2-1723132301273.png

Capture.PNG

KieranClark

Hi Stephanie,

I'm not quite sure what you mean. Could you screenshot where you're talking about?

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.