Themes
If you have purchased the Pro Pack Add-On 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.
Included Themes
Bellard
This theme is designed to work best with a minimum content area of 875 pixels. Make sure you main page size and inner content areas, including margins and padding, leave at least 875 pixels for the map and search form. For best results use the Enhanced Results and Pro Pack add-ons. Use no labels and and the radius pulldown on the search form. Turn on the “use text for find button” option.
The Bellard Theme on my test box using Pro Pack and Enhanced Results. No custom coding or CSS outside of what is in the theme file.
The default theme provides a basic interface that should work with most themes. It provides a basic search form and rows of results below the map with a highlight feature.
This is the default theme with the Pro Pack enabled, using a text button in place of the find locations image button.
The Default Theme with a simple Pro Pack setting to turn the find button into a standard text button.
In addition, the following themes are included in the Pro Pack:
- Basic Boxes
- Blank (Dec 2012)
- Boxed Fast Food
- Clean Simple White
- Dark SLPlus Theme
- Hidden Results Table
- Labels Above Input
- No Map Displayed
- The Original Theme
Creating A Theme
If you have a lot of custom CSS or wish to have CSS files you can share among multiple Store Locator Plus installations, it may be best to create a theme. Use an FTP program and download an existing CSS file from the/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.
Per-Page Themes
You can have a different theme on each map page by specifying the theme attribute on the shortcode.
[STORE-LOCATOR theme="csl-slplus-boxed"]
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/css/ directory is linked to/core/css/. The physical directory is/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.
To prevent losing work when upgrading, we recommend creating your own CSS file names versus modifying the ones we provide.
Contributing Themes
If you have a custom theme file you would like to have us include in a future release, please send it to us along with a screen shot of the theme in action. We will try to get it included on the next product release.