Change Search Bar Background Color and Change Custom Icon Size

Hi @hhuesca,

Yeah, shouldn’t be a problem. Try to add this CSS code to your styles:

.open-user-map .leaflet-geosearch-bar form {
    background-color: red;
}

.open-user-map .leaflet-control-geosearch a.reset {
    background-color: red;
}

.open-user-map .leaflet-control-geosearch .results {
    background: none;
}

And to make the Icons square (please make sure you’ve uploaded a square icon):

.open-user-map .leaflet-marker-icon {
    width: 40px !important;
    height: 40px !important;
    margin-left: -20px !important;
}

Does this work for you?

Best Regards,
Daniel

• This reply was modified 2 years, 5 months ago by 100plugins.
• This reply was modified 2 years, 5 months ago by 100plugins.

It worked great! Thank you. I’m also having a problem in the “Add Location” form. For some reason the labels on the fields is white, so it’s not visible for the user. Can you help me with that?

Thanks.

Hi @hhuesca,

Glad it worked. To solve the other issue you should find some CSS code where the ::placeholder is generally set to be white.

Alternatively you could add this snippet, which overwrites the placeholder (label) color for the form:

.open-user-map .add-location .location-overlay-content #oum_add_location input[type=text]::placeholder, 
.open-user-map .add-location .location-overlay-content #oum_add_location input[type=email]::placeholder, 
.open-user-map .add-location .location-overlay-content #oum_add_location input[type=url]::placeholder, 
.open-user-map .add-location .location-overlay-content #oum_add_location textarea::placeholder, 
.open-user-map .add-location .location-overlay-content #oum_add_location select::placeholder {
    color: #333;
}

Best Regards,
Daniel

Daniel, you’re the absolute best!

So sorry for asking this much, but is it possible to also change the color of the “Enter Address” text on the map?

Thank you so much!

Hi @hhuesca,

You can use this CSS to set the color generally:

.open-user-map .leaflet-geosearch-bar form input::placeholder {
    color: red;
}

And you can use this CSS to set the color on the map specifically in the popup:

.open-user-map .add-location .location-overlay-content #oum_add_location .map-wrap #mapGetLocation input.glass::placeholder {
    color: red;
}

If you are happy with the plugin please consider dropping a quick review here. It helps me to reach a broader audience. Thanks!

Best Regards,
Daniel