Widget icon customization

[QaziIqbal]

I have a custom application using Tab Theme template. The widget icons that show over the map in both layouts are not visible when my map displays the aerial basemap because of the transparency in those widgets.

You can see them in attached picture.

I would like to put a white background for those widgets icons or else move them up in the header controller on the right side which would be better.

Any help will be highly appreciated.

Thanks

Qazi

[RobertScheitlin__GISP · Accepted solution]

Qazi,

Just add these rules to [install dir]\server\apps\[app#]\themes\TabTheme\common.css

.jimu-widget-onscreen-icon {
  position: absolute;
  cursor: pointer;
  border-radius: 4px;
  background-color: rgb(0, 0, 0);
  -ms-filter: "Alpha(opacity=80)";
  background-color: rgba(0, 0, 0, 0.7);
}

.jimu-widget-onscreen-icon.jimu-state-selected {
  background-color: rgb(0, 0, 0);
  -ms-filter: "Alpha(opacity=100)";
    background-color: rgba(0, 0, 0, 1);
}

.jimu-widget-onscreen-icon:hover{
  background-color: rgb(0, 0, 0);
  -ms-filter: "Alpha(opacity=85)";
  background-color: rgba(0, 0, 0, 0.85);
}

[QaziIqbal]

Robert

It solved the problem and now it is looking better.

Thanks for your assistance.

Qazi

[QaziIqbal]

Robert

Thanks for helping out, but something more came related to this question.

I changed the color of icon and put white border too, but my staff is suggesting that it would be better if these icons are moved up on the header bar. I am attaching the screen capture and red color shows where we want to move them.

Any help to do this is highly appreciated.

Thanks

Qazi

[RobertScheitlin__GISP]

Qazi,

  The tab theme does not support adding widgets to the header. There are many other themes that support this but the Tab theme is not one of them.

[AdrianWelsh]

Robert,

How the heck do you know all this stuff?!? This was a tremendous help, thanks!

[AdrianWelsh]

Ok, in all seriousness, I made these changes (and adjusted the transparency some) and it works great! However, they do not reflect in my web map and I am thinking that it is due to the browser cache remembering the old style (since in another browser with clean cache, it works like it should). Is there a way to force a browser refresh or something similar? I know that clearing my cache will likely work (this is in Chrome), but I don't want every I send this to have to go through this similar thing. Let me know if you have ideas (and I have tried the "hard" refresh of Ctrl+F5).

[RobertScheitlin__GISP]

Adrian,

   These threads may help:

Automate Cache Clearing - Web App Builder 

Refreshing Web Appbuilder 

[AdrianWelsh]

Wow, this looks a lot trickier than just some simple changes. I might just post a new question on GeoNet just to try and consolidate the answers and get feedback on what is best (I hope that is ok and not too duplicatory but I feel like there is not enough clarity in those threads).