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 Store Locator Plus 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.