Customizing Citrix Web Interface 5.4

An article by sbarnes from Riverlite

During the last few months I had to do several searches on how to

 customize our cloud VDI POC portal. This article will explain the many

steps that we used to create and edit a new WI 5.4 finished article.

I know the new CloudGatway express is out… I will post the code

changes as soon as I get more info.  Seems some web developers from

Citrix will putting a good guideline soon

Before:

Before Customization

After:

After customization

This area is the first thing that users will see, so it needs to look

as good as possible, but still be functional. We opted for an all white

theme and keeping the centre logon area in-tact, including the p_w_picpaths

of the various devices. This mean that we now needed to pick apart

everything else that needed changing:

By default the logon page has a title of “Citrix XenApp”, we decided

to change this to a custom string (Riverlite vCloud). This text can be

found in:

“C:\Program Files (x86)\Citrix\Web Interface\5.4.0\languages\common_strings.properties” at lines 7 and 8:

By default the web interface will show a “Citrix XenApp” or “Citrix

XenDesktop” logo (dependent on which product installed WI), we had an

in-house PhotoShop expert adjust our Riverlite vCloud logo to a total

white background and make the p_w_picpath a decent size (opted for 454×60) in

preparation for the change over. Although we could edit the config files

to direct WI to load an alternative p_w_picpath we opted for just renaming

the p_w_picpath to the same name as the original p_w_picpath, this ensures less

complexity and also less likely for Citrix support to ever say that the

configuration is not supported in the event of a support call. The

header logo is:

“C:\inetpub\wwwroot\Citrix\SiteName\media\CitrixXenApp.png” (or XenDesktop.png depending on product)

To facilitate the change I renamed CitrixXenApp.png to CitrixXenApp_OLD.png and then dropped our p_w_picpath in as CitrixXenApp.png.

As standard the log on box displays the phrase “log on”, this was

changed to “Riverlite vCloud” by using the following steps within the

Web Interface Management console:

Find the XenApp Web Site

Right click it and select “Web site appearance”

Click “Content”

Click “add” and select the correct language

Tick the “logon screen text” box

Enter your desired text in the “title” section

Citrix add “Your Windows desktops and apps on demand – from any PC,

Mac, smartphone or tablet” as a slogan, however as our vCloud solution

is about more than this we decided to remove this. This can either be

customized or removed, customize the text by editing “C:\Program Files

(x86)\Citrix\Web

Interface\5.4.0\languages\accessplatform_strings.properties” at line 29:

Removal can be achieved by editing “C:\inetpub\wwwroot\Citrix\SiteName\app_data\include\fullstyle.inc” at line 1179 and changing this to “display: none;”.

By default Citrix add Citrix and HDX logos to the footer of the page,

to replace them with custom branding I replaced

“C:\inetpub\wwwroot\Citrix\SiteName\media\CitrixWatermark.png” with my new logo. This logo has a hyperlink attached to it which can be edited in “C:\inetpub\wwwroot\Citrix\SiteName\app_code\PagesJava\com\citrix\wi\controls\FooterControl.java” at line 16

Removing the HDX logo can be achieved by editing “C:\inetpub\wwwroot\Citrix\SiteName\app_data\include\fullstyle.inc” and changing line 886 to have a value of “display: none;”.

By default the background is made up of a handful of p_w_picpaths, however

we decided that it would be better to utilise standard hex colors. The

background is referenced in:

“C:\inetpub\wwwroot\Citrix\SiteName\app_data\include\fullstyle.inc”

By default the top pane uses the p_w_picpath “HorizonBgTop.png” and the bottom pane uses “HorizonBgBottom.png”. To utilise colors instead the following configuration change was made:

Once the user has authenticated they will be presented with their

available applications and/or desktops. We decided that as this page

will be used for demonstration purposes by large numbers of users that

we should make it as clean and simple as possible. We decided to again

implement some custom branding, but also remove the “messages” and

“settings” options. Here is the original heading layout and the original

header logo:

And here is the after:

Again we had to use some PhotoShop expertise to get the color

matching correct (the default WI header background is #95A2AC – as

defined in “c:\inetpub\wwwroot\Citrix\SiteName\app_code\PagesJava\com\citrix\wi\pageutils\Branding.java”). The p_w_picpath that needs replacing is:

“C:\inetpub\wwwroot\Citrix\SiteName\media\CitrixLogoHeader.png”

Open “C:\inetpub\wwwroot\Citrix\SiteName\app_data\include\header.inc”

and change line 62 as per the below to comment out the configuration

item. Ensure that the change is made at both the open and close tags as

highlighted below.

and change line 81 as per the below to comment out the configuration

The logged out page uses a different set of logos and configuration

entries, as such a separate set of customizations is required.

We utilized the same header logo that is used on the logon page by simply copying and renaming the file to:

“C:\inetpub\wwwroot\Citrix\SiteName\media\CitrixXenAppLoggedOff.png”

We utilized the same footer logo that is used on the logon page by simply copying and renaming the file to:

“C:\inetpub\wwwroot\Citrix\SiteName\media\CitrixLogoDarkLoggedOff.png”

We decided to keep a clean white theme throughout the site, but keep

the greyed out devices picture. This configuration is stored in:

Changing the background values to “#000000″ will provide a white background, as per the below:

By default a Citrix favicon is utilized:

This can be changed by placing an icon (16×16 size) with the filename of:

“C:\inetpub\wwwroot\Citrix\SiteName\media\IcaComboAll.ico”

Browse to “C:\inetpub\wwwroot\Citrix\SiteName\app_data\include\fullstyle.inc”

Change line 1184 to set the background to “none”

Change line 1209 to set the background to “none”