@ jgeisen Using web appbuilder dev edition (foldable theme) is there a way to change the hover colour and selected colour of the widgets in the header controller widget?
Gareth,
Then here are the rules for that position:
<SPAN class="selector token">.esriOverviewMap.ovwTR .ovwContainer</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">bottom</SPAN><SPAN class="punctuation token">:</SPAN> 0px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">right</SPAN><SPAN class="punctuation token">:</SPAN> 0px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">border-bottom</SPAN><SPAN class="punctuation token">:</SPAN> 1px solid #0c2340<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">border-left</SPAN><SPAN class="punctuation token">:</SPAN> 1px solid #0c2340<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">padding-bottom</SPAN><SPAN class="punctuation token">:</SPAN> 2px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">padding-left</SPAN><SPAN class="punctuation token">:</SPAN> 2px<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="selector token"> .esriOverviewMap.ovwTR .ovwShow, .esriOverviewMap.ovwBL .ovwHide</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">background</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="url token">url(../images/overview.png)</SPAN> 0px 0px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">background-image</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="url token">url(../images/overview.png)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">background-position-x</SPAN><SPAN class="punctuation token">:</SPAN> 0px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">background-position-y</SPAN><SPAN class="punctuation token">:</SPAN> 0px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">background-size</SPAN><SPAN class="punctuation token">:</SPAN> initial<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">background-repeat-x</SPAN><SPAN class="punctuation token">:</SPAN> initial<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">background-repeat-y</SPAN><SPAN class="punctuation token">:</SPAN> initial<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">background-attachment</SPAN><SPAN class="punctuation token">:</SPAN> initial<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">background-origin</SPAN><SPAN class="punctuation token">:</SPAN> initial<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">background-clip</SPAN><SPAN class="punctuation token">:</SPAN> initial<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> initial<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="selector token">.esriOverviewMap.ovwBL .ovwShow, .esriOverviewMap.ovwTR .ovwHide</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">background</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="url token">url(../images/overview.png)</SPAN> 0px 0px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">background-image</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="url token">url(../images/overview.png)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">background-position-x</SPAN><SPAN class="punctuation token">:</SPAN> 0px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">background-position-y</SPAN><SPAN class="punctuation token">:</SPAN> 0px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">background-size</SPAN><SPAN class="punctuation token">:</SPAN> initial<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">background-repeat-x</SPAN><SPAN class="punctuation token">:</SPAN> initial<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">background-repeat-y</SPAN><SPAN class="punctuation token">:</SPAN> initial<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">background-attachment</SPAN><SPAN class="punctuation token">:</SPAN> initial<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">background-origin</SPAN><SPAN class="punctuation token">:</SPAN> initial<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">background-clip</SPAN><SPAN class="punctuation token">:</SPAN> initial<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> initial<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>
The issue is ../images/overview.png resolves to themes/images/overview.png
Top right
What corner do you have your overview configured to be shown in?
Thanks Robert
Do you know how I can overwite the following css to change the overview map. Below is what I have tried to implement? I added this to the commom.css under the theme.
.esriOverviewMap.ovwBR .ovwShow, .esriOverviewMap.ovwTL .ovwHide { background: url(../images/overview.png) 0px 0px; background-image: url(../images/overview.png); background-position-x: 0px; background-position-y: 0px; background-size: initial; background-repeat-x: initial; background-repeat-y: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial;}.esriOverviewMap.ovwTR .ovwContainer { top: 0px; right: 0px; border-bottom: 1px solid #0c2340 !Important; border-left: 1px solid #0c2340 !Important; padding-bottom: 2px; padding-left: 2px;}
The color of the selected icon is controlled by this css rule in the Headercontroller css/style.css:
<SPAN class="selector token">.jimu-widget-header-controller .icon-node.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">rgba</SPAN><SPAN class="punctuation token">(</SPAN>0, 0, 0, 0.3<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">opacity</SPAN><SPAN class="punctuation token">:</SPAN> 1<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">border-right-width</SPAN><SPAN class="punctuation token">:</SPAN> initial<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">border-bottom-width</SPAN><SPAN class="punctuation token">:</SPAN> initial<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">border-left-width</SPAN><SPAN class="punctuation token">:</SPAN> initial<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">border-right-color</SPAN><SPAN class="punctuation token">:</SPAN> initial<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">border-bottom-color</SPAN><SPAN class="punctuation token">:</SPAN> initial<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">border-left-color</SPAN><SPAN class="punctuation token">:</SPAN> initial<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">border-style</SPAN><SPAN class="punctuation token">:</SPAN> solid none none<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">border-image</SPAN><SPAN class="punctuation token">:</SPAN> initial<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">border-top</SPAN><SPAN class="punctuation token">:</SPAN> 2px solid <SPAN class="token function">rgb</SPAN><SPAN class="punctuation token">(</SPAN>132, 145, 161<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>
Notice the background-color is set to a black with with 30% alpha
This is the css rule that affects the hover:
<SPAN class="selector token">.jimu-widget-header-controller .icon-node:hover</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">opacity</SPAN><SPAN class="punctuation token">:</SPAN> 1<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
