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

  1. Log in to your Blipstar account and go to Settings > Styling
  2. Find the Define your own CSS (Advanced) section near the bottom
  3. In the text box enter the styling code you want to add
  4. Save options
  5. Assuming you've input valid CSS (it checks with the W3C Validator) the changes will be reflected in your store locator

Option 2 - External CSS file

  1. Download the css template (this contains the main styles you can over-ride)
  2. Edit the file as required
  3. Save the file on your server
  4. Go to Settings > Styling (when logged in)
  5. Find the Define your own CSS (Advanced) section and enter the url of your uploaded css file in the External CSS url setting
  6. Save options


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


CSS 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( 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

CSS config

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


CSS 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

Search page

CSS selectorWhat it is
.headingMain heading
.edgePadding around the search interface
.spacer Padding space at top of page
.searchtextHelper text for chosing radius or results to show
.search INPUT[type=text]Search interface text box
.search SELECTSearch interface drop down menu
.search .btnSearch interface buttons
.tagsearchTag search div
.tagsearch SELECTTag search drop down menu
.tagsearch INPUTTag search check boxes or auto-complete textbox
.autolocateAuto-locate option
.versionsVersion chooser (normal/mobile/text-only)

Results page

CSS selectorWhat it is
.noresultNo results found div
.searchtitleInitializing text
.newsearchNew search link
.backresultsBack link
.loadingScanning... message div
.loadingtextScanning... message text
.resulttotalResults total
.resultsstyleMain results div
.resultIndividual result divs
.priorityApplied to results with a priority value
.storenameStore name
.storepostalcodeStore zip/postcode
.storecountryStore country
.storeaddressStore address
.storecityStore city
.storestateStore state
.storelogoStore logo
.storeurlStore website
.storeemailStore email addresse
.storephoneStore phone number
.storedistStore distances
.storeoptionsStore options (eg. Map | Directions
.storetimestitleStore opening times title
.storetimes THOpening times days (e.g. Mon)
.storetagsStore tags
.storemisc1Store misc1 fields
.storemisc2Store misc2 fields
.storemisc3Store misc3 fields
.storemisc4Store misc4 fields
.storeiconresultStore icons (in results)
.storelabelStore map labels
.toggleunitsLink to toggle between miles/km
.resultsnoteSet text displayed above and below results
.directionsstyleMain directions div
Providing store locator solutions since 2006.   Share: Linkedin  |  Twitter  |  Google+  |  Facebook  |  Pinterest