topic Re: Widget icon customization in Web AppBuilder Custom Widgets Questions

Widget icon customization

QaziIqbal — Mon, 11 Apr 2016 15:56:13 GMT

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

Re: Widget icon customization

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:37:15 GMT

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

Re: Widget icon customization

QaziIqbal — Mon, 11 Apr 2016 18:33:24 GMT

Robert

It solved the problem and now it is looking better.

Thanks for your assistance.

Qazi

Re: Widget icon customization

QaziIqbal — Tue, 12 Apr 2016 15:23:20 GMT

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

Re: Widget icon customization

RobertScheitlin__GISP — Tue, 12 Apr 2016 15:36:36 GMT

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.

Re: Widget icon customization

AdrianWelsh — Thu, 08 Dec 2016 19:48:34 GMT

Robert,

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

Re: Widget icon customization

AdrianWelsh — Thu, 08 Dec 2016 20:54:37 GMT

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).

Re: Widget icon customization

RobertScheitlin__GISP — Thu, 08 Dec 2016 21:45:28 GMT

Adrian,

These threads may help:

Automate Cache Clearing - Web App Builder

Refreshing Web Appbuilder

Re: Widget icon customization

AdrianWelsh — Thu, 08 Dec 2016 22:12:21 GMT

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).