How to customize the appearance of your Store Locator software

For many customers who have integrated our store locator software into their website there won't be any need to make changes to it's default appearance for it to look great on their website. However, in some cases you may want to adjust the appearance of your locator so that the fonts, colors and other style elements match your branding or website appearance. Here we describe how exactly to customize each of the elements of your locator.

Firstly, the easiest way to manage the style of your locator is using the 'Appearance' menu option. At the top of this page you'll see a section called 'Custom CSS':

This is where you should paste any of the CSS elements described below to make the changes in the appearance of your locator. If you prefer, you can add them directly to your web page but adding them to the locator keeps them distinct from your main page CSS files.

Adjusting the Overall Font Typeface, Size and Color

#storelocatorwidget {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
color: #000000;
}

Adjusting All Text Link Colors

This is the color of link before it is clicked on or hovered over:

#storelocatorwidget A {
color: #459ce7;
}

This is the color of a link when the mouse hovers over it:

#storelocatorwidget A:hover {
color: #2a6496;
}

Adjusting the Text Colors of Specific Elements

Store Name

A.storelocator-storename {
color: #ff0000;
}

Description

.storelocator-description {
color: #ff0000;
}

Address

.storelocator-address {
color: #ff0000;
}

Hide the Map

#storelocator-map_canvas {
display: none;
}

Hide the 'My Location' Button

#storelocator-nearby {
display: none;
}

Hide the 'Show on Map' Buttons

.storelocator-viewlink {
display: none;
}

Change the text colors inside the Map popup window only

.storelocator-scrollFix P {
color: #FF0000;
}

Make the Map popup window transparent

.gm-style > div:first-child > div + div > div:last-child > div > div:first-child > div {

opacity: 0.8;

}

Adjust the Filter Checkbox color

input[type="checkbox"]:not(:checked) + label:after, input[type="checkbox"]:checked + label:after {
background-color: #F30F30;
}

Change the text color in Select and address Input box

span#storelocator-search-label, span#search_radius_text, div#storelocator-filter_checkbox_text {
color: #68747b;
}

Adjust large images so they don’t overflow the location list on the left

.storelocator-logo IMG {
max-width:100%;
}

Adjusting input field glow

You can get RGBA colours from here to update into the fields below: http://hex2rgba.devoth.com/

input:focus {
border-color: rgba(253, 175, 23, 0.75) !important;
box-shadow: 0 1px 1px rgbargba(253, 175, 23, 0.75) inset, 0 0 8px rgbargba(253, 175, 23, 0.6) !important;
outline: 0 none !important;
}

My Location Button

To change button colors, you need to adjust each of the entries where it gives a color of #FF8000 to your preferred color (use a search and replace function in your favorite text editor to do this!):

.storelocator-btn-primary,

.storelocator-btn-primary:hover,

.storelocator-btn-primary:active,

.storelocator-btn-primary:visited,

.storelocator-btn-primary:focus {

color: #FFF !important;

border-color: #000 !important;

background-color: #FF8000 !important;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FF8000", endColorstr="#FF8000") !important;

background-image: -khtml-gradient(linear, left top, left bottom, from(#FF8000), to(#FF8000)) !important;

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FF8000), color-stop(100%, #FF8000)) !important;

}

Show on Map / Directions Buttons

To change button colors, you need to adjust each of the entries where it gives a color of #FF8000 to your preferred color (use a search and replace function in your favorite text editor to do this!):

.storelocator-btn-danger,.storelocator-btn-danger:hover,

.storelocator-btn-danger:active,

.storelocator-btn-danger:visited,

.storelocator-btn-danger:focus {

color: #FFF !important;

border-color: #000 !important;

background-color: #FF8000 !important;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FF8000", endColorstr="#FF8000") !important;

background-image: -khtml-gradient(linear, left top, left bottom, from(#FF8000), to(#FF8000)) !important;

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FF8000), color-stop(100%, #FF8000)) !important;

}

Custom scroll bar colours

#storelocator-leftcolumn {

scrollbar-base-color:#727272;

scrollbar-face-color:#0044CC;

}

#storelocator-leftcolumn::-webkit-scrollbar {

background-color:#727272;

}

#storelocator-leftcolumn::-webkit-scrollbar-thumb {

background-color:#0044CC;

}