Customise The Citrix Web Interface (5.4)

Customise The Citrix Web Interface (5.4)

Customise The Citrix Web Interface (5.4)

This post has already been read 6850 times!

I was installing a new Citrix Web Interface Cluster last week and started to look at making it look more “corporate”.  Now this isn’t an easy thing and Citrix for what ever reason do not provide an easy option to do this.  You can change the odd logo or tweak a setting here and there but if, like me, you like to heavily change what is in place then you will need to dig a little deeper.

Firstly I would not have been able to do this without the hard work of the following 2 sites (Citrix Forums and Mr Andrew Morgan) :

Also, I realize that this is re-hashing what is written in those 2 articles but if this helps it get out there for more people to see and makes it a little easier for people to change the look of the crappy Citrix Web Interface 5.4 then all the better.

So, lets get to it.  Firstly here is a picture of the initial Web Interface Login page.  This will contain all the images and tag lines you will need to edit in order to make your site look a little better.

Standard Citrix Web Interface Logon Page

Standard Citrix Web Interface Logon Page

All the parts that you will want to change are numbered above and the details of how to change them are outlined below.  As always – please make sure you get a good backup of your Web Interface site BEFORE starting any of these changes.

Note: The image names containing “Dark” or “logged off” are specifically for the logged off screen. You’ll find both gif (for older browsers ) and png files for each of the different images.

1: Header logo.

To remove the logo from the top of the page, find the below entry in.\app_data\include\fullstyle.inc and add the bolded text:

#headerLogo {
padding: 11px 0 11px 18px;
display: none;}

To use a custom graphic instead of the default, modify the following files:

.\media\CitrixLogoHeader.png
.\media\CitrixLogoHeader.gif

(there’s no dark logo for this file)

2: Product graphic.

This product graphic can be either XenApp or XenDesktop depending on your installation. To remove the product graphic, find the below entry in .\app_data\include\fullstyle.inc and add the bolded text:

#horizonTop img {
padding-top: 75px;
Display: none;
}

To use a custom image in place of the product graphic, modify the following files:

For XenApp:

.\media\CitrixXenApp.gif
.\media\CitrixXenAppLoggedoff.gif
.\media\CitrixXenApp.png
.\media\CitrixXenAppLoggedoff.png

For XenDesktop:

.\media\CitrixXenDesktop.gif
.\media\CitrixXenDesktopLoggedoff.gif
.\media\CitrixXenDesktop.png
.\media\CitrixXenDesktopLoggedoff.png

3: Devices.

The devices image appears to the left and right of the login window. To remove the Devices graphic, find the below entry in .\app_data\include\fullstyle.inc and add the bolded text:

.horizonPage .mainPane {
position: relative;
top: -120px;
background: none;
color: white;
padding: 0;
overflow: auto;
}

To replace the devices image with a custom image, modify the following files:

.\media\Devices.gif
.\media\DevicesLoggedoff.gif
.\media\Devices.png
.\media\DevicesLoggedoff.png

5: Tagline.

To remove the tagline “your windows desktop and apps on demand – from any pc”, find the below entry in .\app_data\include\fullstyle.inc and add the bolded text:

#horizonTagline {
color: #F2F2F2;
font-size: 180%;
font-weight: normal;
margin: 50px 0 0 0;
padding-bottom: 10px;
text-align: center;
display: none;
}

To enter a custom tagline, find the below entry in C:\Program Files (x86)\Citrix\Web Interface\5.4.0\languages\accessplatform_strings.properties and replace the bolded text with your custom message.

HorizonTagline=Your Windows desktops and apps on demand – from any PC, Mac, smartphone or tablet.

Footer:

The footer on the web interface site is made up of potentially two components, the Citrix footer logo and the hdx logo. If you wish to indiscriminately remove both from the login page, find the below entry in .\app_data\include\fullstyle.inc and add the bolded text:

#footer
{
text-align: center;
padding-bottom: 10px;
display: none;
}

#footer p
{
padding: 10px 0;
display: none;
}

6: Citrix Logo

The Citrix footer logo appears at the bottom of most web interface pages. To remove the logo, find the below entry in .\app_data\include\fullstyle.inc and add the bolded text:

#footer img
{
padding: 0 8px;
vertical-align: middle;
display: none;
}

To replace the footer citrix logo with a custom graphic, modify the following files:

.\media\CitrixWatermark.png
.\media\CitrixLogoDarkLoggedOff.png
.\media\CitrixWatermark.gif
.\media\CitrixLogoDarkLoggedOff.gif

7: HDX logo

The HDX footer appears at the bottom of the login page. To remove the logo, find the below entry in .\app_data\include\fullstyle.inc and add the bolded text:

.horizonPage #hdxLogo {
display: none;
}

To replace the HDX logo with a custom graphic, modify the following files:

.\media\HDX.gif
.\media\HDXLoggedoff.gif
.\media\HDX.png
.\media\HDXLoggedoff.png

That is all you will need to do.  Thanks for Andrew Morgan and the Citrix Blogs for all the input and credit where credit is due to you guys.

Here is what we have (minus the corporate branding of course!)  Please share / comment and of course add any of your own edits you have made to the comments section of this post.  Hope you find it and find it useful!!

Custom Web Interface

Custom Web Interface

Leave a Reply

Your email address will not be published. Required fields are marked *