The Magic of CSS–Customizing Citrix Web Interface

Another great Tutorial post from Sam Jacobs!  Class is in session…

A poster in the Web Interface forum (https://forums.citrix.com/thread.jspa?messageID=1627343#1627343) asked how to make the following modifications to the Web Interface logon page:

• Change the page background color,
• Expand the logon window and change its background color,
• Enlarge and center the Logon Button,
• Remove the page footer and extra whitespace at the bottom of the page, and
• Adding scrolling horizontal text (a “marquee”) above the logon box.

As always, we start with a default WI site:

Unless otherwise specified, all of the files we will be modifying are in the following directory:
..XenAppapp_datainclude

The first modification is to change the page background color.
Open fullStyle.inc with your favorite text editor, and make the following changes (click on each image to enlarge):

Our logon screen now looks as follows:

Let’s move on to the next two modifications – expanding the logon window, changing its background color, and enlarging and centering the logon button. We’ll need to modify two CSS files.

Open loginStyle.inc, and make the following changes:

Re-open fullStyle.inc, and make the following changes:

Our page now looks as follows:

Now, let’s remove the page footer and extra whitespace at the bottom of the page. While we’re at it, let’s change the Citrix logo to our own. We’ll need to first make some more modifications to fullStyle.inC:\

Then, to change the logo, you’ll need to copy your logo to the /media directory, and we’ll need to make a modification to layout.ascx:

This brings our screen to:

If you are changing the background color, make sure that you use a transparent .gif (or .png) … otherwise, you will end up with something that looks like this:

Our final modification is to add a scrolling text area (marquee) above the logon box with, for example, system status information. First, add a new CSS tag to loginStyle.inC:\

We will also need a change to layout.ascx to add the marquee:

Our final result:

Thanks Sam!

DISCLAIMER: Make sure that you make backup copies of any modified source files. Do NOT perform these modifications on a production site currently in use. These modifications are for Web Interface version 5.4 only.