In the Citrix world you often have to customise the default NetScaler Access Gateway Caxton style logon page. So to make life easier I have broken down the page and its components into the following sections (I’m sure other people will have already done this). I have purposefully used the same style as Andrew Morgan’s excellent article titled “Decrapifying the Citrix Web Interface (5.4)“.
Please note, this applies to the standard Citrix NetScaler theme, those using the Green Bubble theme for example will need different customisations.
1. The Header Logo
To remove the logo, find the css class .header_left in /images/caxtonstyle.css on lines 92-98 and add the highlighed line.
.header_left
{
width: 265px;
height: 62px;
background-image: url(/vpn/images/ctxHeader01.gif);
background-repeat: no-repeat;
display: none;
}
To change the logo to a custom one, modify the following file:
/images/ctxHeader01.gif)
Should you need to change the size of the image, don’t forget to change the width and height in the header_left style above.
2. The Header Banner
To remove the banner to the right of the logo, find the css class .header_middle in /images/caxtonstyle.css on lines 100-105 and add the highlighed line.
.header_middle
{
height: 62px;
background-image: url(/vpn/images/ctxHeader02.gif);
background-repeat: repeat-x;
display: none;
}
To change the background to a custom one, modify the following file:
/images/ctxHeader02.gif)
Should you have changed the logo height, don’t forget to change the height in the header_middle style above.
3. The Separating Banner
To remove the separating banner, find the css class .navbar in /images/caxtonstyle.css on lines 148-153 and add the highlighed line.
.navbar
{
height: 26px;
background-image: url(/vpn/images/NavBarLink.gif);
background-repeat: repeat-x;
display: none;
To change the seperating banner replace the image file below:
images/NavBarLink.gif
4. The Glow Box Top Left Corner
To change the glow box image replace the image files below:
images/LoginPaneTopLeftBorderGlow.png
images/LoginPaneTopLeftBorderGlow.gif
Please note the image file must remain the same size.
5. The Glow Box Top Edge
To change the glow box image replace the image files below:
images/LoginPaneTopMidBorderGlow.png
images/LoginPaneTopMidBorderGlow.gif
Please note the image file must remain the same size.
6. The Glow Box Top Right Corner
To change the glow box image replace the image files below:
images/LoginPaneTopRightBorderGlow.png
images/LoginPaneTopRightBorderGlow.gif
Please note the image file must remain the same size.
7. The Glow Box Left Edge
To change the glow box image replace the image files below:
images/LoginPaneCenterLeftBorderGlow.png
images/LoginPaneCenterLeftBorderGlow.gif
Please note the image file must remain the same size.
8. The Glow Box Right Edge
To change the glow box image replace the image files below:
images/LoginPaneCenterRightBorderGlow.png
images/LoginPaneCenterRightBorderGlow.gif
Please note the image file must remain the same size.
9. The Glow Box Bottom Left Corner
To change the glow box image replace the image files below:
images/LoginPaneBottomLeftBorderGlow.png
images/LoginPaneBottomLeftBorderGlow.gif
Please note the image file must remain the same size.
10. The Glow Box Bottom Edge
To change the glow box image replace the image files below:
images/LoginPaneFooterMidBorderGlow.png
images/LoginPaneFooterMidBorderGlow.gif
Please note the image file must remain the same size.
11. The Glow Box Bottom Right Corner
To change the glow box image replace the image files below:
images/LoginPaneBottomRightBorderGlow.png
images/LoginPaneBottomRightBorderGlow.gif
Please note the image file must remain the same size.
12. The Welcome Text
To change the Welcome text style, find the css class .CTX_ContentTitleHeader in /images/caxtonstyle.css on lines 213-220.
.CTX_ContentTitleHeader
{
font-family: Segoe UI, Tahoma,Verdana, Helvetica, Arial, sans-serif;
font-size: 12pt;
font-weight: bold;
margin: 0;
color: #ABABAB;
}
To change the text, find the string id “Welcome” in /resources/en.xml (or the language you require) on line 55 and edit the highlight text as required
Welcome
13. The ‘Please log on to continue’ Text
To change the Welcome text style, find the css class .CTX_ContentTitleHeader in /images/caxtonstyle.css on lines 19-24.
.CTXMSAM_LogonFont
{
font-size: 8pt;
font-family: Arial;
color: White;
}
To change the text, find the string id “Please log on to continue” in /resources/en.xml (or the language you require) line 56 and edit the highlight text as required
Please log on to continue.
14. The Secure Padlock Image
To change the image replace the image files below:
/images/LoginIcon.png
15. The ‘User name:’ Text
To change the text, find the string id “User_name” in /resources/en.xml (or the language you require) on line 57 and edit the highlight text as required.
User name:
16. The ‘Password:’ Text
To change the password text for both the primary and secondary authentication methods, find the string id “Password” and “Password2” in /resources/en.xml (or the language you require) on line 59 and 60 and edit the highlight text as required.
Password Password 2:
17. The Log On Button
To change the log on button colour and the rollover colour, edit or replace the following files:
/images/LoginButtonGlow.gif
/images/LoginButtonGlow.png
/images/LoginButtonGlow_Long.gif
/images/LoginButtonRolloverGlow.gif
/images/LoginButtonRolloverGlow.png
/images/LoginButtonRolloverGlow_Long.gif
Note, the replace images should be of the same size, alternatively edit the highlighted lines in /images/caxtonstyle.css.
.CTX_CaxtonButton
{
height: 28px;
width: 75px;
font-family: Arial, Verdana, Helvetica, Sans-Serif;
font-size: 8pt;
color: White;
cursor: default;
border: 0px;
background-image: url("/vpn/images/LoginButtonGlow.gif");
}
To change the log on text, find the string id “Log_on” in /resources/en.xml on line 62 and edit as required.
Log On
18. The Main Page Background
To change the background colour of the main page, find the css class body in /images/caxtonstyle.css on lines 222 to 235 and edit the highlighted line.
Please note, to change the background colour for the middle section of the page see point 21.
body
{
color: white;
/*
background: black url(/vpn/images/MarginGradient.gif) repeat-x top left;
*/
background: black repeat-x top left;
margin: 0px;
padding: 0px;
font-family: Segoe UI, Tahoma,Verdana, Helvetica, Arial, sans-serif;
font-size: 70%;
text-align: center;
height: 100%;
}
19. The Citrix Logo Footer
To remove the Citrix footer logo, find the css class .watermark in /images/caxtonstyle.css on lines 114 to 121 and add the highlighed line.
.watermark
{
width: 192px;
height: 62px;
background-position:bottom center;
background-image: url(/vpn/images/CitrixWatermark.gif);
background-repeat: no-repeat;
display: none;
}
To change the logo, replace the files below:
/images/CitrixWatermark.gif
20. The Logon Box Background
To change the logon box background, replace the files below:
/images/LoginPaneCenterMidGlow.gif
/images/LoginPaneCenterMidGlow.png
21. Mid-section Background Colour
The mid-section background colour and images are layered. To change the top layer background colour for the middle section, first find the css class .carbonBoxBottom in /images/caxtonstyle.css on lines 737 to 742 and change the following highlighed line to the colour you require or edit the image file below.
/images/LoginCarbonFiberBgFooter.gif
.carbonBoxBottom {
text-align:center;
padding-top: 10px;
padding-bottom: 14px;
background: black url(/vpn/images/LoginCarbonFiberBgFooter.gif) no-repeat bottom center;
}
Should you remove the image and background colour from the css above, find the css class .mainPane in /images/caxtonstyle.css on lines 237 to 247 and change the following highlighed line to the colour you require or edit the image file below.
/images/CenterBlueBkg.jpg
.mainPane
{
margin: 0;
padding: 0;
color: #FFFFFF;
background: #003C96 url(/vpn/images/CenterBlueBkg.jpg) repeat top left;
left:0;
right:0;
border-top: 2px #999999 solid;
border-bottom: 2px #999999 solid;
}
Finally, to make the changes stick, upload the updated contents would need to copied to each respective NetScaler (HA sync doesn’t copy these files) using WinSCP to the /netscaler/ns_gui/vpn (running config) and /var/vpn/vpn (start up config). This is explained in the following Citrix articles:
After all that, you should be able to create the customised look you require for your organisation. If I have missed anything please let me know and I will update the article.