topic Re: Webapp builder builder - changing the widgets in header controller in ArcGIS Web AppBuilder Questions

Webapp builder builder - changing the widgets in header controller

GarethYoung1 — Sat, 22 Sep 2018 11:04:12 GMT

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

Re: Webapp builder builder - changing the widgets in header controller

RobertScheitlin__GISP — Sat, 11 Dec 2021 12:25:10 GMT

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

Re: Webapp builder builder - changing the widgets in header controller

GarethYoung1 — Tue, 25 Sep 2018 15:02:46 GMT

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

Re: Webapp builder builder - changing the widgets in header controller

RobertScheitlin__GISP — Tue, 25 Sep 2018 15:27:32 GMT

Gareth,

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

Re: Webapp builder builder - changing the widgets in header controller

GarethYoung1 — Tue, 25 Sep 2018 15:32:24 GMT

Top right

Re: Webapp builder builder - changing the widgets in header controller

RobertScheitlin__GISP — Sat, 11 Dec 2021 12:25:12 GMT

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

Re: Webapp builder builder - changing the widgets in header controller

RobertScheitlin__GISP — Tue, 25 Sep 2018 19:35:49 GMT

Gareth,

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

Re: Webapp builder builder - changing the widgets in header controller

GarethYoung1 — Wed, 26 Sep 2018 08:34:12 GMT

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

Re: Webapp builder builder - changing the widgets in header controller

RobertScheitlin__GISP — Wed, 26 Sep 2018 12:41:04 GMT

Gareth,

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