[Resolved] How to style map search?

[Author]

Posts

[angelapiqui]

Hi there,

I'm trying to customize a search by map using distance/geolocation (see screenshot, please), but can't find where to do it. In the view I created, I added the filter "Distance", but there where no options for the style. How can I do it?

Best Regards,

Sintia Oliveira

[Minesh]

Hello. Thank you for contacting the Toolset support.

You need to add custom CSS code and target the each element/selector to style that section. Can you please tell me what exactly and how you want to style that distance search section?

[angelapiqui]

Hi Minesh,

Thank you for writing back! I tried to do it using CSS code (I know basic HTML and CSS), but couldn't find where is the code of the "use my location" button, for instance.

I want to style the line I highlighted on the previous screenshot I attached. At least change the button's font and background's color. If not possible, then at least to get rid of the button.

[Minesh]

If you want to change the text of "Use My location, then you should use the following JS code and add it to your view's JS editor:

jQuery(document).ready(function($){
 
   $('.js-toolset-maps-distance-current-location').val('My button text');
    
});

If you want to change the background color and font:

jQuery(document).ready(function($){
 
   $('.js-toolset-maps-distance-current-location').attr('style','background-color:red; font: normal normal normal 14px/1 FontAwesome;");
    
});

If you want to remove the "Use My location button - add the following CSS code to your view's CSS editor:

.js-toolset-maps-distance-current-location{
display:none;
}

[angelapiqui]

Hi Minesh, Thank you for the code. I added it to the JS editor but nothing happened. I put on the search and pagination section as you can see on the screenshot attached. Is it the right place?

[Minesh]

Can you please share access details and problem URL where you added the map search so I can review whats going wrong there.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Can you please check now: https://toolset.com/forums/topic/how-to-style-map-search/

I've added the following JS code to "Search and Pagination" JS editor:

jQuery(document).ready(function($){
  
   $('.js-toolset-maps-distance-current-location').prop('style',"background-color:red; font: normal normal normal 14px/1 FontAwesome;");
     
});

I've set background color to red- you can change it as per your requirement.

[angelapiqui]

My issue is resolved now. Thank you!