// This is the script to give summary on the main page.
Think IPM

Tuesday, May 22, 2012

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 (http://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:
clip_image002

Unless otherwise specified, all of the files we will be modifying are in the following directory:
..\XenApp\app_data\include

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):
clip_image004

Our logon screen now looks as follows:
clip_image006

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:
clip_image008

clip_image010

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

Our page now looks as follows:
clip_image018

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:
clip_image020

clip_image022

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:
clip_image024

This brings our screen to:
clip_image026

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:
clip_image027

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:

clip_image029

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

Our final result:
clip_image033

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.

blog comments powered by Disqus Blog Widget by LinkWithin