Skip Navigation

[Resolved] How to style map search?

This support ticket is created 3 years, 9 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
- 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Kolkata (GMT+05:30)

This topic contains 7 replies, has 2 voices.

Last updated by angelapiqui 3 years, 9 months ago.

Assisted by: Minesh.

Author
Posts
#1690641
MAP-SEARCH.jpg

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

#1690971

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

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?

#1696799

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.

#1697653

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

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;
}
#1704029
JSeditor.jpg

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?

#1704757

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

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.

#1705439

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

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.

#1705943

My issue is resolved now. Thank you!

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.