How to customize visuals for layer list widget

Question

Hi, we like the functionality of the layerlist widget but do not care for the visuals.  We would like to maintain the functionality while changing the visuals.  Is there any samples on how to write your own visuals on top of the layerlistviewmodel?

DavidColey · Answer

Ok I see now. I'm sure you already know that you can see the widget's view js from it's git
arcgis-js-api/LayerList.js at 4master · Esri/arcgis-js-api · GitHub 
although I'm not sure if that helps you.  We were able to at least get the legend element for each layer in the list to display from a trigger action by working with the legend.  Not sure if that helps you either.  It's here:

https://community.esri.com/thread/189122-jsapi-4x-layerlist-and-legend-together?sr=inbox

if you haven't seen it already

JasonRainwater · Answer

Hey David, it's more than just CSS as we would want to move things around entirely like where the expander is and such. It would be very helpful for us to see the code of the layer list widget itself to give us an idea of what we would need to do in order to write custom HTML on top of the layerlistviewmodel. Things like building nondeterministic heirarchical elements and such

DavidColey · Answer

I assume by visuals you mean style and css.  I'd start by looking at the styling guide for 4.x and if the approaches listed there are too coarse then you can begin to go into the main.css for changes that you want to override in your own css.