Custom CSS

The Experience Add On allows you to customize the style sheets ( CSS ). Any CSS updates entered here will be retained in future updates . CSS is stored in the WordPress options table.

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 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. 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 your Experience / Map / Bubble Layout setting 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:

Making The Address Box Smaller

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

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