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:
|
1 2 3 4 |
$(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:
|
1 2 3 4 |
$(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:
- Try to keep the pictures small in size. Compress them to save bandwith;
- 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 😉
|
1 2 3 4 |
.credentialform input[type=text], .credentialform input[type=password], .credentialform .pseudo-input { border-style: groove; border-width: revert; } |
2 Comments
Naveen Chopra · May 12, 2021 at 16:24
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?
Jeroen Tielen · May 12, 2021 at 16:42
Hi Navee, offcourse that is possible. But who is still using the X1 theme? ;).