Whats the config to change the widget buttons background color (not the icon).
Solved! Go to 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);
}
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.
Is app builder developer required then?
I mean these widgets
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.
can you point me to docs or show an example of this CSS rule/syntax?
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);
}
thank you sir
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.
Not that I am aware of.
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.