Citrix Web Interface 5.4 was released in correlation with XenDesktop 5 back in December of 2010. This new release featured a newly redesigned white theme promoting Citrix’s any device campaign. With the switch from white (nFuse) to black (Carbon Fiber) and now back to white (5.4), there can be inconsistencies when used in conjunction with gateway products such as Access Gateway Standard/VPX or Access Gateway Enterprise Edition on Netscaler. This issue is perpetuated if you install as default, utilizing the black carbon fiber Access Gateway Enterprise Edition front-end (default theme on current Netscaler 9.x code) to pass authentication to a white Web Interface 5.4 portal. This blog post will show you how to enhance your access gateway logon screen to cleanly integrate with Web Interface 5.4, transforming the logon screen into this:

In case you don’t recognize it, below is the familiar Access Gateway black carbon fiber design (default theme):

Citrix has recognized the need for a white theme that can be installed following CTX123607.  After following the steps documented in the article, your new Access Gateway Enterprise Edition splash screen will look like this:

I admit, this certainly looks better than the original black carbon fiber interface passing to a white Web Interface portal, but what’s with the bland white swoosh background? Better question, what’s with the white space at the right and left of the background? My opinion as a consultant: customers pay a lot for Access Gateway integrations and we all know what is said about first impressions. Maybe I’m being a little too OCD, but when the new WI 5.4 interface looks so elegant and professional, why not simply port those design elements over for the Access Gateway login screen? Well, that’s exactly what I’ve done with two simple modifications to the white theme provided in CTX123607. With a little work in Photoshop and some modifications to the CSS style sheet, I have created a new white theme Access Gateway Enterprise Edition splash screen that closely resembles that of Web Interface 5.4. Let’s compare…

Current Web Interface 5.4 logon screen:

Enhanced Access Gateway Enterprise Edition 9.x White Theme:

First, I removed the white space on either end by modifying background color for the .CarbonBoxBottom style in /netscaler/ns_gui/vpn/images/caxtonstyle.css. Using some color picker techniques, I found that #F7F7F7 (Not quite white) blends perfectly with the colors immediately below, removing the obnoxious eye catching white space.

Second, I replaced the original white swoosh background with a new image with design elements taken from the Web Interface 5.4 splash image. This background reference was changed in the style sheet and the new image can be found here: /netscaler/ns_gui/vpn/images/LoginCarbonFiberBgFooter.png

Once I had all the design elements the way I wanted them, I gunzipped and tarballed all the changes to create a new EnhancedAGEEWhiteTheme.tar.gz that, using the instructions provided by Citrix, can replace the white theme referenced in the article.

To use, simply copy the tar.gz file (Using WinSCP for example) to your access gateway as /var/white.tar.gz. Then, update the /nsconfig/rc.netscaler file (Create if needed), adding the following line:
tar -zxvf /var/white.tar.gz -C /netscaler/ns_gui/vpn/images/
This process ensures the changes will persist through reboots.

To apply the new theme immediately, simply run the same command from the shell prompt (root@ns#):

The output will show a list of files extracted from the white.tar.gz. Refreshing the Access Gateway logon screen will immediately show the new interface. If you have any problems installing the attached theme, reference the Citrix article or simply add a comment below.

If you have any questions, comments, suggestions or recommendations, please feel free to submit them below. If you found this post useful and decide to use the attached theme to clean up your white themed AGEE appliance, I would love to hear about it!

Thanks for reading,
youngtech