JSON Change Background of Widget Button

[Lake_Worth_BeachAdmin]

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

[RobertScheitlin__GISP]

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.

[Lake_Worth_BeachAdmin]

Is app builder developer required then? 

I mean these widgets

[RobertScheitlin__GISP]

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.

[Lake_Worth_BeachAdmin]

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

[RobertScheitlin__GISP · Accepted solution]

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

[Lake_Worth_BeachAdmin]

thank you sir

[Lake_Worth_BeachAdmin]

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.

[RobertScheitlin__GISP]

Not that I am aware of.

[GeorgeKatsambas]

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.