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 Experience Tab / View panel.

 

What Are Plug-in Style(s) and Theme Files?

SLP Plug-in Style files are 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 Experience / View panel.

Note: WordPress suggests: Before editing any of your WordPress files, BACKUP! And Work from Backups 

SLP styles with Advanced Layouts

The Advanced Plug-In styles options will be evident if you have both   Power and, Experience or a Premier Subscription.   A brief description of the Add-ons that work best with the selected SLP style will appear  under the SLP Experience/View tab.  With the Experience or Premier Add-ons you can change the look of your location search page or results layout, or map.  Put the map on top with search and results below. Or on the side. Or hide it. Or you can select a style to highlight featured locations. There is probably a style perfect for you but if not you can further customize it with the Power Add-on when used with the Experience Add-on (a CSS box will appear Under View).

Gallery Styles

Pre-selected with one click built in layouts. If you are a premier customer you can ask for your particular style to be added to the gallery.

 

Creating your own Custom /Advanced Style

Advanced styles are designed to enhance your premium add-on user experience.

Whenever an Advanced Style is selected a list of Preferred Settings will be displayed on the style panel.  Implement the Preferred Settings by clicking Save Settings.    The Plugin Style features provide a simple 2-click operation to change the entire layout of the Store Locator Plus interface. You can also customize or create your own plugin style.

The  Experience Add-on combined the  Legacy (Enhanced) add-ons. See FAQ legacy add-ons.
Experience View 4.4
Expereince view page layout back end 4.4

How to Customize the Plug-in Style Sheet using Store Locator add-ons

The built-in Store Locator Plus CSS rules tend to take precedence over most basic HTML elements. The easiest way to ensure your Custom CSS rule is invoked is to provide a higher level of specificity in your CSS definition. In simplest terms this means that the CSS definition div#div_id input.class { blah; } will be more likely to take precedence over the applied style than simply using input.class or .class. The more “details” added the better the match for the CSS engine and more likely that the CSS engine will apply your definition (rules) to the output.