MYSLP subscriber  with the Professional level or Enterprise level plan  , allows you to customize the style sheets ( CSS ) for Store Locator Plus  map, results, and search layouts.   There are additional styles also available with  the higher level plans making it less likely that you will need to use custom styling sheets.  If you are adding CSS to the SLP.  The CSS field  is under Settings/View under the various locator styles.

If you are an Enterprise level subscriber and need a style to work with your general theme, you may wish to contact us.  Any CSS updates entered  will be retained in future updates .

For WordPress SLP plugin users, The Experience Add On  is available to purchase for the self managed WordPress SLP plugin , the CSS is stored in the WordPress options table.

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 be the applied style than simply using input.class or .class. The more “details” the better the match for the CSS engine and the more important the CSS engine will think your definition is over the others.

Some examples of CSS rules that will take precedence over the built-in SLP Theme file CSS and WordPress built-in CSS. The below examples are based on earlier versions of SLP document structure which may change over time. They are only intended as general examples of CSS.  For other Platforms such as Weebly, refer to the Weebly MYSLP example under Adjust Layout Styling.  To find the correct rules, the developers recommend using the Firefox Developer tools or Google Chrome Developer Tools to view and copy specific CSS paths.

The trick to getting your custom CSS rules to override other rules is to make them MORE SPECIFIC than the default rules (default rules can be the WP theme or the SLP plug-in style) Add an outside div class or id, for example.

CSS Identifiers

Map Info Bubbles

These are some of the default HTML elements that are part of Store Locator Plus. The Experience Add On  allows complete customization of the info bubble layout. Customized layouts may not include the same HTML structure. Check under your  Settings/ Map / Bubble Layout to verify the HTML structure of the info bubble.

  • div#slp_info_bubble – wraps the entire inner info bubble location data
  • span#slp_bubble_name – wraps the name field
  • span#slp_bubble_address
  • span#slp_bubble_address2
  • span#slp_bubble_city
  • span#slp_bubble_state
  • span#slp_bubble_zip
  • span#slp_bubble_country
  • span#slp_bubble_directions
  • span#slp_bubble_website
  • span#slp_bubble_email
  • span#slp_bubble_phone
  • span#slp_bubble_fax
  • span#slp_bubble_description
  • span#slp_bubble_hours
  • span#slp_bubble_img

Changing The Submit Button

Example: Use the following CSS directive for a pink button with bold white text:

div#address_search #addressSubmit.slp_ui_button {
background: -moz-linear-gradient(center top , #C6659A, #B80049) repeat scroll 0 0 transparent;
border: 2px solid #B80049;
color: #FFFFFF;
font-family: Arial;
font-size: 18px;
font-weight: 700;
height: 30px;
width: 110px;
}

Making The Address Box Smaller

If you have Experience Add On installed you will see a CSS box under  Settings/View tab .

Add this rule in the CSS box to set the address input to 5 characters wide:

#sl_div #searchForm INPUT#addressInput { width: 5em; }