How to Style Hyperlinks in Hotspot Content

Here's a tip for Pro Plan users on how to change the appearance of hyperlinks in hotspot content.

You can change the look of each link individually by editing its HTML on the Edit Hotspot Content page, but if you want them all to look the same without editing each one, do this. Choose Tour > Custom HTML from the Tour Builder menu, and then copy/paste the CSS shown below into the CSS section.

#maTextArea a {
   font-family:Verdana, Arial, Helvetica, Sans-Serif;
   font-size:18px;
   font-weight:bold;
}

#maTextArea a:link {
   color:pink;
   text-decoration:none;
}

#maTextArea a:visited {
   color:yellow;
   text-decoration:none;
}

#maTextArea a:hover {
    color:green;
   text-decoration:underline;
}

You'll probably want to edit my CSS to suit your taste. I chose options that make it easy to see what's going on. Hyperlinks appear in pink if they have never been visited and yellow if they have been. They appear in green when you move the mouse over them. They are normally not underlined except when you mouse over them (that's what the text-decoration attribute controls). Note that I also made the font large (24px) and bold.

IMPORTANT: If your tour is directly embedded in a web page and you are using Custom HTML to add the code, be sure that your embed code includes custom.js. You can get the <script> tag to include it from the Code Snippets section on the Tour Preview page. If you don't include custom.js, your custom HTML won't be part of your tour and this tip won't work.

To learn about the #maTextArea class and other ways to use CSS in your tours, see section 6.4 of the MapsAlive user guide for the JavaScript API.