Documentation / Help for Custom CSS or JS styling

[selenemadonia]

Hi,

I am working in the Pro Version of this plugin for a school project/collaboration with a company. I would like to edit some of the visual elements of this map (such as showing the custom fields / filters in a more compact and useful way). For example, I was looking at the store locator demo on the wpgmaps website as a source of how I might look to edit the look of the filters, integrated in a box inside the map rather than outside. Something you would see in a a real estate searching website like Zillow in formatting. Things I want to do:

1. Change the visual makeup of the webpage so that my custom filters (I have 10 in total) are integrated into a separate organized dropdown menu above the map for ease of user interface. I also want to give labels to these filters separate from the default menu of dropdown/checkbox functions so that they always remain visible. Maybe convert them into buttons?

2. I want to change the values that appear in those filters. In my import data file, all my values will read numerically. I would like them to display differently based on those values. Example: If 1 = yes, then data reads “for rent” = 1 and display will read “for rent” = yes. I am trying to avoid changing all the values in the source file to qualitative. I am unsure if this is easily doable or if it makes sense.

3. Customize the marker listing style display like size, color, etc.

4. Customize infowindow style display like box size, color, etc.

Is there any documentation on websites/forums for the plugin to edit and work with the custom CSS or JS for these features? I am trying to do it myself but I am not sure how to go about it. I’ve navigated some of the forum but was unable to find some basics. I have tried to use inspect element but would appreciate any guidance. Here (http://jonm19.sg-host.com/sample-map/) is a link to our map in the most basic form with our data imported.

• This topic was modified 2 years, 4 months ago by selenemadonia.
• This topic was modified 2 years, 4 months ago by Steven.

[Steven]

Hi there,

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

It seems like what you are attempting to achieve may be fairly intricate and fairly custom.

We do not have docs for something like this, however, using the browser’s native element inspector, should allow you to target specific elements and divs which you can then target using custom JavaScript or style using custom CSS.

Just quickly taking a look at your map page, these are some of the elements you might want to style or at least a starting base to work from.

/* Page Title */
.entry-content {
width: 100% !important;
}

/* Map and custom field container */
.entry-header {
width: 100%;
}

/* Marker Listing Items */
.wpgmaps_mlist_row {
background: #f5f5dc;
color: #f31111

}

/* Info Window elements */
.gm-style-iw.gm-style-iw-c {
width: 350px;
color: red;
}

.gm-style-iw-d {

}

Again, this does seem fairly custom so if you are looking to achieve something very specific, you are welcome to submit a customization request at the below link:
– https://www.wpgmaps.com/customization-requests/

I hope this helps?

Kindest Regards,
Steven De Beer

[selenemadonia]

Hi,

Thanks a lot for the response and help! I have been trying to do some things on my own and understand things.

Is there a way to:
1. For infowindows, put the image on top of the infowindows box like in the modern infowindow style?
2. Center the checkbox custom field filter above the map?

I hope that’s not complicated, sorry for being confusing and complicated!

[Steven]

Hi again,

Thank you so much for getting back to us.

Unfortuantely, we do not have a link to your site so we cannot take a closer look, however, most of this should be achievable with custom CSS.

Additionally, if you could possibly clarify on the “put the image on top of the info window box”? Should the remaining content in the info window then appear below?

I look forward to hearing back from you.

Kindest Regards,
Steven De Beer

[selenemadonia]

Sorry!

Here is the url for the website (http://jonm19.sg-host.com/sample-map/).

Yes, I would like the image above all the rest of the information (such as title, address, description, link) should be below it. Right now, the image is to the right of all that information.

Thanks for getting back to me.

[Steven]

Hi again,

Thank you so much for getting back to me.

To start, the image can be moved to the top of the info window by removing the Float attribute as below:

wpgmza_infowindow_image {
float: unset !important;
}

Once done, you would just need to define the info window dimensions along with the descriptions.

To centre the custom fields filters above the map, you should simply need to align the text to centre as below:

.wpgmza_infowindow_image {
float: unset !important;
}

.wpgmza-filter-widgets {
text-align: center;
}

Kindly let me know if this helps?

Kindest Regards,
Steven De Beer

[Author]

Posts