topic Re: Change widget icon colour, transparency ignored in ArcGIS Web AppBuilder Questions

Change widget icon colour, transparency ignored

RichardReinicke — Wed, 11 Jan 2017 10:29:37 GMT

Hi,

I`ve a question and I`m not sure if I`m encountering a bug or doing something wrong. I just played around with designing custom themes and I`m now ready so far.

If I now choose my theme or any other and I switch to "Widgets" Tab, there I can add widgets to placeholders or controllers ... okay so far.

If I do so, then on the next screen I get the option to change the widget symbol. When I now choose a PNG with transparency, the transparency will be ignored and I get a ugly background colour behind my icon.

I`m using Web AppBuilder 2.2 and here`s what I found in my build_num.txt (maybe it helps you)
origin/develop-a2c7d09b5fa36afca43c94191bc92697645a475c-2016/10/11-18:20:11.98-246

Can someone reproduce this behaviour?

Best regards,
Richard

Re: Change widget icon colour, transparency ignored

RobertScheitlin__GISP — Wed, 11 Jan 2017 13:02:50 GMT

Richard,

On screen placeholders all have a gray background color to the div defined in the css. So that is why you are seeing that. You would have to edit the css to change that.

Re: Change widget icon colour, transparency ignored

VatsalDave2 — Fri, 29 Dec 2017 11:21:30 GMT

Robert,

Which are the specific CSS files to be edited to change the gray background to, say, light blue?

Thanks.

p.s. I edited installdir\server\apps\#\jimu.js\css\jimu-theme.css (lines 123, 125, 129 and 133) and I am getting the desired results. Am I doing things correctly?

Re: Change widget icon colour, transparency ignored

RobertScheitlin__GISP — Sun, 12 Dec 2021 05:14:38 GMT

Vatsal,

The way I do this is in the apps theme common.css (i.e. [instal dir]\server\apps\[app#]\themes\FoldableTheme\common.css).

.jimu-widget-onscreen-icon {
  position: absolute;
  cursor: pointer;
  border-radius: 4px;
  background-color: rgb(88, 100, 116);
  -ms-filter: "Alpha(opacity=20)";
  background-color: rgba(88, 100, 116, 0.2);
}

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

.jimu-widget-onscreen-icon:hover{
  background-color: rgb(88, 100, 116);
  -ms-filter: "Alpha(opacity=40)";
  background-color: rgba(88, 100, 116, 0.4);
}
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Change widget icon colour, transparency ignored

VatsalDave2 — Fri, 29 Dec 2017 13:41:57 GMT

Robert,

I am using version 2.3 and Tab Theme. The apps theme common.css here has only one line viz. @import url("panels/TabPanel/style.css");

I had tried adding the code here taking cue from your reply to a similar query. Somehow that did not work. Could be because of my older version?

Regards,

Vatsal

Re: Change widget icon colour, transparency ignored

RobertScheitlin__GISP — Sun, 12 Dec 2021 05:14:40 GMT

Vatsal,

Sorry I forgot to mention you need to change the color values in the css rules:

Here is a light blue:

.jimu-widget-onscreen-icon {
  position: absolute;
  cursor: pointer;
  border-radius: 4px;
  background-color: rgb(52, 153, 220);
  -ms-filter: "Alpha(opacity=20)";
  background-color: rgba(52, 153, 220, 0.4);
}

.jimu-widget-onscreen-icon.jimu-state-selected {
  background-color: rgb(52, 153, 220);
  -ms-filter: "Alpha(opacity=80)";
    background-color: rgba(52, 153, 220, 0.8);
}

.jimu-widget-onscreen-icon:hover{
  background-color: rgb(52, 153, 220);
  -ms-filter: "Alpha(opacity=40)";
  background-color: rgba(52, 153, 220, 0.6);
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Change widget icon colour, transparency ignored

VatsalDave2 — Fri, 29 Dec 2017 14:10:09 GMT

Yes. It is working now. I had tried using different color codes earlier. Maybe I was making some mistake. But this is working great.

Thanks once again.

Regards,

Vatsal

Re: Change widget icon colour, transparency ignored

RobertScheitlin__GISP — Fri, 29 Dec 2017 14:24:58 GMT

Vatsal,

Don't forget to mark replies as helpful if they were.