Widget Icon Color/Alpha

5246
29
Jump to solution
06-24-2015 08:21 AM
JayGeisen
New Contributor III

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

0 Kudos
1 Solution

Accepted Solutions
StanMcShinsky
Regular Contributor

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

View solution in original post

29 Replies
MalcolmEchaluce
Occasional Contributor

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. 

0 Kudos
MalcolmEchaluce
Occasional Contributor

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.

0 Kudos
JayGeisen
New Contributor III

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.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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?

Preview.jpg

JayGeisen
New Contributor III

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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
Occasional Contributor III

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?

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Lindsey,

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

.esriSimpleSliderIncrementButton {
    background-color: rgba(0, 0, 0, 0.4);
}
LindseyStone
Occasional Contributor III

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. .jimu-preload-widget-icon.jimu-state-selected { 
  11.   background-color: rgb(90, 107, 77); 
  12.   -ms-filter: "Alpha(opacity=80)"
  13.     background-color: rgba(90, 107, 77, 0.8); 
  14.  
  15. .jimu-preload-widget-icon:hover{ 
  16.   background-color: rgb(90, 107, 77); 
  17.   -ms-filter: "Alpha(opacity=40)"
  18.   background-color: rgba(90, 107, 77, 0.4); 
0 Kudos