One comment I’ve heard repeatedly is that while the new X1 UI is great, the users accessing it need to access this via NetScaler Gateway. So, the question becomes, can we please re-brand that as well?
The short answer is yes – that is very much on the list of active work. However, it isn’t part of the tech preview. So, in this blog I’m going to explain a quick and dirty way of moving NetScaler into the X1 era.
What we are going to do in this blog is rebrand the NetScaler login screen with something more X1-ish. This isn’t a full reskin – but is just enough to make the UX seamless. Here is what we are going to achieve:
Approach
We are going to use a feature in NetScaler to support ‘themes.’ NetScaler currently has two built in themes called ‘Default’ and ‘Green Bubbles.’ Plus, there is support for a third ‘custom’ theme. Initially, I looked at providing a custom theme. But. it turns out this is both version specific to the ‘dot’ release of NetScaler, and is also a little too powerful. Getting a custom theme wrong can break the admin UI.
For simplicity and breadth of support, I’m going to simply replace the existing ‘Green Bubble’ theme with a new X1 styled one. That change is easier to make, and as has the advantage that one file will work with all 10.x NetScalers.
I’ve pre-created a theme for NetScaler 10 here (located here: https://citrix.sharefile.com/d-s0a446bdb94c46b1b) and all you need to do is install it. [Note link updated 26th May]
Uploading the Theme
The first step is to upload the theme onto the NetScaler box. To do this I’m using WinSCP (http://winscp.net/ ). For references I’m using NetScaler 10.5, but this should work with any 10.x variant.
Use win SCP to log in to NetScaler. Use the IP address you normally use for the admin console, and the admin credentials. (Default values are ‘nsroot’ and ‘nsroot’ – obviously on a production system you will have changed them!)
Navigate the local machine (left) and NetScaler (right) until you can see your local copy of the new theme on the left, and the NetScaler copy on the right. (Note these will have the same name)
For reference, the directory on NetScaler is called /var/netscaler/gui/themes
Now I’m going to save the existing file on NetScaler (just in case) by renaming ‘receivertheme.tar.gz’ as ‘original-receivertheme.tar.gz’. To do this right click on the file in the right hand window.
Finally drag the new ‘receivertheme.tar.gz’ from left to right and select ‘Copy Here’.
You should now have this:
Finally you need to configure NetScaler to use this new theme.
First Login to the admin console.
Now open up the “NetScaler Gateway” menu, Click on “Global Settings” then “Change Global Settings”
Now click ‘Client Experience’ and (scroll down) and select ‘Green Bubble’ as the ‘Ui Theme’.
Finally hit ‘OK’ at the bottom of the page.
Refreshing the login UI for the end user should now show the new UI.
One final stage, if all is well, go back to the previous page of the admin console and hit ‘Save’. Otherwise it will all disappear on the next reboot. (Equally if it has gone wrong, select ‘Reboot’ to clear out and start again)
That’s all that is needed – but for those who want to dig deeper, we have documentation on creating themes here:
http://support.citrix.com/proddocs/topic/netscaler-gateway-105/ng-connect-custom-theme-page-tsk.html
What isn’t stated (very clearly) is that you want to load the UI closest to the one you want before creating this customization file (I did this using the ‘green’ receiver theme). Then take the file off box using WinSCP, make any changes and re-upload.
For those who want to follow this route, the changes I made are small
- I added a new background image media\x1_bg.jpg
- I tweaked the main page (index.html) to include this background as a resizable image by adding a single line after the <body …> tag<img src=”media/bg_x1.jpg” style=”width:100%;height:100%;position:absolute;left:0;top:0″/>
- I edited the css (ctxs.mainstyle.css) to avoid loading the old image behind the new one
- I removed the background-image line under ‘body’ (line 14 in my copy)
- I added the following line in its placebackground-color:#3A3E4A;
That’s it for this article. For a future blog post, I’m looking for suggestions – one towards the top of my list is showing how to use the APIs I’ve introduced (and a few more) to enable approvals workflow within X1. If there are other topic you would like to see me cover, please let me know in the comment section below, or via the discussion groups.
PS.
For reference here are direct links to the rest of the blogs in this series
- Welcome to X1
- Deploying and Branding Receiver X1
- X1 Customization: Going deeper with CSS
- Scripting X1
- Receiver X1 APIs
- X1 Skin for NetScaler Gateaway (this blog)
- X1 DIY Approvals
- Old Receiver is Dead. Long Live New Receiver.