Custom Themes Overview

If you have purchased the Plus Pack Add-On version 2.0 (or higher) you can manage your own custom themes and tailor the look of the Store Locator Plus results. We have included a couple of basic themes so you can see the format of the theme system.

Creating A Theme

The easiest way to create a theme is to use an FTP program and download an existing CSS file from the <plugin-directory>/css/ directory. Make a copy of that file on your local system and rename it to something like "csl-slplus-mytheme.css". You can now edit this file and when you are done upload it to the same CSS directory.

The File Header

The theme file MUST have a "headstone". That is the comment block at the top of the CSS file. The file entry is important. If you have a typo and the file name you enter does not match the actual saved file name the theme will not activate. You will need to rename the file and fix the label to get this to reload into the custom theme system.

An example headstone:

/**
 ** file: csl-slplus-dark.css
 ** label: Dark SLPlus Theme
 **
 ** A new darker theme based on the original.
 **
 **/

The label is the text that appears on the pulldown menu. You can set this to whatever you'd like. We recommend keeping it short & sweet.

Figuring Out The CSS Pieces

We use Firefox and Firebug. You can also use IE or Chrome and their respective developer tools. Regardless of which solution you prefer, we find it much easier to manipulate the themes by bringing up the map in the browser and using the web-browser based tools to tweak the CSS. This allows us to see the results in real time without having to reload the page.

The inspect element tool available in each of the tool kits is invaluable for finding the proper CSS class or element ID so you can add or modify the proper entry in the CSS file.

Activating Your New Theme

To activate your new theme, go to the Store Locator Plus General Settings page. Click on the "Display Settings" header to expand it. Your new theme should be displayed in the pulldown list. Select it and click save.

Contributing Themes

If you have a custom theme file you would like to have us include in a future release, please send it along with a screen shot of the theme in action to . We will try to get it included on the next product release.

General Notes

Legacy Themes

The legacy theme system is inconsistent and has had numerous issues. We recommend converting to the new custom theme system. It is the same theme system we use on all of our WordPress plugins and will continue to be supported and evolve. The legacy theme system was inherited when we forked from the Store Locator plugin and is not well documented and has several glitches.

Theme Directory

The new themes are nothing more than simple CSS files that go into the CSS directory. The <plugin-directory>/css/ directory is linked to <plugin-directory>/core/css/. The physical directory is <plugin-directory>/core/css/ but you should be able to load your custom theme into either location barring any security settings preventing symlink handling on your server.

Retaining Themes

You will not need to do anything special to retain your custom themes, unless you uninstall the plugin. Upgrading or patching Store Locator Plus will not overwrite your custom theme files assuming you created them with a new name. If you simply change an existing theme file it will likely be overwritten with our original copy when you upgrade.

We recommend creating your own CSS file names versus modifying the ones we provide.

Per-Page Themes

As of version 2.7 you can have a different map theme on each page. See Extended Shortcode Settings, Theme Selector.