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
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
Glenn,
This thread is not specific to a particular widget so you need to be making these changes in the themes common.css
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.
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:
So setting the .icon-node allowed you to change the background color for the widget button?
Thank you both. This solved it!
Don't forget to mark this as answered.
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); }
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
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.
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?
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.
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.
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.
Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
