Widget Icon Color/Alpha

[JayGeisen]

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

[MalcolmEchaluce]

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. 

[MalcolmEchaluce]

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.

[JayGeisen]

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.

[RobertScheitlin__GISP]

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?

[JayGeisen]

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

[RobertScheitlin__GISP]

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

[LindseyStone]

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?

[RobertScheitlin__GISP]

Lindsey,

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

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

[LindseyStone]

Does anyone know if this special coding to change the icon transparency for the widgets on the map for the 1.2 app builder.  I had the below code working for WAB 1.1 version but it will not work in the 1.2 WAB version.

1. /* My Theme Style Adds */ 
2. .jimu-preload-widget-icon { 
3.   position: absolute; 
4.   cursor: pointer; 
5.   border-radius: 4px; 
6.   background-color: rgb(90, 107, 77); 
7.   -ms-filter: "Alpha(opacity=20)"; 
8.   background-color: rgba(90, 107, 77, 0.2); 
9. } 
10.  
11. .jimu-preload-widget-icon.jimu-state-selected { 
12.   background-color: rgb(90, 107, 77); 
13.   -ms-filter: "Alpha(opacity=80)"; 
14.     background-color: rgba(90, 107, 77, 0.8); 
15. } 
16.  
17. .jimu-preload-widget-icon:hover{ 
18.   background-color: rgb(90, 107, 77); 
19.   -ms-filter: "Alpha(opacity=40)"; 
20.   background-color: rgba(90, 107, 77, 0.4); 
21. }