Where to find CSS?

[bharper1000]

I’m looking to edit the CSS to style the marker pop-up window. I think our map is pulling the styles from the website, but in those styles the text is white .. so against the white background of the marker pop-up, you can’t see the text. Would love to find out where the CSS is located so I can style the text and/or background color in those markers.

Thanks for your help!

[AbelC]

Hi There,

Thank you so much for getting in touch with us, and our sincere apologies for the inconvenience.

Could I kindly ask if you could please provide us with a link to your map page?

I will then be able to prepare the Custom CSS needed to achieve this.

I look forward to hearing back from you and resolving this issue.

Kind Regards,
Abel

[bharper1000]

Hi Abel,

Thank you so much. I appreciate the help! I’ve been hacking around and adding some custom CSS myself (using the Inspector to find the relevant selectors), but still having difficulty styling it. Here’s the link: https://artaxis.org/map/

You can see that I have several issues. I’m trying to get the marker listing area styled so that the background has a hex value of #333333 and the text has a hex value of something like #F5F5F5.

Also, you can see that the search box and mileage box have the same (or nearly the same) background color and text color, so I’d live to have the CSS selectors there too. Maybe we could make that the same as the listing (background #333333 and text color #F5F5F5)?

And for some reason, the search box is floating over the right border of the marker listing section. Any thoughts on why that is happening?

The other main issue is that I’m having trouble styling the info windows that come up from the pins. I added this:

body.gppro-custom .content > .entry .entry-content {
color: #808080;
}

But that seems to also control the text in the marker listing .. but not the text under the “Link” column”.

So, I’d like to style the text black with #000000 in the info windows. Right now you can’t see the link text or the description text. Is it possible to style the background color of the infowindows?

And one more thing – is it possible to control the height of the info windows? I see where I can change the width (which I did), but since I’m not displaying much information, the window seems excessively long. Any help with that would be much appreciated!

Thank you so much Abel! I appreciate it!!

Brian

[bharper1000]

Hi again Abel,

I’ve been hacking my way around in CSS and have made some changes. Here’s the map as I have it now: https://artaxis.org/map/

I’m still wanting to change the “More details” text in the marker listing to “Visit page” .. I”m guessing I’ll need some jQuery for that.

I’m also trying to fix up that search bar – the right edge of it is overhanging the right table border and I’d love to get the word “Search” to be inline and to the left of the search box.

Any help with that stuff would be awesome.

Thanks!

Brian

[AbelC]

Hi Brian,

Thank you so much for getting back to me, and our sincere apologies for the delayed response.

– I’m still wanting to change the “More details” text in the marker listing to “Visit page” .. I”m guessing I’ll need some jQuery for that.

Could I kindly ask if you could please navigate to Maps -> Settings -> Advanced -> Custom JS -> Please paste the following code below:

jQuery(function($){
	var more_details = "Visit page";
	jQuery(document).on('markerlistingupdated.wpgmza', function(){
		jQuery('body').find('.wpgmza_table_link a').text(more_details);
	});
});

– I’m also trying to fix up that search bar – the right edge of it is overhanging the right table border and I’d love to get the word “Search” to be inline and to the left of the search box.

Could you also please add the following Custom CSS below:

#wpgmza_table_1_filter input{  
  width: unset !important;
  margin-top: 15px !important;
}

Please do let me know if you are happy with the changes made so far?

I look forward to hearing back from you.

Kind Regards,
Abel

[bharper1000]

Awesome! Thanks so much Abel! And no worries at all about the delay – it’s the holidays, so I wasn’t expecting a speedy reply.

Anyway, this worked perfectly. Thank you! Would you have any advice on how to make the “Visit page” text not jump to the right when hovering over it? I like how it makes that grey border, but it’s odd how the text itself moves when you hover. Maybe if I just shift the text over to the right a bit? What do you think? Here’s the link again so you have it handy: https://artaxis.org/map/

Also, is it possible to display the gallery image of each listing in the marker listing? I turned off the map pin image that was showing up to the left of each listing in the marker listing, but wondering if I could replace that with the thumbnail I’m adding to each listing.

Thanks so much for your help!

Brian

B

[Steven]

Hi Brian

Thank you so much for getting back to us.

Unfortuantely, Abel is currently unavailable, so I will be assisting you further.

Could I kindly ask you to add the following CSS? This should help work around the link elements growing on the hover event when the grey background is added.

.wpgmza_table_link a {
margin-left: 5px;
}

.wpgmza_table_link a:hover {
margin-left: 0px;
}

Unfortuantely, this is not currently possible with the Advanced Marker Listing and you would need to make use of the basic marker listing in order to display the marker image.

With that said, you are welcome to submit a customization request at the following link if this a feature you absolutely require:
– https://www.wpgmaps.com/customization-requests/

I hope this helps?

Kindest Regards,
Steven De Beer

[bharper1000]

Thanks so much Steven! This worked perfectly. I appreciate your help.

And I’ve submitted a customization request via the link you provided.

Thanks again!

Brian

[Steven]

Hi Brian,

Thank you so much for getting back to me.

Not a problem at all.

Do have a fantastic week ahead!

Kindest Regards,
Steven De Beer

[Author]

Posts