topic Re: Widget Icon Color/Alpha in ArcGIS Web AppBuilder Questions

Widget Icon Color/Alpha

JayGeisen — Wed, 24 Jun 2015 15:21:30 GMT

I'm hoping someone can point me in the direction of where I can go to change the widget icon color (alpha/transparency/etc)? Thanks

Re: Widget Icon Color/Alpha

MalcolmEchaluce — Wed, 24 Jun 2015 15:26:03 GMT

You will need to modify the .css of that widget. If you go into your widgets/Query/css/style.css, you should be able to find the section for the widget icon to change some of its characteristics.

Re: Widget Icon Color/Alpha

MalcolmEchaluce — Wed, 24 Jun 2015 15:28:03 GMT

Sorry, that was for the Query widget. Obviously, you'd go into the name of the widget instead, so widgets/WIDGET NAME/css/style.css.

Re: Widget Icon Color/Alpha

JayGeisen — Wed, 24 Jun 2015 15:38:38 GMT

Thanks for the reply, Malcolm. I've tried changing the settings in that file and it doesn't seem to affect anything. It must be set somewhere else.

Re: Widget Icon Color/Alpha

RobertScheitlin__GISP — Wed, 24 Jun 2015 15:57:12 GMT

Jay,

The widgets icon is in the widgets images folder (normally called icon.png), but you most likely already knew that. So are you asking about how to change the widgets placeholder background color?

Re: Widget Icon Color/Alpha

StanMcShinsky — Wed, 24 Jun 2015 16:01:23 GMT

Jay Geisen

The icons for the widgets are images so you need to go to \widgets\<WIDGET NAME>\images and either change out the existing icon or open it in an image editing program and edit the image itself.

-Stan

Re: Widget Icon Color/Alpha

JayGeisen — Wed, 24 Jun 2015 16:07:31 GMT

Robert,

Yes, I believe that is what I'm trying to do. The icons themselves are white PNGs with transparent backgrounds, right? But when the page loads, they're displayed against the (in my case) black header as gray. And they change alpha values (or are they colors?) when you hover over them to white. I'm just wondering where the settings for these are.

Thanks

Re: Widget Icon Color/Alpha

RobertScheitlin__GISP — Sun, 12 Dec 2021 00:42:28 GMT

Jay,

The color of the preload widget icon is controlled by the css. The way that I handled this is by adding some css rules to the particular theme color style.css for my app.

server\apps\11\themes\FoldableTheme\styles\olive\style.css

/* My Theme Style Adds */
.jimu-preload-widget-icon {
  position: absolute;
  cursor: pointer;
  border-radius: 4px;
  background-color: rgb(90, 107, 77);
  -ms-filter: "Alpha(opacity=20)";
  background-color: rgba(90, 107, 77, 0.2);
}

.jimu-preload-widget-icon.jimu-state-selected {
  background-color: rgb(90, 107, 77);
  -ms-filter: "Alpha(opacity=80)";
    background-color: rgba(90, 107, 77, 0.8);
}

.jimu-preload-widget-icon:hover{
  background-color: rgb(90, 107, 77);
  -ms-filter: "Alpha(opacity=40)";
  background-color: rgba(90, 107, 77, 0.4);
}

Re: Widget Icon Color/Alpha

StanMcShinsky — Sun, 12 Dec 2021 00:42:30 GMT

Jay,

If you go to <app#>\themes\WidgetTheme\widgets\HeaderController\css\style.css and change the values in this part of the css around line 57 then you can adjust the transparency over the icons or other options.

.jimu-widget-header-controller .icon-node{
  cursor: pointer;
  opacity: 0.6;
  text-align: center;
  border-right: 1px solid #323e4f;
}

-Stan

Re: Widget Icon Color/Alpha

RobertScheitlin__GISP — Wed, 24 Jun 2015 20:06:05 GMT

Jay,

Don't forget to mark this as answered.

Re: Widget Icon Color/Alpha

JayGeisen — Wed, 24 Jun 2015 20:21:36 GMT

Thank you both. This solved it!

Re: Widget Icon Color/Alpha

RobertScheitlin__GISP — Wed, 24 Jun 2015 20:26:59 GMT

Jay,

So setting the .icon-node allowed you to change the background color for the widget button?

Re: Widget Icon Color/Alpha

JayGeisen — Thu, 25 Jun 2015 13:30:28 GMT

Hi Robert,

What the icon-node edit allowed me to do was to effectively change the color of the icons (the ones in the header anyway) through opacity. What I was basically after was changing the appearance of the white icons against the black background from a dark gray to a much lighter gray for greater contrast. Now that I go back over my original question and your responses, I realize I probably wasn't explaining what I was trying to do very well.

Before & After:

Re: Widget Icon Color/Alpha

LindseyStone — Fri, 21 Aug 2015 20:06:36 GMT

This allowed me to change the widgets displaying over the map. And then going into the individual css file of the Home widget I was able to change the the color and alpha. What about the plus and minus tool that zooms the map in and out so I can make them all match?

Re: Widget Icon Color/Alpha

RobertScheitlin__GISP — Sun, 12 Dec 2021 00:42:33 GMT

Lindsey,

.esriSimpleSliderDecrementButton {
    background-color: rgba(0, 0, 0, 0.4);
}

.esriSimpleSliderIncrementButton {
    background-color: rgba(0, 0, 0, 0.4);
}

Re: Widget Icon Color/Alpha

glennhazelton — Mon, 24 Aug 2015 18:50:57 GMT

i am having troubling sorting out which line in this code

C:\inetpub\wwwroot\WAB\server\apps\12\widgets\eSearch\css\style.css

i should change to get the background of the icon to be less transparent.

i got the header part to work but i am a bit lost on these icons that float on the map.

Re: Widget Icon Color/Alpha

RobertScheitlin__GISP — Mon, 24 Aug 2015 19:04:38 GMT

Glenn,

This thread is not specific to a particular widget so you need to be making these changes in the themes common.css

Re: Widget Icon Color/Alpha

glennhazelton — Tue, 25 Aug 2015 11:46:56 GMT

Robert,

sorry to be missing this, but i just don't see any code in the ...\theme\styles\green\style.css code that looks like what you show in your Jun 24, 2015 9:15 entry above. did you add this code?

Re: Widget Icon Color/Alpha

RobertScheitlin__GISP — Tue, 25 Aug 2015 12:39:24 GMT

Glenn,

You are creating a new entry in the style.css that will override the css rule in the jimu.css

Re: Widget Icon Color/Alpha

glennhazelton — Tue, 25 Aug 2015 13:08:10 GMT

ok i get that i am adding code.

i thank you for providing it.

i have tried in 4 places but it isn't impacting the background of the icons in my app.

server\apps\12\themes\FoldableTheme\panels\FoldablePanel\style.css

server\apps\12\themes\FoldableTheme\styles\green\style.css

server\apps\12\themes\FoldableTheme\common.css

server\apps\12\themes\FoldableTheme\widgets\HeaderController\css\style.css