Enhance popup links - On Premises 6.4

Magellan

The appearance of popup on hover and popup on click links can be modified to:

  • highlight the link source text
  • update the icon that appears with the link

Popup link appearance

To enhance popup links:

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

    Highlight the link source text first.

  2. Enter one of the following popup type classes, with an "a" tag for the actual link:

    .popuponhovertemplate a {

    .popuponclicktemplate a {

  3. Add properties for color and highlighting. For example:

    Requirement

    Definition Example

    Change the text colour to green, and add a dotted underline to a popup on hover

    .popuponhovertemplate a {

    color:green;

    text-decoration:underline;

    text-decoration-style:dotted;

    }

    Change the text colour to blue, and add a red wavy underline to a popup on click

    .popuponclicktemplate a {

    color: blue;

    text-decoration-color:red;

    text-decoration-line:underline;

    text-decoration-style:wavy;

    }

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

    Popup link appearance with text changes

    The icon definition is in the mainstyles.css.

  5. Open the mainstyles.css.
  6. Locate the definition:

    /* 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;

    }

  7. Copy and paste the complete definition into the themestyles.css.

    The icon is set by the --popup-link-icon variable, which is defined in the default icons - FontAwesome section of the themestyles.css:

    --popup-link-icon: '\f0e5'

    The f0e5 code is for a Font Awesome icon.

  8. Change this Font Awesome code to use a different 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 icon is shown in black indicating it is free. Those in grey are for pro users only.

  9. Choose a different Font Awesome icon and note the code.
  10. 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:

    Popup link appearance with icon changes

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

    content: none