Adjust Locator Styling

This set of instructions will require you to be using the MySLP Professional level of service or higher.   The Professional level includes the Experience add on that provides the Custom CSS rules interface.   Instructions here are specific to MySLP but will work for WordPress plugin users as well.

Get The Existing Style Rule

Open your website with your browser.

In your browser menu bar open developer tools.  This will open a developer section on your browser window.

Right-click on the element you wish to re-style.  This will show the page HTML and CSS rules in the developer window.

Select “Inspect Element”.

You will see the specific element highlighted in the HTML section of the developer window and the set of CSS rules that are applied to the element.

Right-click the top rule and select “copy”.  This will copy the entire rule including the CSS selector.

Modify The Rule Via Store Locator Plus

Login to your MySLP account or WordPress admin panel.

Go to Advanced Options in MySLP (Store Locator Plus in WordPress).

Select Settings | View from the menu.

Scroll down the page and paste the copied rule in the Custom CSS box.

You can now add to the rule using standard CSS notation.

Click Save.

View The Changes

Reload your web page.

Notes

Keep in mind many web hosts cache CSS.   Make sure you have cleared any proxy cache you have running as well as your browser cache.

A simple way to force your browser cache to reload (most of the time) is to hold down the shift key while clicking the “page reload” in your browser’s address bar.   Some browsers are overly-aggressive with caching (Safari!) and you may need to clear your history.

 

The Video

An example for our Weebly South Carolina Ice Cream site on how to tweak the CSS.

 

Search Form Style

Search Form Style sets the styling for the interactive locator elements on your site.   It uses pre-built jQuery Theme Roller style CSS designs to create a simple way to style interactive elements such as the autocomplete feature (available in WPSLP Experience or with MySLP Professional) on the address box.

The default styling is set to “None” which provides not special styling rules from interactive JavaScript elements in the locator interface.   This allows the site designer to create their own styles for the website in which the locator will be placed.

Search Form Style Default None 2017-05-23_16-20-30.png
Default styling for autocomplete is “none”.  The theme in this example does not specifiy any ui-autocomplete styling. The background inherits the transparent background used by the website as the default for all divs.

The base service also includes the Base jQuery theme.

 

Setting A New Style

For WordPress plugin users go to the Store Locator Plus selection on the sidebar menu.

For MySLP users go to Advanced Options.

Select Settings from the tab list.  Search will be the default sub-tab.

Scroll down to the Appearance section and expand it by clicking the word “Appearance” if necessary.

Select a new style from the Search Form Style drop-down menu.

Selecting Base Search Form Style
Selecting a search form style for interactive elements.
jQuery Base default styling 2017-05-23_16-23-52.png
jQuery Base Default Styling

Available For WPSLP and MySLP

Search Form Style is a feature that is included in the base plugin of Store Locator Plus for WordPress and is available under Advanced Options for all levels of the MySLP service.   Premier members on WPSLP and Enterprise Level users for MySLP will have multiple options for the Search Form Style.

 

 

Q. What is the difference between a shortcode and locator layout settings?

A.    A shortcode is a WordPress-specific code that lets you do nifty things with very little effort.  Shortcodes can embed files or create objects that would normally require lots of complicated, ugly code in just one line.   In other words, a Shortcode = shortcut. Continue reading “Q. What is the difference between a shortcode and locator layout settings?”

Selecting and Customizing your Style

Store Locator Plus Appearance

Store Locator Plus comes with a variety of styles to provide a basic style framework that will attempt to match your locator page to various WordPress themes  installed on your site. You can see the list of  Plugin Styles under  the Store Locator Plus Settings Tab / View panel.

 

Continue reading “Selecting and Customizing your Style”

MAP: Info Bubble with Experience add-on

Bubble Layout

The bubble layout setting allows you to change the content and layout of the popup information bubble that appears when someone clicks a map marker or in the results below the map.

The Store Locator Plus shortcodes only work within the bubble layout. These are not generic WordPress shortcodes.
All of the bubble layout shortcodes follow this syntax: