topic Background color for About Widget in ArcGIS Web AppBuilder Questions

Background color for About Widget

EmilyCaruccio — Thu, 16 May 2019 19:29:47 GMT

I have a logo that I can not change. Unfortunately, the logo is dark and does not go with the dark gray of the logo therefore I've been asked to change the background color to a light gray or white.

I've attempted to go to the common.css to change the color but I have failed.

Which rule will I have to edit to change the background-color of the widget? (Using Dart Theme)?

Re: Background color for About Widget

RobertScheitlin__GISP — Sat, 11 Dec 2021 13:06:59 GMT

Emily,

This one:

.dart-panel .panel-bg {
    background-color: #4c4c4c;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Background color for About Widget

EmilyCaruccio — Sat, 11 Dec 2021 13:07:02 GMT

I changed the color from #4c4c4c to #dbd9d9 within

.dart-panel .panel-bg {
    background-color: #4c4c4c;
}

Cleared my cache and the widget's panel still appears to be dark gray.

There is something overwriting that text. I just can't figure out where that is.

Re: Background color for About Widget

RobertScheitlin__GISP — Fri, 17 May 2019 13:24:23 GMT

Are you adding the rule to the Bottom of the common.css?

Re: Background color for About Widget

EmilyCaruccio — Fri, 17 May 2019 13:38:25 GMT

I was not. I was just editing the downloaded code.

Since you suggested, I added .dart-panel .panel-bg {background-color: #dbd9d9;} to the bottom of the common.css, cleared my cache, and the background color was still dark gray. I added !important in hopes that it would work, and it did not.

Re: Background color for About Widget

RobertScheitlin__GISP — Sat, 11 Dec 2021 13:07:04 GMT

Emily,

Here is my rule at the bottom of my Dart theme common.css file:

.dart-panel .panel-bg {
  background-color: #c93434;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

And what the app looks like:

Re: Background color for About Widget

EmilyCaruccio — Fri, 17 May 2019 14:44:17 GMT

I've attached my common .css to see if I'm missing something obvious?

(BTW: Thanks for all your help!)

Re: Background color for About Widget

RobertScheitlin__GISP — Fri, 17 May 2019 14:55:28 GMT

Emily,

OK this is what I get when I use your file:

Re: Background color for About Widget

EmilyCaruccio — Fri, 17 May 2019 15:01:13 GMT

That is exactly what I want.
I'm stumped as to why it is not reflected in my web app.

Re: Background color for About Widget

RobertScheitlin__GISP — Fri, 17 May 2019 15:09:05 GMT

Is your app public?

Re: Background color for About Widget

EmilyCaruccio — Fri, 17 May 2019 15:22:38 GMT

It is transferring now:
https://giswebtest.dhec.sc.gov/diabetes

Re: Background color for About Widget

RobertScheitlin__GISP — Fri, 17 May 2019 15:53:12 GMT

Emily,

If look at this url: https://giswebtest.dhec.sc.gov/diabetes/themes/DartTheme/common.css the change you made is not there.

Re: Background color for About Widget

EmilyCaruccio — Fri, 17 May 2019 17:09:48 GMT

The edited version is there now.

Re: Background color for About Widget

RobertScheitlin__GISP — Fri, 17 May 2019 17:15:59 GMT

Emily,

Try adding the rule to this file then.

https://giswebtest.dhec.sc.gov/diabetes/jimu.js/css/jimu-theme.css

Re: Background color for About Widget

EmilyCaruccio — Fri, 17 May 2019 18:14:08 GMT

That did it!!! Thank you so much!!!!!

Re: Background color for About Widget

AndrewBernish__MDOT_ — Wed, 27 Jan 2021 22:23:52 GMT

Robert,

I am trying to change the background color and size of the About Widget in ArcGIS Web App Builder. I am using the Foldable Theme. My map is here: https://bit.ly/MDOT_Map_Vaccine and a screenshot of my current existing About image is pasted below. I do not like the legend widget because of the spacing and size so I created my own legend as an image (and used the About widget to place it). I want to make the background of this panel black and decrease the size so it doesn't cover so much of the map. Really - I just don't know where to add the code (if in ago-assistant, where or in the HTML snippet where?).

Thanks!