The map markers that you see on the map are editable. You will want to use all the provided code in order to give a really nice aesthetic for your visitors. (You can find more information about these map markers here)
We suggest that when changing the colors of the map markers that you make the borders a slightly darker color than the background as it creates a nice contrast and doesn't muddle all the markers together. This image below shows our default colors.
This code changed the PRICE marker (shown in the map above):
.sidx-container .sidx-map-marker-for-sale {
background: #hexcode !important;
border: 1px solid #hexcode !important;
}
This code changed the little triangle part of the PRICE marker before it's clicked:
.sidx-container .sidx-map-marker-for-sale:before {
border-top-color: #hexcode !important;
}
This code changed the little triangle part of the PRICE marker after it's clicked:
.sidx-container .sidx-map-marker-for-sale:after {
border-top-color: #hexcode !important;
}
This code changes the DOT on the map (which illustrates properties that will be on the following page of results):
.sidx-container .sidx-map-dot-for-sale .sidx-dot {
border: 1px solid #hexcode !important;
background: #hexcode !important;
}
Rental map markers require different code as we use a different color to differentiate them from the for sale properties. We suggest that you also do the same, especially if you plan to show both For Sale and For Rent properties.
PRICE MARKERS:
.sidx-container .sidx-map-marker-for-rent {
background: #hexcode !important;
border: 1px solid #hexcode !important;
}
Triangle part of the PRICE marker before it's clicked:
.sidx-container .sidx-map-marker-for-rent:before {
border-top-color: #hexcode !important;
}
Triangle part of the PRICE marker after it's clicked:
.sidx-container .sidx-map-marker-for-rent:after {
border-top-color: #hexcode !important;
}
Remember, place this code in the custom CSS box under Settings > Design. Clear your caches and check your web page in an incognito browser to see the change!