Select to view content in your preferred language

Widget Icon Color/Alpha

7625
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
29 Replies
glennhazelton
Occasional Contributor III

just scroll down in this tread

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

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

StanMcShinsky
Regular Contributor

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
MVP Emeritus

Jay,

   Don't forget to mark this as answered.

0 Kudos
JayGeisen
New Contributor III

Thank you both. This solved it!

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Jay,

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

0 Kudos
JayGeisen
New Contributor III

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:

HeaderBefore.jpg

Header.jpg

glennhazelton
Occasional Contributor III

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.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Glenn,

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

0 Kudos
glennhazelton
Occasional Contributor III

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?

0 Kudos