Themes

Themes

You can manage custom Store Locator Plus themes and tailor the look of the Store Locator Plus interface. Store Locator Plus comes with a variety of themes to provide a base CSS framework that will attempt to match the style of the locator to the various WordPress themes you may have installed on your site.

You can see the list of themes and select a new theme via the User Experience tab under the View panel.

Advanced Themes

Advanced themes are designed to enhanced your premium add-on experience.

Whenever an Advanced Theme is selected a list of Preferred Settings will be displayed on the style panel. Clicking the Set Options button at the end of the Preferred Settings section will copy all of the listed settings into the proper fields on the various User Experience panels. Implement the Preferred Settings by clicking Save Settings. The Advanced Themes feature provides a simple 2-click operation to change the entire layout of the Store Locator Plus interface.

Advanced Themes leverage the extended features of different add-on packs including:

Featured Listings

Featured locations can be marked via the location editor when the Enhanced Results add-on pack is installed. Featured locations can also be marked by importing data via a CSV file using Pro Pack with the “first row has field” headers setting.

Side By Side Layout

Some themes have the CSS rules embedded to work with specific Pro Pack locator layout settings where the map appears to the left or right side of the search form and location listing. The layout can be further refined with Enhanced Search search layout and Enhanced Results results layout settings.

3) Select your new SLP Theme, such as Beside The Point NyloBoard Rev 01, in the Style panel.

4) Click the Set Options button to copy over the suggested HTML layout elements to the proper locator settings.

5) Click Save Settings to save the new recommended layout.

This will override any layout changes you may have employed on the Search Form, Map, Results, or View Panel. If you have custom edits make sure you copy them to an external location such as PasteBin so you can re-introduce your custom edits to the layout features as desired.

Woo Memorable. Map on left. Search on top of Results on right. A basic Works best with the Memorable WordPress theme by WooThemes. Works with Enhanced Results featured listings.
Recommended WordPress Theme: Memorable
shortcode attribute: theme=”woo-memorable”

Dark

Default Old

eLogix

Default theme with Enhanced Results featured listing styling. To see featured highlights change Results Layout so the very first div class looks like this:. Open this file in a text editor for more hints. Makes web links for non-featured locations disappear. Works with Enhanced Results.
Recommended WordPress Theme: eLogixshortcode attribute: theme=”wp-elogix”

Search and Results To Right

Beside Myself. Map on left. Search and Results on right of map, search on top of results. Shown on WordPress Twenty Twelve. It has wider and more appropriate content area for the side-by-side configuration. Recommended WordPress Theme: Twenty Twelve using full width template.
Primary colors: blue, orange.
shortcode attribute: theme=”beside_myself”

Other Themes

BigMap. Search in semi-transparent layer on top of map. Results in semi-transparent layer on right of map. Map full screen behind the search and results. Works best with the WordPress BigMap theme. shortcode attribute: theme=”bigmap_01″

Above All Rev 01 Theme designed for the News Pro WP Theme from StudioPress. Search above the map and results with the results to the left of the map. Shortcode attribute theme=”above_all_01″.

Beside-And-Below Genesis

Search On Left Side, Map and Results on Right. Designed to work well with Tagalong categories.
Recommended WordPress Theme: Genesisshortcode attribute: theme=”beside_and_below_genesis”

On Myself

No Map

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.

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

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.

Advanced CSS File Header

Advanced themes contain extra information in the file header to set various layout options and to define which add-on packs are required to be active to implement the extra options.

By defining the add-ons and the various layout options you enable the “Change Layout” button to load up the options as specified into the various layout fields for the plugin. Saving settings will apply the options you specify in the header.

The add-ons are a comma separated list that enable the following layout fields:

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

What Are Theme Files?

Theme files simple CSS files that go into the CSS directory. The header of the files is a comment block. The comments can be as simple as the file name, the label, and the description. The layout of the header is important. It follows the same syntax as WordPress plugin readme files and uses the built-in file header processor in WordPress to store extra data about the CSS files. This data is read and processed for display on the User Experience / View panel.

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, I recommend creating your own CSS file names versus modifying the ones I 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.