Webapp builder builder - changing the widgets in header controller

[GarethYoung1]

@ 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?

[RobertScheitlin__GISP]

Gareth,

   The color of the selected icon is controlled by this css rule in the Headercontroller css/style.css:

.jimu-widget-header-controller .icon-node.jimu-state-selected {
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 1;
    border-right-width: initial;
    border-bottom-width: initial;
    border-left-width: initial;
    border-right-color: initial;
    border-bottom-color: initial;
    border-left-color: initial;
    border-style: solid none none;
    border-image: initial;
    border-top: 2px solid rgb(132, 145, 161);
}‍‍‍‍‍‍‍‍‍‍‍‍‍

Notice the background-color is set to a black with with 30% alpha

This is the css rule that affects the hover:

.jimu-widget-header-controller .icon-node:hover {
    opacity: 1;
}‍‍‍

[GarethYoung1]

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

[RobertScheitlin__GISP]

Gareth,

   What corner do you have your overview configured to be shown in?

[GarethYoung1]

Top right

[RobertScheitlin__GISP · Accepted solution]

Gareth,

   Then here are the rules for that position:

.esriOverviewMap.ovwTR .ovwContainer {
    bottom: 0px;
    right: 0px;
    border-bottom: 1px solid #0c2340;
    border-left: 1px solid #0c2340;
    padding-bottom: 2px;
    padding-left: 2px;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

.esriOverviewMap.ovwTR .ovwShow,
.esriOverviewMap.ovwBL .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.ovwBL .ovwShow,
.esriOverviewMap.ovwTR .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;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The issue is ../images/overview.png resolves to themes/images/overview.png

[RobertScheitlin__GISP]

Gareth,

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

[GarethYoung1]

Thanks Robert.  What URL would I need to use to have the image hosted in an images folder within the Foldable Theme folder?

[RobertScheitlin__GISP]

Gareth,

background: url(images/overview.png) 0px 0px;‍