Whats the config to change the widget buttons background color (not the icon).
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):
<SPAN class="selector token">.jimu-widget-zoomslider, .jimu-widget-homebutton, .jimu-widget-mylocation, .jimu-widget-homebutton.inHome, .jimu-widget-homebutton .HomeButton .home, .jimu-widget-homebutton.inHome .HomeButton .home</SPAN><SPAN class="punctuation token">{</SPAN> <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="token function">rgb</SPAN><SPAN class="punctuation token">(</SPAN>88, 100, 116<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">-ms-filter</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Alpha(opacity=50)"</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="token function">rgba</SPAN><SPAN class="punctuation token">(</SPAN>88, 100, 116, 0.5<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="selector token">.jimu-widget-zoomslider:hover, .jimu-widget-homebutton:hover, .jimu-widget-mylocation:hover, .jimu-widget-homebutton.inHome:hover .HomeButton .home</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="token function">rgb</SPAN><SPAN class="punctuation token">(</SPAN>88, 100, 116<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">-ms-filter</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Alpha(opacity=70)"</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="token function">rgba</SPAN><SPAN class="punctuation token">(</SPAN>88, 100, 116, 0.7<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="selector token">.jimu-widget-onscreen-icon</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">position</SPAN><SPAN class="punctuation token">:</SPAN> absolute<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">cursor</SPAN><SPAN class="punctuation token">:</SPAN> pointer<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">border-radius</SPAN><SPAN class="punctuation token">:</SPAN> 4px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="token function">rgb</SPAN><SPAN class="punctuation token">(</SPAN>88, 100, 116<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">-ms-filter</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Alpha(opacity=20)"</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="token function">rgba</SPAN><SPAN class="punctuation token">(</SPAN>88, 100, 116, 0.2<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="selector token">.jimu-widget-onscreen-icon.jimu-state-selected</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="token function">rgb</SPAN><SPAN class="punctuation token">(</SPAN>88, 100, 116<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">-ms-filter</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Alpha(opacity=80)"</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="token function">rgba</SPAN><SPAN class="punctuation token">(</SPAN>88, 100, 116, 0.8<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="selector token">.jimu-widget-onscreen-icon:hover</SPAN><SPAN class="punctuation token">{</SPAN> <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="token function">rgb</SPAN><SPAN class="punctuation token">(</SPAN>88, 100, 116<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">-ms-filter</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Alpha(opacity=40)"</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="token function">rgba</SPAN><SPAN class="punctuation token">(</SPAN>88, 100, 116, 0.4<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
This is what I use:
<SPAN class="selector token">.jimu-widget-onscreen-icon</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">position</SPAN><SPAN class="punctuation token">:</SPAN> absolute<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">cursor</SPAN><SPAN class="punctuation token">:</SPAN> pointer<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">border-radius</SPAN><SPAN class="punctuation token">:</SPAN> 4px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="token function">rgb</SPAN><SPAN class="punctuation token">(</SPAN>34, 157, 123<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">-ms-filter</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Alpha(opacity=20)"</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="token function">rgba</SPAN><SPAN class="punctuation token">(</SPAN>34, 157, 123, 0.2<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="selector token">.jimu-widget-onscreen-icon.jimu-state-selected</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="token function">rgb</SPAN><SPAN class="punctuation token">(</SPAN>34, 157, 123<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">-ms-filter</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Alpha(opacity=80)"</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="token function">rgba</SPAN><SPAN class="punctuation token">(</SPAN>34, 157, 123, 0.8<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="selector token">.jimu-widget-onscreen-icon:hover</SPAN><SPAN class="punctuation token">{</SPAN> <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="token function">rgb</SPAN><SPAN class="punctuation token">(</SPAN>34, 157, 123<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">-ms-filter</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Alpha(opacity=40)"</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="token function">rgba</SPAN><SPAN class="punctuation token">(</SPAN>34, 157, 123, 0.4<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Yep
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.
can you point me to docs or show an example of this CSS rule/syntax?
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.
Is app builder developer required then?
I mean these widgets
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.
Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
