Set Transparency of Legend Window in WAB DE

580
9
Jump to solution
06-14-2017 06:41 AM
TimHayes
Regular Contributor

I am using WAB DE 2.4. In what file do I change the transparency setting in the Legend Window? Where is this file?

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Tim,

  Add these two css rules to the Legend widgets style.css file:

.jimu-widget-frame.jimu-container {
    background-color: rgba(255,255,255,0.3);
}

.jimu-panel {
    background-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.6);
}

Adjust the 4 alpha property as desired.

View solution in original post

9 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Tim,

Are you talking about the whole widget or just the legend contents?

0 Kudos
TimHayes
Regular Contributor

By default the background inside the Legend Window is solid white. I want to change the transparency of this white space. Just cannot seem to locate the file in which to do this. 

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Tim,

  Add these two css rules to the Legend widgets style.css file:

.jimu-widget-frame.jimu-container {
    background-color: rgba(255,255,255,0.3);
}

.jimu-panel {
    background-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.6);
}

Adjust the 4 alpha property as desired.

PayelMallick
New Contributor

There are Legend widget in both server folder and stem app folder. The changes are not reflecting

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Payel,

  Change in the stemapp folder only apply to new apps for existing apps you have to make the change in the server\[app#]\widgets\Legend folder. Once you make the change refresh your browser (and it is sometimes necessary to clear your browsers cache).

Mina
by
New Contributor II

Hi Robert,

When I tried adding your code to the specific widget's style.css, the transparency only appears when moving the panel window (I'm using the Jewelry Box theme).  How can we make the transparency appear right when the widget panel is opened without the need to move it? Also, this transparency effect is added to all the floating widgets even though I only changed the css for one specific widget.  By the way, I'm using WAB Dev 2.11. I appreciate your feedback!

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Mina,

  I am not aware of any css rule you could apply to make this specific to just the legend widgets panel.

0 Kudos
Mina
by
New Contributor II

Robert,

OK, how about making the transparency of the panel appear without having to move the panel window?  In this case, if we just open the widget, it's not transparent unless you move the panel window. Thank you!

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Mina,

   I do not see that issue on my end, unless I am using a organizational theme color.