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

[glennhazelton]

just scroll down in this tread

the answers are there in an interchange between Robert and me.

[StanMcShinsky · Accepted solution]

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

[StanMcShinsky]

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

[RobertScheitlin__GISP]

Jay,

   Don't forget to mark this as answered.

[JayGeisen]

Thank you both. This solved it!

[RobertScheitlin__GISP]

Jay,

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

[JayGeisen]

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:

[glennhazelton]

hi

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.

[RobertScheitlin__GISP]

Glenn,

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

[glennhazelton]

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?