Styling the CardinalWP home page locator

Since launching the Cardinal Store Locator plugin over a year ago several support requests have been submitted asking how to achieve a look similar to the one at the top of the CardinalWP.com home page. The default color scheme of the locator makes use of blue colors and the location form fields display above the locator but it’s not too difficult to change that around with some small modifications.

Locator width

The first thing to know is that when using the shortcode to display the locator, the width will stretch to fill the width of the container in the template where it is placed. So, you may need to make some modifications to a template in your active theme in order to get the locator width where you want it to be.

Search form over the map

The majority of the Cardinal Store Locator styling can be overridden by placing the appropriate properties in your active theme’s stylesheet – it’s best to use your browser’s inspector to determine the selector you want to override. To put the search form over the map it’s just a matter of adding a position:relative to the main container and then absolute positioning the form container as you want it to appear. You’ll also probably want to add a couple of media queries to handle the form width on various devices. The exact CSS (compiled from SCSS) used for CardinalWP can be found in the following Gist to get you headed in the right direction. Alternatively, if you just wanted to completely wipe the styling and start from scratch you could dequeue bh-storelocator-plugin-styles with the bh_sl_enqueue_styles hook, which fires directly after the default stylesheet is enqueued.

Map styling

The map styling on the home page was selected from the very useful Snazzy Maps website. You can choose an existing style from Snazzy Maps or create your own by following the tutorial on the Start Styling your Map page in the Google Maps API documentation. When you’ve found a style that you like or have come up with a custom one, copy the styling array (just the array) into a new JavaScript (.js) file, upload that file to your server and set the path to the file under Settings > Cardinal Locator > Style Settings > Map styles path after setting Custom map styling to true (third down on the Style Settings tab). These styles will cary over if you make use of the single map shortcode.

Marker icons

The marker icons were generated from a free font via Icomoon, modified in Adobe Illustrator to have two colors and exported as PNG images at 60px by 60px.  There are many options for creating your own markers but starting with an icon font can be a good starting point. To use the same marker for all locations the image can then be uploaded after setting Settings > Cardinal Locator > Settings > Style Settings > Custom map location marker to true.

Using “website” text instead of the URL

The content within the location list, which is the list of the locations that appears to the right of the map by default, along with content in the info windows, which pop-up from the map markers, can be overridden by following the instructions on the Template variables page within the documentation. In short, you create the overrides by making a new cardinal-locator folder within your active theme and copying a couple of files from the plugin to that new folder. These files use a JavaScript tempting engine called Handlebars and after reviewing the default templates it should be fairly straightforward how to use them. There are many variables available to use by default and you can expose additional data to these templates by using the location data filter.