Tag Customization

With the v2.2 release of Store Locator Plus you can now associate icons with tags. It is not a simple “click and play” solution, at least not at this point, but there is a mechanism to do this with a little CSS work. The steps are outlined below.

Steps To “Iconify” Tag Output

These steps will help you replace tag text with icons:

  • Download and install Store Locator Plus v2.2 or higher, without this you won’t have the features needed to make tag icons work.
  • Check off the “Show Tags In Output” option.
  • Locate the div class name for the tag set you wish to replace with icons.
  • Add a CSS entry in the /core/css/csl-slplus.css file.

These steps are detailed below.

Locate The Div Class Name

Each unique tag, or group of tags, associated with a location will generate a unique class name. This class name is part of a <div> tag that wraps the normal text output of the tags when you have “Show Tags In Output” enabled. There is also an inner span class that is NOT unique that allows you to manipulate (or hide) the text separately from the div image. The tags look something like this:

<div>
<span>blue tag,red tag</span>
</div>

We use Firefox with Firebug and find the class names via the element inspector. Viewing and sorting through the source of your map display would also work, if you are up for the challenge.

Add A CSS Entry

The basic technique is to hide the text and set the background of the div class to an image. The background image would normally be an icon, or group of side-by-side icons. In our case for the above tag we’d use a blue circle next to a red circle to indicate this location is tagged with both blue and red.

Notice the tag class names use underscores in place of spaces and 44 in place of commas. Be on the lookout for double underscores. We recommend copying and pasting the class names directly from the source to the csl-splus.css file.

Here is the replacement technique in action.

.green__44_blue_tag {
    background: url("../../core/images/StoreLocatorPlus_icons32.png") no-repeat scroll -75px -3px transparent;
    width: 75px;
    height: 75px;
}

.green__44_blue_tag .tagtext {
    display: none;
    visibility: hidden;
}

The first class definition sets our icon image and forces the div to match the image height and width. The second class pair tells the browser to hide the text withing that specific tag. Note that we could have just used .tagtext in the second CSS definition if we were certain we wanted to hide ALL TEXT from all location tags listed, which would probably be the case.

Example

Here is an example we did for the “pilot training” tag.

Before:

Tag Text Before CSS Modification

Tag Text Before CSS Modification

After:

Tag After CSS Modification

Tag After CSS Modification