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
Solved! Go to Solution.
Glenn,
You are creating a new entry in the style.css that will override the css rule in the jimu.css
ok i get that i am adding code.
i thank you for providing it.
i have tried in 4 places but it isn't impacting the background of the icons in my app.
server\apps\12\themes\FoldableTheme\panels\FoldablePanel\style.css
server\apps\12\themes\FoldableTheme\styles\green\style.css
server\apps\12\themes\FoldableTheme\common.css
server\apps\12\themes\FoldableTheme\widgets\HeaderController\css\style.css
Glenn,
What version of WAB are you using and just to check you are using the FoldableTeme right?
the new one (1.2) as far as i know.
i did the upgrade.
i can see the 'themes' choices.
yes foldable theme.
Glenn,
OK in 1.2 they change the css class name so now you need to add this instead:
/* My Theme Style Adds */ .jimu-widget-onscreen-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-widget-onscreen-icon.jimu-state-selected { background-color: rgb(90, 107, 77); -ms-filter: "Alpha(opacity=80)"; background-color: rgba(90, 107, 77, 0.8); } .jimu-widget-onscreen-icon:hover{ background-color: rgb(90, 107, 77); -ms-filter: "Alpha(opacity=40)"; background-color: rgba(90, 107, 77, 0.4); }
and maybe something like this for the other onscreen stuff like the home and locate:
.jimu-widget-zoomslider, .jimu-widget-homebutton, .jimu-widget-mylocation { background-color: rgb(90, 107, 77); -ms-filter: "Alpha(opacity=50)"; background-color: rgba(90, 107, 77, 0.5); } .jimu-widget-zoomslider:hover, .jimu-widget-homebutton:hover, .jimu-widget-mylocation:hover { background-color: rgb(90, 107, 77); -ms-filter: "Alpha(opacity=70)"; background-color: rgba(90, 107, 77, 0.7); }
thanks
on last question...
which style.css do i put it into.??
i found the right place!
server\apps\12\themes\FoldableTheme\common.css
Glenn,
In my testing I just threw it in the [install Dir]\server\apps\[App #]\themes\FoldableTheme\common.css
here are locations i used to change the colors etc for the home, zoom in/out and location icons and those in the headercontrol
zoomslider\css\style.css -line: 3
background-color: rgba(0, 0, 0, 0.2);
changed to deep red
background-color: rgba(153, 0, 0, 0.8);
homebutton\css\styles.css -line: 7
background-color: rgba(0, 0, 0, 0.2);
changed to deep red
background-color: rgba(153, 0, 0, 0.8);
mylocation\css\styles.css -line: 39
background-color: rgba(0, 0, 0, 0.2);
changed to deep red
background-color: rgba(153, 0, 0, 0.8);
themes\foldabletheme\widgets\headercontroller\css\style.css - line:52
opacity: 0.6
changed to
opacity: 0.8
Thanks for your final post!