How-To: Style PSL Banners using HTML

The Website Banner preference for PlanSponsorLink can be used to display a persistent message to signed-in users, and will be shown at the top of every page, above the navigation tabs and beneath the company name. Although useful, the text may not always stand out on its own, and it could be overlooked by Plan Sponsors. For that reason, PensionPro provides built-in support for HTML stylings that help give the text a more pronounced appearance. This article provides code snippets that will apply these visuals to the Website Banner preference.

Tier Availability: Track, Team, Business

Article Contents

• Banner Type Examples & Code
• Using the Banner HTML Code

Banner Type Examples & Code

An example of each type of banner can be found below along with its corresponding HTML code. The red text in each code block indicates the portion that can be customized as befits the message.

Notice

This banner includes black text on a white background with a border. The text is preceded by a bell icon.

<div class="psl-banner-notification">
    <div class="psl-notification-content">
        <span class="psl-notification-content-icon bell"></span>
        <div class="psl-notification-content-inner">
            <strong>Notice:</strong> Notification text here with <a href="URL">a link</a>.
        </div>
    </div>
</div>

Success

This banner includes white text on a green background. The text is preceded by a check mark icon.

<div class="psl-banner-notification psl-banner-notification-success">
    <div class="psl-notification-content">
        <span class="psl-notification-content-icon success"></span>
        <div class="psl-notification-content-inner">
            <strong>Success:</strong> Notification text here with <a href="URL">a link</a>.
        </div>
    </div>
</div>

Information

This banner includes white text on a blue background. The text is preceded by a lower-case "i" icon.

<div class="psl-banner-notification psl-banner-notification-info">
    <div class="psl-notification-content">
        <span class="psl-notification-content-icon info"></span>
        <div class="psl-notification-content-inner">
            <strong>Information:</strong> Notification text here with <a href="URL">a link</a>.
        </div>
    </div>
</div>

Error

This banner includes white text on a red background. The text is preceded by an "X" icon.

<div class="psl-banner-notification psl-banner-notification-error">
    <div class="psl-notification-content">
        <span class="psl-notification-content-icon error"></span>
        <div class="psl-notification-content-inner">
            <strong>Error:</strong> Notification text here with <a href="URL">a link</a>.
        </div>
    </div>
</div>

Warning

This banner includes black text on an orange background. The text is preceded by an exclamation point icon.

<div class="psl-banner-notification psl-banner-notification-warning">
    <div class="psl-notification-content">
        <span class="psl-notification-content-icon warning"></span>
        <div class="psl-notification-content-inner">
            <strong>Warning:</strong> Notification text here with <a href="URL">a link</a>.
        </div>
    </div>
</div>

Adding the Banner HTML Code

Applying a styled banner to PlanSponsorLink is as simple as copying one of the code snippets above, pasting it into PensionPro, and altering the message text. Use the following steps to walk through this process.

Requires Security Rights: Maintenance

1. Determine which banner style should be used from the options above, then copy the contents of the appropriate code block.
2. Navigate to Maintenance > PensionPro > PlanSponsorLink Subdomains. The corresponding grid opens in a new tab.
3. Double-click a subdomain in the grid to open it at the Preferences view.
4. Hover over the Website Banner preference in the grid and select Edit on the right-hand side. The Edit Preference window displays.
5. Paste the copied code into the Value field.
6. Edit the message text as needed.
7. Select Save.