While I was out on vacation the past few weeks, I noticed some queries on the Citrix forums regarding adding a corporate background image to the Web Interface applications page. I thought it might be useful to expand upon that and talk about images on the logon page as well, so let's begin there. Here is an unmodified WI 5.4 login page:

As much as I like Citrix, I would prefer having my own corporate logo front and center, instead of "Citrix XenApp". You would think that this would be done in the Appearance tab of the WI Access Management Console, as in earlier versions. This is not the case. For version 5.4, this only controls the image on the applications page (more on that later).

Unless otherwise mentioned, all of the modifications will be done to files in the following directory:
Please make sure to make backup copies of any modules before you modify them.

To change the logon page logo, you'll need to edit layout.ascx. Open it with your favorite ASCII editor (NotePad will do just fine), and around line# 195 you should see:

if (layoutControl.isLoggedOutPage) {    brandingImg = (Include.getSiteBranding(wiContext) ==       UserInterfaceBranding.DESKTOPS) ? "CitrixXenDesktopLoggedoff.png" :          "CitrixXenAppLoggedoff.png"; } else {    brandingImg = (Include.getSiteBranding(wiContext) ==       UserInterfaceBranding.DESKTOPS) ? "CitrixXenDesktop.png" :          "CitrixXenApp.png"; }

Copy your logo to the site's media directory, and update the last line with the name of your logo file. In a pinch, you can just rename your logo to CitrixXenApp.png (after renaming the original Citrix file), and you would not even need to modify the source. It would have been nice if Citrix would have made it into a configurable option in the WebInterface.conf file. Maybe in a future version ...

Once the file is saved and we refresh the browser (an IISRESET is not necessary for any of these modifications), we should see our logon page with the updated logo:

(click for full-size image) There is too much whitespace above the logo, with the result that the logo is crowding the logon box. Open up fullstyle.inc, and search for the #horizonTop img CSS selector.

Change:    padding-top: 75px;          to:          padding-top: 30px;

... and refresh the screen:

(click for full-size image)

Much better! I happen to think this has a nice, clean look. If however, you feel like adding a corporate logo (or image of corporate headquarters) as a background image, you would need to make three additional modifications.

The first two modifications would be in fullstyle.inc to remove the background tags from .horizonPage and #horizonTop (HorizonBgBottom.png and HorizonBgTop.png, respectively). The third modification would be to replace the background of the body CSS tag in loginStyle.inc with your background image.

After saving the files and refreshing the screen, we get:

(click for full-size image)

If you decide to go with a background image, it would probably be a good idea to take the opacity down to around 40-50%, so it doesn't overpower the screen.

Now, on to the applications list ...

As mentioned above, the logo in the upper-right corner is specified in the Appearance section of the Web Interface Access Management Console:

In order to add our background image to the applications page as well, we simply need to replace the color CSS tag with our background image, and voila!

For more TechDev articles, please visit the TechDev Corner.


⬅︎ Back to News & Events