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.

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.

An example headstone:

/** file: csl-slplus-dark.css
 ** label: Dark SLPlus Theme
 ** description 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.

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:

  • slp-pro enables Pro Pack Locator Layout
  • slp-enhanced-map  enables Enhanced Map Bubble Layout
  • slp-enhanced-results enables Enhanced Results Results Layout
  • slp-enhanced-search enables Enhanced Search Search Layout
/** file: default.css
 ** label: Default Theme
 ** description: The default SLPLUS Theme for WordPress 4.1.  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.
 ** add-ons: slp-pro,slp-enhanced-map,slp-enhanced-results,slp-enhanced-search
 ** Pro Pack Locator Layout: <div id="sl_div">[slp_search][slp_map][slp_results]</div>
 ** Enhanced Map Bubble Layout: <div id="sl_info_bubble" class="[slp_location featured]"><span id="slp_bubble_name"><strong>[slp_location name  suffix  br]</strong></span><span id="slp_bubble_address">[slp_location address       suffix  br]</span><span id="slp_bubble_address2">[slp_location address2      suffix  br]</span><span id="slp_bubble_city">[slp_location city          suffix  comma]</span><span id="slp_bubble_state">[slp_location state suffix    space]</span><span id="slp_bubble_zip">[slp_location zip suffix  br]</span><span id="slp_bubble_country"><span id="slp_bubble_country">[slp_location country       suffix  br]</span></span><span id="slp_bubble_directions">1[slp_option label_directions wrap directions]</span><span id="slp_bubble_website">1[slp_location url           wrap    website][slp_option label_website ifset url]11</span><span id="slp_bubble_email">[slp_location email         wrap    mailto ][slp_option label_email ifset email]11</span><span id="slp_bubble_phone">1<span class="location_detail_label">[slp_option   label_phone   ifset   phone]</span>[slp_location phone         suffix    br]</span><span id="slp_bubble_fax"><span class="location_detail_label">[slp_option   label_fax     ifset   fax  ]</span>[slp_location fax           suffix    br]<span><span id="slp_bubble_description"><span id="slp_bubble_description">1[slp_location description raw]</span>1</span><span id="slp_bubble_hours">1<span class="location_detail_label">[slp_option   label_hours   ifset   hours]</span><span class="location_detail_hours">[slp_location hours         suffix    br]</span></span><span id="slp_bubble_img">1[slp_location image         wrap    img]</span><span id="slp_tags">[slp_location tags]</span></div>
 ** Enhanced Results Results Layout: <div id="slp_results_[slp_location id]" class="results_entry  [slp_location featured]"><div class="results_row_left_column"   id="slp_left_cell_[slp_location id]"   ><span class="location_name">[slp_location name]</span><span class="location_distance">[slp_location distance_1] [slp_location distance_unit]</span></div><div class="results_row_center_column" id="slp_center_cell_[slp_location id]" ><span class="slp_result_address slp_result_street">[slp_location address]</span><span class="slp_result_address slp_result_street2">[slp_location address2]</span><span class="slp_result_address slp_result_citystatezip">[slp_location city_state_zip]</span><span class="slp_result_address slp_result_country">[slp_location country]</span><span class="slp_result_address slp_result_phone">[slp_location phone]</span><span class="slp_result_address slp_result_fax">[slp_location fax]</span></div><div class="results_row_right_column"  id="slp_right_cell_[slp_location id]"  ><span class="slp_result_contact slp_result_website">[slp_location web_link]</span><span class="slp_result_contact slp_result_email">[slp_location email_link]</span><span class="slp_result_contact slp_result_directions"><a href="http://[slp_location map_domain]/maps?saddr=[slp_location search_address]&daddr=[slp_location location_address]" target="_blank" class="storelocatorlink">[slp_location directions_text]</a></span><span class="slp_result_contact slp_result_hours">[slp_location hours]</span>[slp_location iconarray wrap="fullspan"]</div></div>
 ** Enhanced Search Search Layout: <div id="address_search">[slp_search_element input_with_label="name"][slp_search_element input_with_label="address"][slp_search_element dropdown_with_label="city"][slp_search_element dropdown_with_label="state"][slp_search_element dropdown_with_label="country"][slp_search_element selector_with_label="tag"][slp_search_element dropdown_with_label="category"]<div class="search_item">[slp_search_element dropdown_with_label="radius"][slp_search_element button="submit"]</div></div>
 **
 **/

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.