QGIS - QGIS2WEB - Leaflet - CSS Code - Changing background colors [15.09.22]

Question

I am using the QGIS2WEB plugin within QGIS 3.0. I have selected "Leaflet" for export. I am trying to use a different background-color than the normal white (#fff) that appears in the expanded layers on the right-hand side. I have found this line of code within the CSS-document called "leaflet.css". I have fortunately worked out how to do this in the: ".leaflet-control-layers-expanded .leaflet-control-layers-list {" or ".leaflet-control-layers-expanded {" and replacing "#fff" with "#232de1". :))

However, once I change the "background-color" from white #fff to navy blue #232de1, my measuring tool disappears from the left-hand side of the screen, with a white-bordered box and a gap where the measuring tool should be. My search tool has also become white.

Is it possible to still keep this measuring tool whilst changing the background-color, and keep the search tool the same background-color as well?

Note: I have also changed the widget icon and widget background within QGIS2WEB export menu itself before getting the coded files, so maybe the conflict arises here?

Answer 1

As far as the measurement tool is concerned, I don't think it's a color change problem but the button is seen in firefox but not seen in chrome. This is a problem known to the maintainer of the qgis2web plugin for which there is still no definitive solution. You can see this thread https://github.com/tomchadwin/qgis2web/issues/958 Some users have managed to solve the problem by replacing the leaflet.js file with an older version.

As for the color of the measurement in firefox, you have to change this part of the css code

.leaflet-touch .leaflet-control-measure .leaflet-control-measure-toggle, .leaflet-touch .leaflet-control-measure .leaflet-control-measure-toggle:hover {
background-color: #232de1;
}

As for the color of the geocoder you have to change this part of the css code

.leaflet-control-geocoder-icon {
background-color: #232de1;
}