News

How to add a corporate logo and background image to Web Interface 5.4

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:
         <siteroot>\app_data\include\
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.


7 Responses

  1. The Magic of CSS | IPM linked to this.
    • Paul

      Which file and location is the following information:

      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

      • Joar

        Same problem here as Paul is asking.

  2. Rodwan

    Which file and location is the following information:

    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

  3. Sam Jacobs

    All,

    My apologies … unfortunately, I don’t get notified when a comment gets posted.
    Please email me directly at sjacobs@ipm.com if you have any further questions.

    Simply make a backup copy of C:\Inetpub\wwwroot\Citrix\XenApp\app_data\include\fullStyle.inc, open with Notepad, and replace the color: line of the body css tag (line 12) with a background tag containing your image, for example:
    background: url(“../media/IPMLogo.gif”);

  4. Phil

    I have an autolaunch application that does not open a presentation desktop. I need to have my company logo on the background of the application page. What file do I edit?

  5. Sam Jacobs

    Phil,

    Please email me directly (sjacobs@ipm.com) if you have any further questions, as I don’t get notified when comments are posted …. thanks.

    If you are looking to add your logo to the background of Web Interface, the post above tells you how to do that.
    If you’re looking to add your logo to an application, you need to modify the application itself. if you have the source code for the application, then you can do it yourself, otherwise you need to go back to the developer(s).

    Sam

Post a Comment

(required)