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

[RobertScheitlin__GISP]

Glenn,

   You are creating a new entry in the style.css that will override the css rule in the jimu.css

[glennhazelton]

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

[RobertScheitlin__GISP]

Glenn,

   What version of WAB are you using and just to check you are using the FoldableTeme right?

[glennhazelton]

the new one (1.2) as far as i know.

i did the upgrade.

i can see the 'themes' choices.

yes foldable theme.

[RobertScheitlin__GISP]

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);
}

[glennhazelton]

thanks

on last question...

which style.css do i put it into.??

[glennhazelton]

i found the right place!

server\apps\12\themes\FoldableTheme\common.css

[RobertScheitlin__GISP]

Glenn,

   In my testing I just threw it in the [install Dir]\server\apps\[App #]\themes\FoldableTheme\common.css

[glennhazelton]

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

[LeeAllen]

Thanks for your final post!