Citrix Netscaler Gateway and

StoreFront Customization

In this blog post I want to share with you some great resources and how to doCitrix Netscaler
Gateway and StoreFront Customization.
There is lots of blog post around, but not one that cover both customizations. Lets get started.
At Citrix Synergy 2014 I attended the session of Web Interface / StoreFront guru Sam Jacobs. He
has created some awesome source code which let you heavily customize StoreFront. Those CSS
examples is also used by Netscaler Gateway, so the same user experience can be applied on
both sides. Youll find the link to the presentation and the source code at the end of this blog
post.
Citrix Netscaler Gateway and StoreFront Customization
First off make a backup of C:\inetpub\wwwroot\Citrix\StoreWeb\contrib.
Then download my Citrix Netscaler Gateway and StoreFront Customization code and extract the
files to C:\inetpub\wwwroot\Citrix\StoreWeb\contrib.
Now head over to http://localhost/Citrix/StoreWeb and take a look at what we have achieved:

Custom background color

Custom font color

Custom logos

Custom plus sign to add apps

Custom menu text

Custom favicon

Custom tag line

Custom Copyright

So now that the configuration is done for StoreFront we want to customize Netscaler Gateway so
we get the same user experience there.
Head over to your Netscaler Gateway Change Global settings Client Experience and change
UI Theme to Green Bubble.

Now connect to your Netscaler with WinSCP. Copy the files bg_bubbles.jpg (background)
and logo_notagline.png (logo) to \var\netscaler\gui\vpn\media and ctxs.authentication.css to
\var\netscaler\gui\vpn\css.

Head over the external URL of your Netscaler Gateway and check the customization. When
youre happy with it connect to your Netscaler with Putty.
Run the following commands:
nsconfig
mkdirns_gui_custom
netscaler
ns_gui_customcustomthemens_gui

This creates the file customtheme.tar.gz which are used by Netscaler Gateway and also makes
sure the Netscaler Gateway Customization is retained after reboot. The final step is to change UI
Theme from Green Bubble to Custom in Netscaler Gateway Change Global settings Client
Experience.
Netscaler Upgrade:
When you do a Netscaler firmware upgrade you need to switch back to Default or Green Bubble,
upgrade the firmware and than redo your customzations as shown above. The reason are that
sometimes the AdminUI and EPA files changes together with the firmware upgrade.
Resources:
If you want to learn more about Citrix Netscaler Gateway and StoreFront Customization make
sure you follow the blog posts from Feng Huang over at Citrix blogs.
StoreFront 3.0: Message Customization
*Updated to work with Firefox, Chrome, etc.
It can be very helpful when you can make your employees aware of any maintenance that might
affect the systems and applications they access. Below I will detail a few simple customizations
in StoreFront 3.0 you can use to do just that.

As you can see in the above image I have added a green bar with the scrolling text Everything is
working great! Test. The great thing with StoreFront 3.0 is this shows in the StoreFront web page
as well as the desktop Receiver.

How to do this
Step 1
Open Receiver.html in C:\inetpub\wwwroot\Citrix\<StoreWebName>and Overwrite existing
code
<div id=pluginTop><div id=customTop></div></div>
with the following
<div id=pluginTop><div id=customTop><div
class=StoreMarquee><span></span></div></div></div>
Step 2
Manually edit or use provided utility to modify the Style.css located in
C:\inetpub\wwwroot\Citrix\<StoreWebName>\custom

/* StoreFront messaging begin */

#customTop {
height:30px;
background:Red;
.StoreMarquee {
width: 0 auto;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
.StoreMarquee span:after {
Content: Everything is working; /*what the element will contain*/
display: inline;
.StoreMarquee span {
font-family:Arial Black, sans-serif;
font-size:1.0em;
font-weight:bold;
color:White;
display: inline-block;
padding-left: 100%; /* show the marquee just outside the paragraph */
animation: StoreMarquee 15s linear infinite;
-moz-animation: StoreMarquee 15s linear infinite;
-webkit-animation: StoreMarquee 15s linear infinite;
/* Make it move */
@keyframes StoreMarquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
@-moz-keyframes StoreMarquee {
0% { -moz-transform: translate(0, 0); }
100% { -moz-transform: translate(-100%, 0); }
@-webkit-keyframes StoreMarquee {
0% { -webkit-transform: translate(0, 0); }
100% { -webkit-transform: translate(-100%, 0); }

/* StoreFront messaging end */

Done! For the Receiver.html change to apply you will want to do an iisreset. Afterwards you can
make the Style.css changes on the fly.
In addition, to enable/disable the scrolling message use the utility or comment out the
#customTop section
Example
/*#customTop {
height:30px;
background:Red;
Utility information
Utility is written in PowerShell and Windows forms
How to use
Run utility
browse to and open style.css in C:\inetpub\wwwroot\Citrix\<StoreWebName>\custom
make changes
enable and apply
click close to exit

Utility is provided unsupported. StoreFront messaging

Code above attached as text file Code_storefront messaging