Using CSS to style your store locator

If the standard styling options in the Configure 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.

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.

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 Configure > Styling
  2. Find the 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 Configure > Styling (when logged in)
  5. Find the Advacned 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 Config>CSS 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 names
.storepostalcodeStore zip/postcodes
.storecountryStore countries
.storeaddressStore addresses
.storecityStore cities
.storestateStore states
.storelogoStore logo
.storeurlStore websites
.storeemailStore email addresses
.storephoneStore phone numbers
.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
.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