For those of you who have customized Receiver for Web 2.5, you will be delighted to know that the majority of your customization should still work after upgrading to StoreFront 2.6. In fact all of the examples presented in my previous blog article, Customizing Receiver for Web 2.5, work well with only one exception, which is “Example 6: Pre-Login and Post-Login Messages in Message Box.”

In this article, I’ll provide you with an update of this example to work with StoreFront 2.6 as well as instructions for adding a message on the logon screen without having to clicking through.

I assume that you are familiar with how to customize Receiver for Web. If you are new to this, please refer to Customizing Receiver for Web 2.5 for details.

Updated Example 6: Pre-Login and Post-Login Messages in Message Box

The only modifications needed for this example are to change the class name ‘custombutton’ to ‘button’ and to remove the CTXS.button wrapper.

Here is the updated JavaScript for pre-login message:

$(document).ready(function() {
    CTXS.Application.preLoginHook = function () {
        var _dialogTitle = '<h1'
            + ' class="messagebox-title _ctxstxt_Disclaimer"></h1>';
        var _dialogBody = '<div class="messagebox-body">' +
            '<p class="_ctxstxt_DisclaimerStatement"></p></div>';
        var _dialogButton = '<div class="messagebox-buttons">' +
            '<a href="#" class="button _ctxstxt_Continue"></a></div>';
        var dialog = _dialogTitle + _dialogBody + _dialogButton;
        var $messagePane = CTXS.displayMessagePane(dialog).ctxsLocalize();
        var $button = $messagePane.find('.button');
        $button.click(function () {
            CTXS.Events.publish(CTXS.Events.preLogin.done);
            return false;
        }).ctxsHandleEscapeKeyInDialog().ctxsPlaceFocusOnFirstElement(
          ).ctxsBindFocusWithin();
    };
});

The updated JavaScript for post-login message is as follows:
$(document).ready(function() {
    CTXS.Application.postLoginHook = function () {
        var _dialogTitle = '<h1 '
          + 'class="messagebox-title _ctxstxt_Announcement"></h1>';
        var _dialogBody = '<div class="messagebox-body">'
                + '<p class="_ctxstxt_AnnouncementContent"></p></div>';
        var _dialogButton = '<div class="messagebox-buttons">' +
            '<a href="#" class="button _ctxstxt_Continue"></a></div>';
        var dialog = _dialogTitle + _dialogBody + _dialogButton;

        var $messagePane = CTXS.displayMessagePane(dialog).ctxsLocalize();

        var $button = $messagePane.find('.button');
        $button.click(function () {
            CTXS.Events.publish(CTXS.Events.postLogin.done);
            return false;
        }).ctxsHandleEscapeKeyInDialog().ctxsPlaceFocusOnFirstElement(
         ).ctxsBindFocusWithin();
    };
});

Adding Pre-Login Message on the Logon Screen

A number of customers have asked how to add a disclaimer/message on the logon screen. Here is the JavaScript code snip to do this:

$(document).ready(function() {
    var $markup = $('<div id="logonbox-disclaimer">'
        + '<h4 class="_ctxstxt_Disclaimer"/>'
        + '<span class="_ctxstxt_DisclaimerStatement"/>'
        + '</div>');
    $markup.insertBefore('#logonbox-logonform');
});

To improve the appearance, use the following CSS rules:
#logonbox-disclaimer {
    padding: 40px 40px 0px 40px;
}

#logonbox-logonform {
    padding-top: 20px;
}

Here is the resultant screen shot: