There are quite articles out there which explain how to create disclaimers on previous versions on Netscaler, but I could not find any way of creating a pre-authentication disclaimer on the Netscaler 10.5 vpx appliance. With that in mind, I decided to create my own simple disclaimer. I've included the details on how this can be done below. I'm not a Web Developer, so you might find better ways to design the Disclaimer screen.
Netscaler Front End Changes
In Netscaler Global Configuration Settings, Change the Client theme to Custom. Then make your changes.
You will be able to rename the
netscaler image files (gifs etc) and the caxtonstyle.css file using WinSCP. Be sure to make a copy
of the .css sheets and files that you change. You will be able to upload your own images in place of those currently used on the Netscaler, but be sure to name them exactly as the Netscaler references them. A good a free way identify graphic files and styles on a page would be to use the built in Browser Development tools. You can use the element selector to identify the specific webpage components and their CSS/HTML references. This information can then be used to modify the corresponding Netscaler .CSS or Image files. The following webpage describes where some of these changes can be made:
http://www.icenlemon.co.uk/blog/?p=232
Storefront Front End Changes
Disclaimer
Create a CSS file called "Disclaimer.css" and store this in “/var/netscaler/gui/vpn”.
Rename the Index.html file in “/var/netscaler/gui/vpn” to Indexhome.html
Create an Index.html file and save it to “/var/netscaler/gui/vpn”
Copy the following into the "Disclaimer.css" file (You can change the colours later):
body {
background-image: url("/vpn/media/bg_bubbles.jpg");
background-color:#14235C;
color:Black;
}
.container{
}
.DText{
Position:absolute;
font-family:Verdana;
Font-Size:12px;
font-weight:bold;
color:Black;
top:50%;
left:50%;
em:50px;
transform: translate(-50%, -50%);
background-color:#FFFFFF;
padding:20px;
margin:20px;
line-height:200%;
}
.DButton {
margin-left:45%;
top: 30%;
}
#navcontainer { }
#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
#navcontainer a
{
display: block;
background-color: #14235C;
border-bottom: 1px solid #14235C;
}
#navcontainer a:link, #navlist a:visited
{
color: #FFF;
text-decoration: none;
}
#navcontainer a:hover
{
background-color: #6B79AD;
color: #fff;
}
The next thing would be to copy the following Disclaimer information into the Index.html page that you created. Replace the lorem ipsum text with your own disclaimer text:
<html>
<head>
<link rel="stylesheet" type="text/css" href="disclaimer.css">
</head>
<body>
<DIV Class="Container">
<DIV Class="DText">
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae justo dictum, aliquam nulla nec, maximus lacus. Etiam pharetra, dui sed viverra consequat, felis sem faucibus nibh, eget vestibulum turpis augue eu risus. Donec consectetur vulputate accumsan. Cras vel est dignissim, dignissim orci non, volutpat est. Sed mattis lorem ac urna luctus consequat. Nunc volutpat neque vitae euismod finibus. Mauris dictum at lacus non pulvinar. Nullam tempor ex vel ipsum tincidunt, sit amet fermentum eros condimentum. Donec enim risus, tempor sed enim eu, ornare cursus orci. Nam ipsum nunc, mollis non turpis sit amet, consectetur convallis tortor.
</P>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="indexhome.html" id="current">I Agree</a></li>
</ul>
</div>
</DIV>
</DIV>
</body>
</html>
The Netscaler loads “Index.html”, which will use the external cascading style sheet called “Disclaimer.css”
These two files are found in the directory called “/var/netscaler/gui/vpn”. These files are responsible for the initial Disclaimer page that appears when a user browses https:\\yournetscaler.com
The “I agree” button on the Disclaimer page will redirect the user to the Netscaler logon page when it is pressed. The netscaler Logon file is called “indexhome.html” and is linked to numerous style sheets, so you would need to use the IE/Chrome to identify and change element on that page (As described in in the sections above)
I have tried to add a disclaimer text translation, but haven't got this working yet. So you will be able to modify and improve on this.
Install WinSCP on your management device. WinsSCP will allow you to access and modify the Netscaler CSS and
image files. The main CSS sheet for the Netscaler logon page is called
“Caxtonstyle.css”. This file can be found in the following Netscaler
directory: /netscaler/ns_gui/vpn/images/caxtonstyle.css.
http://www.icenlemon.co.uk/blog/?p=232
Storefront Front End Changes
The Storefront website can be configured by modifying the “C:\inetpub\wwwroot\Citrix\StoreWeb\contrib\custom.style.css” file. This
file will initially be blank, apart from a few basic CSS settings. You
can use IE built in Development tools to identify elements on the webpage and
their corresponding CSS element name. You will then be able to add the name
into this custom css file, so that your changes overwrite the default
settings. The image files are stored in “C:\inetpub\wwwroot\Citrix\StoreWeb\uiareas\Store\media”.
Create a CSS file called "Disclaimer.css" and store this in “/var/netscaler/gui/vpn”.
Rename the Index.html file in “/var/netscaler/gui/vpn” to Indexhome.html
Create an Index.html file and save it to “/var/netscaler/gui/vpn”
Copy the following into the "Disclaimer.css" file (You can change the colours later):
body {
background-image: url("/vpn/media/bg_bubbles.jpg");
background-color:#14235C;
color:Black;
}
.container{
}
.DText{
Position:absolute;
font-family:Verdana;
Font-Size:12px;
font-weight:bold;
color:Black;
top:50%;
left:50%;
em:50px;
transform: translate(-50%, -50%);
background-color:#FFFFFF;
padding:20px;
margin:20px;
line-height:200%;
}
.DButton {
margin-left:45%;
top: 30%;
}
#navcontainer { }
#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
#navcontainer a
{
display: block;
background-color: #14235C;
border-bottom: 1px solid #14235C;
}
#navcontainer a:link, #navlist a:visited
{
color: #FFF;
text-decoration: none;
}
#navcontainer a:hover
{
background-color: #6B79AD;
color: #fff;
}
The next thing would be to copy the following Disclaimer information into the Index.html page that you created. Replace the lorem ipsum text with your own disclaimer text:
<html>
<head>
<link rel="stylesheet" type="text/css" href="disclaimer.css">
</head>
<body>
<DIV Class="Container">
<DIV Class="DText">
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae justo dictum, aliquam nulla nec, maximus lacus. Etiam pharetra, dui sed viverra consequat, felis sem faucibus nibh, eget vestibulum turpis augue eu risus. Donec consectetur vulputate accumsan. Cras vel est dignissim, dignissim orci non, volutpat est. Sed mattis lorem ac urna luctus consequat. Nunc volutpat neque vitae euismod finibus. Mauris dictum at lacus non pulvinar. Nullam tempor ex vel ipsum tincidunt, sit amet fermentum eros condimentum. Donec enim risus, tempor sed enim eu, ornare cursus orci. Nam ipsum nunc, mollis non turpis sit amet, consectetur convallis tortor.
</P>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="indexhome.html" id="current">I Agree</a></li>
</ul>
</div>
</DIV>
</DIV>
</body>
</html>
The Netscaler loads “Index.html”, which will use the external cascading style sheet called “Disclaimer.css”
These two files are found in the directory called “/var/netscaler/gui/vpn”. These files are responsible for the initial Disclaimer page that appears when a user browses https:\\yournetscaler.com
The “I agree” button on the Disclaimer page will redirect the user to the Netscaler logon page when it is pressed. The netscaler Logon file is called “indexhome.html” and is linked to numerous style sheets, so you would need to use the IE/Chrome to identify and change element on that page (As described in in the sections above)
You will be able to use the Storefront custom CSS file to
design and match the storefront logon (Green Bubbles) with the Netscaler
logon.