Layer List Panel w/Basic Viewer Template for a transparent BG

1461
9
01-06-2017 01:07 PM
AJValentin
New Contributor

Hey all, I've created a New Web App from the Basic Viewer Template and I'm able to change everything with CSS except for the Layer List Panel.  I'm trying to make the background of the List/Items transparent to 50%, but for some reason I'm having no luck finding where to make this change.  Any help is appreciated.

0 Kudos
9 Replies
RobertScheitlin__GISP
MVP Emeritus

AJ,

   Here is some css for that:

.jimu-widget-layerList .layer-row{
  /*background-color: #ffffff;*/
  background-color: rgba(255, 255, 255, 0.2);
  height: 40px;
}

0 Kudos
AJValentin
New Contributor

Hey Robert,

Thanks for the quick reply.  I did try the above CSS, but there was no effect.  It seems I can use:

.esriLayerList .esriTitleContainer{

background-color: rgba(255, 255, 255, 0.2);

}

...that does change the BG, but it still seems there's another BG behind not allowing for the transparency to be viewable.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

AJ,

  OK, I did not know you were struggling with the widget containers background opacity as well. What theme are you using and is the widget in a onScreen place holder or a controller widget like the HeaderBar Controller?

0 Kudos
AJValentin
New Contributor

I'm using the Basic Viewer Template and the Layer widget (as a few others) are controlled by Panel Tools.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

AJ,


 Sorry your answer does not clear things up for me. Even if you choose the basic template you then have the option to choose which theme WAB will use. If you did not select another theme then the default foldable theme would be the one you are using and the LayerList widget would be part of the header controller widget. Is that your case?

0 Kudos
AJValentin
New Contributor

Ok, sorry...lemme dig and I'll respond.

0 Kudos
AJValentin
New Contributor

Ok, so here is where I'm going...

My Content
Create >> App >> Using a Template >> Select Basic Viewer >> Create App

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

AJ,

   Hmm. I am an admin for my AGOL and I do not have Create >> App >> Using a Template

I only have 

Create >> App >> Using Web App Builder.

Either way you are not using WAB so your question is not in the correct space. I would be able to help you if I had that create option or had access your your app online to look at the css classes used.

0 Kudos
AJValentin
New Contributor

Robert,

I also get Using the Web AppBuilder, so I get both:

Create >> App >>

------------------ >> Using a Template

------------------ >> Using the Web AppBuilder

My app is offline and cannot put online.  Well, I do appreciate your help.  I'll keep looking.

Much Appreciated!

0 Kudos