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.

Deploying Advanced Themes

Advanced Themes relies on both HTML structure changes and CSS files to completely change the Store Locator Plus user interface.   The HTML elements are updated via the various layout settings provided by the Pro Pack (overall layout), Enhanced Search  (search form layout), Enhanced Results (results layout), and Enhanced Map (map layout) add-on packs.

SLP Theme Deployment

SLP Theme Deployment

1) Go to the User Experience tab of Store Locator Plus.

2) Click on the View sidebar menu.

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.

Search On Map On Results

General Layout Search On Map On Results

Bellard-RT

Side-by-Side boxes with simple colors on white.  Slightly more narrow than Bellard.
Requires Google Fonts.
Recommended WordPress Theme: RT-17
shortcode attribute: theme=”bellard-rt”

Boxed Fast Food

A boxes results theme.
Recommended WordPress Theme: Fast Food
shortcode attribute: theme=”csl-slplus-boxed-fastfood”

Dark

A new darker theme based on the original.
shortcode attribute: theme=”csl-slplus-dark”

Default Old

The original default SLPLUS Theme.
shortcode attribute: theme=”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: eLogix
shortcode attribute: theme=”wp-elogix”

Fournier

Side-by-Side boxes with simple colors on white.    A modified version of Bellard-RT using custom Results Format.
Requires Google Fonts.
shortcode attribute: theme=”fournier”

Genesis Monochrome

A Genesis compatible design based on a monochrome color scheme.
Recommended WordPress Theme: Genesis
shortcode attribute: theme=”genesis_monochrome”

Simple White 4 Column (A)

A simple white layout with 4 columns for map results.  Emphasis on contact data from Contact Extender.
Uses “Source Sans Pro”, available from the Google Fonts library.  Falls back to web standard fonts.
shortcode attribute: theme=”simple-white-4col”

The Original Theme

The original SLPLUS Theme from version 2.0
shortcode attribute: theme=”csl-slplus”

Top Labels

Show the labels above the input boxes.
shortcode attribute: theme=”csl-slplus-toplabels”

Search and Results To Left

General Layout Search On Results To Left Of Map.

Search and Results To Right

General Layout Search On Results To Right Of Map.

Search To Left  Results Below

General Layout Search To Left Of Map Results Below

Other Themes

Beside-And-Below Genesis

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

Beside Myself Results

Only the results.
Primary colors: blue, orange.
shortcode attribute: theme=”beside_myself_results”

Blank

No CSS rules, default layout mostly dictated by active WordPress theme.
shortcode attribute: theme=”blank”

Blank Map Fix

Only CSS rule is the map image fix, default layout mostly dictated by active WordPress theme.
shortcode attribute: theme=”blank_mapfix

On Myself

Map on Search on Results.
Primary colors: blue, orange.
shortcode attribute: theme=”on_myself”

No Map

Original theme but with the map hidden.
shortcode attribute: theme=”csl-slplus-nomap”

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

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.