[Resolved] Map Icon pop-up images/titles

[Author]

Posts

[perryA]

Tell us what you are trying to do? 1) trying to get map pop-up image to link to the post page and 2) Trying to format the map pop-up linked title formatting (I just need to know how to target with CSS - to change font color and hover properties)

Is there any documentation that you are following?

Is there a similar example that we can see?

What is the link to your site?hidden link

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Perry,

Thank you for getting in touch.

Based on what I see on your page you can target the title with the ".marker-popup-title" class and for the image you can use "#marker-template-bg img" to target the image.

Please let me know if this helps.
Thanks,
Shane

[perryA]

I added this CSS to the Child theme:
a.marker-popup-title:link,
a.marker-popup-title:visited,
a.marker-popup-title:active { color: #1A3C34 !important; text-decoration: none; }
a.marker-popup-title:hover { color: #D6D1CA !important; text-decoration: underline; }

but it doesn't seem to have any effect. Can you tell me what I am doing wrong?

[perryA]

Also -- not sure how I go about making the pop-up map images clickable with the "#marker-template-bg img"... Can you tell me how to do that?

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Perry,

Would you be able to provide me with admin access to the site so that I can assist better?

Secondly to make the image clickable you will need to wrap the image shortcode inside an anchor tag.
Example

<a href="myurl.com">[image shortcode]</a>

Please let me know if this helps.
Thanks,
Shane

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Also please structure your css like this.

.marker-popup-title a:link, 
.marker-popup-title a:visited,
.marker-popup-title a:active{ color: #1A3C34 !important; text-decoration: none; },
.marker-popup-title a:hover{ color: #D6D1CA !important; text-decoration: underline; }

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Perry,

I've added the css to the view and your styling should be taking effect now.

Secondly the modification for your marker information to have your image clickable would be done in the content template for the view following the format that i've illustrated in my response above.
hidden link

In the view there is a content template with the following.

<div id="marker-template-bg">
[types field='marker-image' title='%%TITLE%%' alt='%%ALT%%' align='left' size='thumbnail' resize='crop'][/types]
<h6>[wpv-post-link]</h6>
          </div>

For the image to be clickable you will do this.

<div id="marker-template-bg">
<a href="[wpv-post-url]">[types field='marker-image' title='%%TITLE%%' alt='%%ALT%%' align='left' size='thumbnail' resize='crop'][/types]</a>
<h6>[wpv-post-link]</h6>
          </div>

Please let me know if this helps.
Thanks,
Shane

[perryA]

Shane -- Thanks so much! The images are now clickable and work great.

One last issue-- I can't get the CSS for the location titles in the pop-up window on the map to work. I changed the CSS to your recommendation above -- and it worked for the Residential Projects -- but then when I added the code for the clickable images it stopped working. That CSS did not effect the Commercial Projects (your CSS never worked on those -- just the Residential Titles).

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Perry,

Can you let me know exactly where the CSS isn't working? I've checked the map and image is clickable and the CSS is affecting the title of the popup in the map itself.

Thanks,
Shane

[perryA]

So I have the CSS for the pop-up map titles set to dark green and they turn to a gray on hover. Right now they are pink and turn green on hover -- see screen cap below... is that what you see? Might be a caching issue but it has the pink links in two different browsers...

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Perry,

I was able to adjust the css, you should now see it working.

Thanks,
Shane

[perryA]

Now the Residential Projects titles don't have the light gray hover state-- and the Commercial Projects don't look the like the CSS is working on them --

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Perry,

I took another look at this for you and the hover should now be working.

The problem was a misplaced comma in the css markup.

Can you check to let me know if everything is ok now.

Thanks,
Shane

[perryA]

My issue is resolved now. Thank you!