nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

AJValentin

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.

Trouver plus de publications taguées avec

Accepted answers

All comments

AJValentin

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!

RobertScheitlin__GISP

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.

AJValentin

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

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

AJValentin

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

RobertScheitlin__GISP

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?

AJValentin

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

RobertScheitlin__GISP

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?

AJValentin

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.

RobertScheitlin__GISP

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

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.