@ 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>
Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
