style marker listing when clicked / active

New home Forums Pro Add-on General queries style marker listing when clicked / active

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #54534

    i have the basic marker listing sitting above the map, i can see there is a hover style but really want to be able style the listing that’s been clicked. is there a way around this?

    #54540
    Steven
    Moderator

    Hi there,

    Thank you so much for getting in touch, we really appreciate your time.

    Could I kindly ask you to elaborate on the Hover style you are referring to? We should be able to assist with any custom styling using the custom CSS field within the settings which we are happy to assist with.

    We look forward to hearing back from you.

    Kindest Regards,
    Steven De Beer

    #54908

    Hi Steven

    Thanks for getting back to me. The hover style is on this class –

    .wpgmaps_blist_row:hover {
    background-color: #EEE;
    }

    I just want to be able to apply a style to the selected marker listing.

    Thanks

    Tamara

    #54947
    Dylan
    Moderator

    Hi Tamara,

    Dylan here from the development team.

    Thank you for clarifying, we do appreciate it.

    Unfortunately, we do not currently have an ‘active’ class on the selected listing. However, we could help you in achieving this with some custom JavaScript/CSS.

    Would you be open to providing me with a link to your map on your website so that I can run a few tests to ensure my custom code works as you intend?

    I look forward to hearing back from you.

    Kind Regards,
    Dylan Auty

    #55189

    Hi Dylan

    That would be great, the current site is currently on my local comp while i complete tweaks, I will send you a link in a bit when i’ve uploaded it.

    Many thanks

    Tamara

    #55190

    Hi Dylan

    here is the map page, it has just 2 offices but there is another website that will have 10 offices with alot more detail so need it to work on this basic page first:

    Contact Us

    Many thanks for your help!

    Tamara

    #55201
    Dylan
    Moderator

    Hi Tamara,

    Thank you for getting back to me, I do appreciate your time.

    I believe the following custom scripts will help you achieve the needed result.

    Please add the following custom JavaScript to your site:

    
    jQuery('body').on('click', '.wpgmaps_blist_row', function(){
    	jQuery('.wpgmaps_blist_row').removeClass('wpgm_active_item');
    	jQuery(this).addClass('wpgm_active_item');
    });
    

    Additionally, please add the following custom CSS to your site:

    
    .wpgm_active_item {
        background: #e82277 !important;
        color: #fff !important;
    }
    

    Note: The CSS can be altered to meet your styling requirements and is only meant to serve as an example of what can be achieved.

    Both the custom JavaScript and CSS can be added under Maps -> Settings -> Advanced.

    I hope this helps?

    • This reply was modified 2 months, 3 weeks ago by Dylan. Reason: Formatted code into blocks
    #55207

    Brilliant, that’s worked!! thanks so much Dylan.

    #55213
    Dylan
    Moderator

    Hi Tamara,

    Only a pleasure! So glad I could help.

    Have a nice day further. 🙂

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.