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

Starting with SLP version 4.1 you will see some themes with an (A) in parenthesis after the theme name.  These are the advanced themes that 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 User Experience / View / 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 both Super Extendo and Enhanced Results add-on packs are 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.

Includes Themes

Basic Boxes

Side-by-side boxes for output listing.
shortcode attribute: theme=”csl-slplus-boxed”

Basic Boxes SLP Theme

Basic Boxes SLP Theme

Bellard

Side-by-Side boxes with simple colors on white.
Requires Google Fonts.
shortcode attribute: theme=”bellard”

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”

Beside-And-Below Genesis (A)

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 (A)

Map on left, Search and Results on right. Simplified search layout only supports basic search form options.
Recommended WordPress Theme: Twenty Twelve using full width template.
Primary colors: blue, orange.
shortcode attribute: theme=”beside_myself”

Beside Myself UI

The Beside Myself theme UI on Twenty Twelve. It has wider and more appropriate content area for the side-by-side configuration.

Beside Myself Results

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

Beside The Point 2012 (A)

Search On Left Side, 2012 Compatible
Recommended WordPress Theme: Twenty Twelve using full width template.
shortcode attribute: theme=”beside_thepoint_2012″

Beside The Point 2012

Beside The Point 2012 theme on the Twenty Twelve WordPress Theme. Address label changed with placeholder text set with Enhanced Search add-on pack.

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”

Boxed Fast Food

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

Clean Simple White

Recommended WordPress Theme:Mazznoer Clean Simple White
shortcode attribute: theme=”csl-slplus-cleansimplewhite”

Clean Simple White

Clean Simple White

Dark

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

Default

The default SLPLUS Theme.  Search form on top of the map on top of the results.  Add on packs listed will be set back to the default layout settings when using set options and save settings.  Add on packs are not required for this theme to function properly.
shortcode attribute: theme=”default”

Default SLP Theme

Default

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”

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”

No Results Table

Hide the results under the map.  You can get more control with the Enhanced Results add-on pack.
shortcode attribute: theme=”csl-slplus-noresultstable”

Hidden Results

Hidden Results

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”

Woo Memorable

A basic SLP Theme that is used on a live site running the Memorable WordPress theme by WooThemes. Works with Enhanced Results featured listings.
Recommended WordPress Theme: Memorable
shortcode attribute: theme=”woo-memorable”

Woo Memorable

Woo Memorable

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.