Select to view content in your preferred language

Widget Icon Color/Alpha

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

Glenn,

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

0 Kudos
glennhazelton
Occasional Contributor III

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Glenn,

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

0 Kudos
glennhazelton
Occasional Contributor III

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

i did the upgrade.

i can see the 'themes' choices.

yes foldable theme.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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
Occasional Contributor III

thanks

on last question...

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

0 Kudos
glennhazelton
Occasional Contributor III

i found the right place!

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Glenn,

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

glennhazelton
Occasional Contributor III

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
Occasional Contributor

Thanks for your final post!

0 Kudos