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/<your_theme>/custom_media
  • Upload the pictures to this folder;
  • Edit script.js in the folder: /var/netscaler/logon/themes/<your_theme> 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;
}

 

Posts created 125

2 thoughts on “Random background in StoreFront and NetScaler logon pages

  1. Is there any way to change the border line of user name and password in the white background. it is working fine with RfWebUI theme while making changes on themes.css but not working with X1?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top