Netscaler Gateway X1 theme

What I like when I access my virtual desktops and applications is consistency thought different systems, front web and UI… Citrix have try with the green bubble theme to bring this but that wasn’t really a success due to this “not very good looking” theme 🙂

With their new Technology Preview of Storefront X1, the theme is nice and neat, I think that might the first time I won’t change it since they deliver the Web Interface 4.x, 5.x and prior Strorefront releases.

As Citrix are explaining in blog post, release notes [here] about this Technology Preview, they want to bring the same user experience accros all devices, browser etc… I just hope they won’t forget about the Netscaler Gateway and bring a simple way to customize it as they began to do with Storefront X1 : you can read my previous blog about that [here]

To wait for this moment, I did the change myself with Storefront X1 elements on my Netscaler 10.5 build 54.9008.e.nc, you can either download sample file bellow or use your own.

If you want to use your own, you’ll find the Storefront X1 background in c:inetpubwwwrootCitrix[YourStoreName]Webreceiverimages2xReceiverFullScreenBackground_46E559C0E6B5A27B.jpg, you’ll need to remane it to bg_bubbles.jpg once you’ve copied it.

You’ll find the ctxs.authentication.css file on your Netscaler in /var/netscaler/gui/vpn/css/ctxs.authentication.css , you can download it using Winscp or whatever the sftp software you want to use.

For the logo if you want to use one, you can do your own and try to size it to make it fit. You need to name the file logo_notagline.png.

Why do I chose to use those name ? Just to avoid making change in the ctxs.authentication.css file. You can if you want use your own file name and change every entry in the css file to match you file’s name.

Step are easy but not as easy as I would like to be (through the Netscaler UI or Storefront UI to propage the change would be super cool)

Connect to your Netscaler admin UI and go the Netscaler Gateway menu, then in Global Settings and chose Change Global Settings, click on Client Experience tab and then change the UI Theme to Green Bubble.

Open a sftp connection to your Netscaler and upload your bg_bubbles.jpg and logo_notagline.png files to /var/netscaler/gui/vpn/media

Then copy your ctxs.authentication.css file to  /var/netscaler/gui/vpn/css

Once you done, check if what you see please you between what you had before and what you want to see.

Before

After

I’m not satisfied with the result because I cannot see the whole logo i chose to use. If this happen, you’ll have to modify your ctxs.authentication.css file and adapt it to include your logo_notagline.png size

my .png size is 233×120

ctxs.authentication.css

#logonbox-logoimage
{
    background-image: url("../media/logo_notagline.png");
    border: 0 none;
    float: right;
    height: 120px;
    position: absolute;
    right: 71%;
    top: 80px;
    width: 233px;
}

Save the ctxs.authentication.css file and upload it again in your Netscaler /var/netscaler/gui/vpn/css directory

Refresh your web browser and check it out

Looks better already.

By modifying the ctxs.authentication.css file you can change and adapt almost everything to look exactly the way you want.

I just change logon box font color to match the logo text color

One everything you want to change is ok, you need to commit the change on your Netscaler box. To do so, open an ssh connexion (nsroot or nsroot privilege user) and proceed as follow :

Go the the /nsconfig folder :

Source code

cd /nsconfig

save the ns.conf file :

Source code

cp ns.conf ns.conf.save

create the /var/ns_gui_custom directory :

Source code

mkdir /var/ns_gui_custom

Go to the /netscaler directory :

Source code

cd /netscaler

and then compress the theme we just finished creating :

Source code

tar -cvzf /var/ns_gui_custom/customtheme.tar.gz ns_gui/*

Why do we need to do that ? to make the change persistent accross Netscaler reboot.

Now you need to return to your Netscaler admin GUI and go the Netscaler Gateway menu, then in Global Settings and chose Change Global Settings, click on Client Experience tab and then change the UI Theme to Custom.

Don’t forget this change may be discarded with Netscaler upgrade and updates. I suggest you do a simple bash script to put everything back in order as part as your Netscaler Upgrade documentation.