Skip to main content

Price Markers on the Map

Tiffany Soucy
  • Updated

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.

Screen_Shot_2019-09-13_at_12.01.44_PM.png


This code changed the PRICE marker (shown in the map above):

Screen_Shot_2020-09-14_at_4.01.20_PM.png

.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:

Screen_Shot_2020-09-14_at_4.01.40_PM.png

.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;
}

The color of the font used on the map marker after it's been clicked and you go back to the map will be a light green. You can change that with this code:

.sidx-container .sidx-map-marker-for-sale.sidx-visited {
color: #hexcode !important;
}

This code changes the DOT on the map (which illustrates properties that will be on the following page of results):

Screen_Shot_2020-09-14_at_4.06.41_PM.png

.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.

Screen_Shot_2020-09-14_at_4.08.01_PM.png

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;
}

-------------------------------

Multiple Changes:

*If you were to use all of the above properties to update your button, your code may look like this when placed into your design settings:
insert designated code snipet code here {
padding: 25px 15px !important;
border-radius: 6px !important;
box-shadow: 0 7px 7px #1acb98 !important;
background: #1acb98 !important;
color: #ffffff !important;
border: 1px solid !important;
border-color: #febe0f !important; 
}

 

Place the desired code(s) in the Custom CSS box under Settings > Design. You must clear your caches, then check your web page in an incognito browser to see the change!

 

Customization Disclaimer:  Please note, Showcase may make future updates to the product which may break previously acceptable CSS code, causing that section on your website to look unusual.  If you've noticed your site not looking as expected, please return to this article for the updated CSS code. Additionally, as always, if you are inexperienced with CSS we suggest you turn to your developer as they will be the best contact person for CSS related questions and concerns.  We are not developers and provide this baseline CSS for agents and developers experienced in coding.

Related articles