topic JSON Change Background of Widget Button in ArcGIS JavaScript Maps SDK Questions

JSON Change Background of Widget Button

Lake_Worth_BeachAdmin — Fri, 20 Oct 2017 20:39:49 GMT

Whats the config to change the widget buttons background color (not the icon).

Re: JSON Change Background of Widget Button

RobertScheitlin__GISP — Sun, 22 Oct 2017 14:42:06 GMT

Joe,

I need a little more detail. Are you talking on Screen widget buttons or buttons in a controller widget like the HeaderController? BTW there is no way to do this in the config file it is a css rule that has to be added.

Re: JSON Change Background of Widget Button

Lake_Worth_BeachAdmin — Mon, 23 Oct 2017 11:40:54 GMT

Is app builder developer required then?

I mean these widgets

Re: JSON Change Background of Widget Button

RobertScheitlin__GISP — Mon, 23 Oct 2017 11:44:11 GMT

Joe,

Yes WAB Dev would be required to change those background colors. It is a simple css rule fix but not something you can do using AGOL version of WAB.

Re: JSON Change Background of Widget Button

Lake_Worth_BeachAdmin — Mon, 23 Oct 2017 11:46:24 GMT

can you point me to docs or show an example of this CSS rule/syntax?

Re: JSON Change Background of Widget Button

RobertScheitlin__GISP — Sat, 11 Dec 2021 20:20:52 GMT

Joe,

There will be no documentation on css customization. Add these css rules to your apps theme common.css

(i.e. [install dir]\server\apps\[app#]\themes\FoldableTheme\common.css):

.jimu-widget-zoomslider,
.jimu-widget-homebutton,
.jimu-widget-mylocation,
.jimu-widget-homebutton.inHome,
.jimu-widget-homebutton .HomeButton .home,
.jimu-widget-homebutton.inHome .HomeButton .home{
  background-color: rgb(88, 100, 116);
  -ms-filter: "Alpha(opacity=50)";
  background-color: rgba(88, 100, 116, 0.5);
}

.jimu-widget-zoomslider:hover,
.jimu-widget-homebutton:hover,
.jimu-widget-mylocation:hover,
.jimu-widget-homebutton.inHome:hover .HomeButton .home {
  background-color: rgb(88, 100, 116);
  -ms-filter: "Alpha(opacity=70)";
  background-color: rgba(88, 100, 116, 0.7);
}

.jimu-widget-onscreen-icon {
  position: absolute;
  cursor: pointer;
  border-radius: 4px;
  background-color: rgb(88, 100, 116);
  -ms-filter: "Alpha(opacity=20)";
  background-color: rgba(88, 100, 116, 0.2);
}

.jimu-widget-onscreen-icon.jimu-state-selected {
  background-color: rgb(88, 100, 116);
  -ms-filter: "Alpha(opacity=80)";
    background-color: rgba(88, 100, 116, 0.8);
}

.jimu-widget-onscreen-icon:hover{
  background-color: rgb(88, 100, 116);
  -ms-filter: "Alpha(opacity=40)";
  background-color: rgba(88, 100, 116, 0.4);
}
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: JSON Change Background of Widget Button

Lake_Worth_BeachAdmin — Mon, 23 Oct 2017 12:51:01 GMT

thank you sir

Re: JSON Change Background of Widget Button

Lake_Worth_BeachAdmin — Mon, 18 Dec 2017 16:07:25 GMT

Is there a way to control this in AGOL Assistant with JSON? I saw a video somewhere about this I think but can't find it any longer.

Re: JSON Change Background of Widget Button

RobertScheitlin__GISP — Mon, 18 Dec 2017 16:16:11 GMT

Not that I am aware of.

Re: JSON Change Background of Widget Button

GeorgeKatsambas — Fri, 12 Oct 2018 19:02:10 GMT

I want to change these widgets background color in WAB 2.10, I add this text

.jimu-widget-onscreen-icon {
position: absolute;
cursor: pointer;
border-radius: 4px;
background-color: rgb(88, 100, 116);
-ms-filter: "Alpha(opacity=20)";
background-color: rgba(88, 100, 116, 0.2);
}

to the common.css under app # themes/foldable themes which changes it to a blank color. If I wanted a blue background for example would it be the same file I change. Not the home and zoom but my widgets or all if necessary.

Re: JSON Change Background of Widget Button

RobertScheitlin__GISP — Fri, 12 Oct 2018 19:56:02 GMT

Yep

Re: JSON Change Background of Widget Button

RobertScheitlin__GISP — Sat, 11 Dec 2021 20:20:54 GMT

This is what I use:

.jimu-widget-onscreen-icon {
  position: absolute;
  cursor: pointer;
  border-radius: 4px;
  background-color: rgb(34, 157, 123);
  -ms-filter: "Alpha(opacity=20)";
  background-color: rgba(34, 157, 123, 0.2);
}

.jimu-widget-onscreen-icon.jimu-state-selected {
  background-color: rgb(34, 157, 123);
  -ms-filter: "Alpha(opacity=80)";
    background-color: rgba(34, 157, 123, 0.8);
}

.jimu-widget-onscreen-icon:hover{
  background-color: rgb(34, 157, 123);
  -ms-filter: "Alpha(opacity=40)";
  background-color: rgba(34, 157, 123, 0.4);
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍