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