Using CSS to style your store locator

Change the appearance of colors, text, buttons, backgrounds, spacing...

Tip: Modern browsers have a useful function where you can right-click on any element in a web page and select 'Inspect element' - this details all the class names and CSS attributes associated with that particular element.

---

You might also be interested in...

Customize your store locator search results

Setting up multiple locator accounts

Using Priority values to order search results

Using different icons for different store types

If the standard styling options in the Settings page aren't enough to achieve the style of locator you're looking for don't worry - you can use CSS to make it your own.

How? Essentially you can use CSS to customize/over-ride any of the element styles.

There are two ways you can achieve this - entering the CSS directly in Blipstar or referencing an external stylesheet (typically stored on your own server).

Option 1 - Direct Input CSS

Option 2 - External CSS file

Example

Here's an example of changing the font for the heading on the search page using the second option. Originally it looks like this...

Before

We then create a CSS file from the template and call it blipstarextra.css, saving it on our server. The file over-rides the heading class:

...
@font-face {
  font-family: 'Gloria Hallelujah';
  font-style: normal;
  font-weight: 400;
  src: local('Gloria Hallelujah'), local('GloriaHallelujah'), url(https://themes.googleusercontent.com/static/fonts/gloriahallelujah/v4/CA1k7SlXcY5kvI81M_R28Y5mSNQmgKshuii2YddNQzE.woff) format('woff');
}

.heading{font-family:'Gloria Hallelujah'}
...

We log in to our Blipstar account and go to Settings > Styling > Define your own CSS (Advanced) and in the External css setting enter the full url of blipstarextra.css.

Reference the external CSS file

Once saved, the refreshed page looks like this...

After

Using this technique you can style the page in all manner of ways - just remember to fully refresh the page to see any changes.

Let us know if you come up with any particularly creative customized designs!

List of Elements you can Style