Change the appearance of Magellan popup links

The appearance of Magellan popup on hover and popup on click links can be modified to do the following:

• Highlight the link source text.

• Update the icon that appears with the link.

• Highlight source text of popup links:

1. Open the themestyles.css file in your theme folder.

2. Add the following CSS to themestyles.css, editing it to suit your needs:

   .popuponhovertemplate a {
       color: green;
       text-decoration: underline;
       text-decoration-style: dotted;
   }
   
   .popuponclicktemplate a {
       color: blue;
       text-decoration-color: red;
       text-decoration-line: underline;
       text-decoration-style: wavy;
   }

These example changes would result in the two links appearing as follows. Note that the icon adopts the text color.

• Change the icon of popup links:

1. Open the themestyles.css file in your theme folder.

2. Add the following CSS to themestyles.css, editing it to suit your needs:

   html {
       /* default icons - FontAwesome */
       --popup-link-icon: '\f0e5';
   }
   
   /* icon after popup on hover */
   a[data-toggle="popover"]::after {
       content: var(--popup-link-icon);
       font-family: FontAwesome;
       padding-left: 2px;
       display: inline-block;
       position: relative;
       top: -5px;
   }

   The icon is set by the --popup-link-icon variable. The f0e5 code is for a Font Awesome icon.

   All the Font Awesome icons used by Magellan are free from the Font Awesome website. If you search for f0e5 on the Font Awesome website, the icons displayed in black are free. Icons displayed in gray are for pro users only.

3. Go to the Font Awesome website.

4. Choose a Font Awesome icon and note the code.

5. Update the --popup-link-icon variable with the new icon code.

   This updates the icon for both the popup on hover and popup on click links. For example, the code f069 would change the icon to an asterisk:

   

6. If you want to remove the icon altogether, change the content property in the definition to:

   content: none;