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

Section 1 – the logon page

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:

1. Page Title

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:

2. Header Graphic

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.

3. Log on box text

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

4. Slogan

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;”.

5. Footer Images

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;”.

6. Changing the background colour

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:

Section 2 – the applications/desktops page

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:

1. Replacing the header logo

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”

2. Removing the “messages” option

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.

3. Removing the “settings” option

Open “C:\inetpub\wwwroot\Citrix\SiteName\app_data\include\header.inc” and change line 81 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.

Section 3 – the logged off page

The logged out page uses a different set of logos and configuration entries, as such a separate set of customizations is required.

Before:

After:

1. Changing the header graphic

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”

 

2. Changing the footer graphic

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”

 

3. Customizing the background color

We decided to keep a clean white theme throughout the site, but keep the greyed out devices picture. This configuration is stored in:

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

Before:

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

Section 4 – Other useful adjustments

1. Favicons

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”

2. Removing the “devices” p_w_picpath from the logon page

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

Change line 1184 to set the background to “none”

3. Remove the devices p_w_picpath from the logged off page

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

Change line 1209 to set the background to “none”