Random background in StoreFront and NetScaler logon pages

Perform the following steps to get a random background picture on the StoreFront and NetScaler logon page.

For a demo visit https://portal.tyl.nl and refresh the page a couple of times.

StoreFront:

• First we start by gathering all the background pictures you want (dont forget copyrights) ;
• Upload the pictures to the custom folder in your “Receiver for Web”;
  • For example: C:\inetpub\wwwroot\Citrix\StoreWeb\custom
• Edit script.js in the same folder and add the following lines:

$(function(){
    var images = ['bg_01.jpg', 'bg_02.jpg', 'bg_03.jpg', 'bg_04.jpg', 'bg_05.jpg'];
    $('.web-screen').css('background-image', 'url(./custom/' + images[Math.floor(Math.random() * images.length)] + ')');
});

• My pictures are named: bg_01.jpg, bg_02.jpg etc. Don’t forget to update the javascript to match your file names;
• Propagate changes to the other StoreFront boxes;
• Refresh the logon page and see if it works:

NetScaler Portal Theme:

• Create a portal theme based on the “RfWebUI” theme;
• Open a SFTP session to you NetScaler and browse to: /var/netscaler/logon/themes//custom_media
• Upload the pictures to this folder;
• Edit script.js in the folder: /var/netscaler/logon/themes/ and add the following lines:

$(function(){
    var images = ['bg_01.jpg', 'bg_02.jpg', 'bg_03.jpg', 'bg_04.jpg', 'bg_05.jpg'];
    $('.web-screen').css('background-image', 'url(\'/logon/themes/Default/custom_media/' + images[Math.floor(Math.random() * images.length)] + '\')');
});

• Don’t forget to update the javascript to match your file names;
• Open your logon page and refresh it a couple of times.

Notes:

1. Try to keep the pictures small in size. Compress them to save bandwith;
2. Tested with versions:
   • NetScaler: 13.0 58.32
   • StoreFront: 1912

Oh and the grey border around the username and password field is the following CSS 😉

.credentialform input[type=text], .credentialform input[type=password], .credentialform .pseudo-input {
  border-style: groove;
  border-width: revert;
}