How To Customise The Citrix Web Interface 5.4

Hi all,

This is how I changed the Citrix Web Interface from this

To this

Files that you will be changing are located in:

C:\inetpub\wwwroot\Citrix\<SiteName>\app_data\
C:\inetpub\wwwroot\Citrix\<SiteName>\media\

The following codes are for the colour I used:

RGB: 149,177,199
HTML: #95B1C7

You can use jcpicker to get the colour codes if you don't already know them

1. To change the colour of the bottom half change the following section in FullStyle.inc

.horizonPage {
 background: #566169 url("../media/HorizonBgBottom.png") repeat-x left 325px;
 }

To

.horizonPage {
 background: #95B1C7;
}

2. To change the colour of the top half change the following section in FullStyle.inc

#horizonTop {
 width: 100%;
 height: 325px;
 background: #FDFDFD url("../media/HorizonBgTop.png") no-repeat top left;
 text-align: center;
 }

To

#horizonTop {
 width: 100%;
 height: 325px;
 background: #95B1C7;
 text-align: center;
 }

3. To remove the Citrix and HDX Logo from the bottom of the web interface screen add Display: None into the following section of FullStyle.inc

#footer img
{
    padding: 0 8px;
    vertical-align: middle;
    Display: None;
}
#footer
{
    text-align: center;
    padding-bottom: 10px;
    Display: None;
} 

4. To hide the message about on demand apps from the bottom of the screen add Display: None into the following section of FullStyle.inc

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

5. To hide or change the Citrix XenApp from the top of the web interface either add Display: None into the following section of FullStyle.inc or change the image CitrixXenApp.png.

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

6. To change the main pane or remove the devices, change the following section in FullStyle.inc

.horizonPage .mainPane {
 position: relative;
 top: -120px;
 background: url(<%=ClientInfoUtilities.getImageName(wiContext.getClientInfo(), "../media/Devices.png")%>) no-repeat center 30px;
 color: white;
 padding: 0;
 overflow: auto;
 } 

To

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

7. To change the colour of the login box change the following section in FullStyle.inc

td.glowBoxMid
{
 background: #73808C;
 padding: 7px 30px;
 }

To

td.glowBoxMid {
 background: #95B1C7;
 padding: 7px 30px;
 } 

8. To change the colour of the boarders of the login box you will need to edit the following images

• LoginPaneCenterLeftBorderGlow.png
• LoginPaneCenterRightBorderGlow.png
• LoginPaneFooterLeftBorderGlow.png
• LoginPaneFooterMidBorderGlow.png
• LoginPaneFooterRightBorderGlow.png
• LoginPaneTopLeftBorderGlow.png
• LoginPaneTopLeftGradient.png
• LoginPaneTopMidBorderGlow.png
• LoginPaneTopRightBorderGlow.png
• LoginPaneTopRightGradient.png

9. Change the site to redirect log off back to the login back by editing C:\inetpub\wwwroot\Citrix\<sitename>\auth\Loggedout.aspx and adding the following line immediately before the last line:

Response.Redirect("login.aspx?CTX_FromLoggedoutPage=1");

10. Customise the Web Site and change the background colour

11. Edit C:\inetpub\wwwroot\Citrix\<SiteName>\Loading.htm at the following sections:

Replace the following

#horizonTop {
  height: 325px;
  background: #FDFDFD url("media/HorizonBgTop.png") no-repeat top left;
}

With

#horizonTop {
    width: 100%;
    height: 325px;
    background: #95B1C7;
    text-align: center;
}

Replace the following

#mainPane {
  position: relative;
  top: -120px;
  background: url("media/Devices.png") no-repeat center 30px;
  color: white;
}

With

#mainPane {
  position: relative;
 top: -120px;
 background: #FFFFFF;
 color: white;
 padding: 0;
 overflow: auto;
}

Replace the following

body {
  font-family: Segoe UI, Tahoma,Verdana, Helvetica, Arial, sans-serif;
  font-size: 70%;
  text-align: center;
  background: #566169 url("media/HorizonBgBottom.png") repeat-x left 325px;
  margin: 0;
}

With

body {
  font-family: Segoe UI, Tahoma,Verdana, Helvetica, Arial, sans-serif;
  font-size: 70%;
  text-align: center;
  background: #95B1C7;
  margin: 0;
}

Replace the following

td.glowBoxMid {
  background: #73808C;
  padding: 7px 30px;
}

With

td.glowBoxMid {
  background: #95B1C7;
  padding: 7px 30px;
}

13. Do the same for C:\inetpub\wwwroot\Citrix\<siteName>\app_data\include\SilentdetectionStyle.inc