topic Re: In Web Appbuilder Dev Edition which file changes the color of the widget panels? in ArcGIS Web AppBuilder Questions

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

KieranClark — Thu, 18 Jul 2019 16:18:13 GMT

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.

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

FGGEms — Fri, 19 Jul 2019 09:58:17 GMT

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.

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

KieranClark — Fri, 19 Jul 2019 13:47:25 GMT

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/

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

FGGEms — Tue, 30 Jul 2019 15:52:15 GMT

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

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

KieranClark — Tue, 30 Jul 2019 16:53:33 GMT

Hi Stephanie,

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