NetScaler Gateway front page à la StoreFront 3.0

Below are the steps on how to brand the NetScaler Gateway front page to look similar to the new release of StoreFront 3.0.

If you are enabling the VPN (AKA Client Choices), then I also suggest you read my Citrix NetScaler Gateway Client Choices branding post.  And finaly take a peek at my previous post on Customizing Citrix NetScaler Gateway 10.5 logon page with Dual Factor Authentication,

Please note I tested this on several 10.1 Firmware Releases as well as the 10.5 Safe Harbor Build 56.22.nc release.

Environment 

• Citrix NetsScaler 10.5 Safe Harbor Build 56.22.nc
• StoreFront 2.6

Lets take a look at the Default Logon Page to be utilized with Citrix Web Interface 5.x (not 5.4) to match the carbon-black look and feel

Ok now lets make this Green Bubble, once you apply the changes, you will notice the files will change under /var/netscaler/gui/vpn

Head over to your NS management IP:

Go under NetScaler > NetScaler Gateway > Global Settings and click on “Change Global settings”
Now click on the “Client Experience” Tab and change the “UI Theme” from “Default” to “Green Bubble”

This will update the authentication page to the horrendous looking Bubble Green theme

Now lets have some fun 😛

Backup the entire  /var/netscaler/gui/vpn directory

Since I am using second factor authentication for this roll out, we need to modify the login.js file in order to customize the password fields

 

Around line 89 you will see the showpwd function, this will need to be manipulated so it does not displays the word “Password: 1” but rather something as simple as “Password:” or whatever you like.  Your code should look this this.

function ns_showpwd_greenbubble()
{
var pwc = ns_getcookie(“pwcount”);
document.write(‘<div class=”field CredentialTypepassword”><div class=”left”><label class=”label plain”><SPAN>’ + _(“Password”));

// Original password settings with Password: 1
// if ( pwc == 2 ) { document.write(‘&nbsp;1’); }
// Removes password value 1 when using dual factor

if ( pwc == 2 ) { document.write(‘&nbsp;’); }
document.write(‘:</SPAN></label></div>’);
document.write(‘<div class=”right”><input class=”prePopulatedCredential” autocomplete=”off” spellcheck=”false” type=”Password” title=”‘ + _(“Enter password”) + ‘” name=”passwd” size=”30″ maxlength=”127″></div></div>’);
if ( pwc == 2 ) {
document.write(‘<div class=”field CredentialTypepassword”><div class=”left”><label class=”label plain”><SPAN>’ + _(“Password2″) + ‘</SPAN></label></div><div class=”right”><input class=”prePopulatedCredential” autocomplete=”off” spellcheck=”false” type=”Password” title=”‘ + _(“Enter password”) + ‘” name=”passwd1″ size=”30″ maxlength=”127″></div></div>’);
}
UnsetCookie(“pwcount”);
}

Now lets modify the “Password 2:” entry by heading over to the “en.xml” under the “resources” folder

Around line 83 change the “Password2″ String to something like “RSA Code”

<String id=”Password2″>RSA Code:</String>

Ok that takes care of the Password fields 🙂

 

Now lets modify some CSS.  Head over to “ctxs.authentication.css” in the “css” folder

Lets add that funky shadow border StoreFront 2.6 has, which by default it is missing

 

Around line look for “#logonbelt-topshadow” and “#logonbelt-bottomshadow” and lets add the shadow pics StoreFront uses.

Your code should look like this when you are done, make sure you copy those files from the StoreFront servers under the media directory on your StoreFront site (Ex: c:\inetpub\wwwroot\Citrix\NetScalerGatewayWeb\media\) copy both Screen_shadow_top.png and Screen_shadow_bottom.png to the “media”folder on your NS.

#logonbelt-topshadow {
background: url(“../media/Screen_shadow_top.png”) no-repeat transparent;
position: relative;
top: 205px;
margin: 0 auto;
width: 1009px;
height: 15px;
}

#logonbelt-bottomshadow {
background: url(“../media/Screen_shadow_bottom.png”) no-repeat transparent;
position: relative;
bottom: 0;
margin: 205px auto 0;
width: 1009px;
height: 15px;
}

Now lets change that darn green vertical bar, which is actually a pic that Citrix calls in their code.

Look for “#logonbox-container”, you will need to crank up that Photoshop or whatever image utility you use, and paint it the color you like, then point to the new file.  As you can tell Citrix is using a file called “VerticalGreenBarOnly.png” under the media folder.  Make changes and upload the new pic file and make a call to it in the CSS.  Your code should look like this.

#logonbox-container
{
/* background: url(“../media/VerticalGreenBarOnly.png”) repeat-y scroll 0 0 transparent; */
background: url(“../media/VerticalPurpleBarOnly.png“) repeat-y scroll 0 0 transparent; */
min-height: 230px;
margin: auto;
min-width: 654px;
position: relative;
top: 205px;
}

Now lets use that StoreFront 3.0 background file, head over to your X1 installaton and grab the bg_x1.jpg file under your Sites deployment (Ex: C:\inetpub\wwwroot\Citrix\PrivateCloudWeb\media)

Upload bg_x1 to the media folder on your NS and make a call to it under “#authentication”  Your code should look like this when you are done.

#authentication
{
background-image: url(‘../media/bg_x1.jpg’);
background-size: cover;
height: 100%;
width: 100%;
}

Now lets go after that logo.  You will need to mess around with the height and width and top settings based on the size of the log you are using.

Upload your company log to the media folder on NS, then head to the “#logonbox-logoimage” section and make a call to it.  Your code will look something like this when you are done.

#logonbox-logoimage
{
background-image: url(“../media/company_logo.png”);
border: 0 none;
float: right;
height: 43px;
position: absolute;
right: 69%;
top: 92px;
width: 354px;
}

Now lets make this work with IE11, and force the index.html file to render with IE9. Lets also change the default “NetScaler Gateway” Tab to match your company name.  In my case I am also loading a custom ico file when you save the link.

Open the index.html file and modify the code so it looks something like this

<HEAD><TITLE>Name of your Company</TITLE>

<META http-equiv=”X-UA-Compatible” content=”IE=EmulateIE9″ />

<link rel=”SHORTCUT ICON” href=”/vpn/images/company_icon.ico” type=”image/vnd.microsoft.icon”>

Almost done, except that the background picture you used “bg_x1.jpg” is not dynamic, meaning it will display a static size and will not re-size on the screen based on the browser size, and you get this very annoying scroll bar at the bottom right.

The reason is Citrix is using 9px as a margin to allocate that green bar “background: url(“../media/VerticalGreenBarOnly.png”) repeat-y scroll 0 0 transparent;” So lets delete that margin and also make the background image cover the browser screen.  Your code should look like this

#logonbox-innerbox {
background: url(“../media/Screen_SemiTranslucent.png”);
display: table;
height:242px;
position: relative;
width: 100%;
/* margin-left: 9px; Remove margin on the right. Makes the front page scroll 😦 */
}

#authentication
{
background-image: url(‘../media/bg_x1.jpg’);
background-size: cover;
height: 100%;
width: 100%;
}

We are done.  End result will look something like this.  Hope this helps and please remember to do the following or your will lose your work when the Netscaler is rebooted

Open Putty and log in as nsroot, then type (Note the name of the compressed file, this needs to match “customtheme.tar.gz“)

• shell
• mkdir /var/ns_gui_custom
• cd /netscaler
• tar -cvzf /var/ns_gui_custom/customtheme.tar.gz ns_gui/*

Now apply the package to your AGEE sites

• In the configuration utility, under the Configuration tab, expand “NetScaler Gateway” and then click “Global Settings“.
• In the details pane, under Settings, click Change global settings.
• In Global NetScaler Gateway Settings, click the Client Experience tab.
• Next to UI theme, click Custom and then click OK.
• Save NS config and done!

 

Disclaimer:

I do not accept any responsibility or liability for the accuracy, content, completeness, legality, or reliability of the information contained on this website.