Change background color and size of About Widget

673
6
01-27-2021 02:01 PM
Labels (1)
AndrewBernish__MDOT_
New Contributor III

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. I tried background-color and followed this post, but the answer is no longer there. Really - I just don't know where to add the code (if in ago-assistant, where or in the HTML snippet where?). 

Thanks!

AndrewBernish__MDOT__0-1611784618528.png

 

0 Kudos
6 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Andrew,

   These are some css rules that would work for that specific application.

#uniqName_20_1.jimu-widget-frame.jimu-container {
    background-color: black;
}

div#_24_panel {
    width: 350px !important;
    height: 350px !important;
}
0 Kudos
AndrewBernish__MDOT_
New Contributor III

Thanks so much Robert. Apologies, but I'm still not sure where to paste this. Do I do it in the ago-assistant top section or bottom section or from within the About widget's html snippet box? (I've attached the word document version of both the top and the bottom code from ago-assistant). Really appreciate your help. 

0 Kudos
AndrewBernish__MDOT_
New Contributor III

I'm just unclear where I can alter the common css rules and insert this code. 

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Sorry I am not a Portal user. So I can't help there.

0 Kudos
AndrewBernish__MDOT_
New Contributor III

Thanks. But from this previous post - it looks like you can change the bg color. Where do propose inserting this code w/o Portal? 

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

In WAB Developer you would add those new css rules in the themes style.css

0 Kudos