Customizing Citrix StoreFront version 2.6 (receiver for web) is slightly different then version 2.5 in some aspects. In this post I’ll cover the following:
1. Change backgroud Picture (green bubble front page)
2. Pre-Login Message page
3. Front Page with Custom Logos
4. Display Client IP & Storefront server the user is connected to through Netscaler Gateway.
5. Disable user MultiClick
6. Edit page footer
Attention: All receiver for web customization should be done here “C:\inetpub\wwwroot\Citrix\YourStoreLabWeb\contrib” and the following files is involved:
custom.script.js, custom.style.css, custom.wrstrings.en.js, GetServerData.aspx (need to be created), blue_planet.jpg (background Picture), Peter_Logo.png and Peter-Logo-Small.png.
1. Change backgroud Picture (green front page) to a custom one:
1.1 Make sure the resolution of the new Picture (blue_planet.jpg) is 1920×1200 and copy it to the contrib folder.
1.2 Edit custom.style.css by adding the following lines
*/
body {
background: url(“blue_planet.jpg”);
}
2. Create a Pre-LoginMessage Page
2.1 To add a pre-login message, insert the following JavaScript code to custom.script.js:
// Display Pre-Logon Message
$(document).ready(function() {
CTXS.Application.preLoginHook = function () {
var _dialogTitle = ‘<h1><p class=”messagebox-title _ctxstxt_Disclaimer”></p></h1>’;
var _dialogBody = ‘<div class=”messagebox-body”>’ +
‘<p class=”_ctxstxt_DisclaimerStatement”></p></div>’;
var _dialogButton = ‘<div class=”messagebox-buttons”>’ +
‘<a href=”#” class=”button _ctxstxt_Continue”></a></div>’;
var dialog = _dialogTitle + _dialogBody + _dialogButton;
var $messagePane = CTXS.displayMessagePane(dialog).ctxsLocalize();
var $button = $messagePane.find(‘.button’);
$button.click(function () {
CTXS.Events.publish(CTXS.Events.preLogin.done);
return false;
}).ctxsHandleEscapeKeyInDialog().ctxsPlaceFocusOnFirstElement(
).ctxsBindFocusWithin();
};
});
2.2 Then add the following strings to custom.wrstrings.en.js and their translated versions to string bundle files for supported languages:
(function ($) {
$.localization.customStringBundle(‘en’, {
Disclaimer: ‘EnvokeIT Legal Notice’,
DisclaimerStatement: ‘These computer resources are provided for authorized users only.’
+ ‘ Your use of EnvokeIT computer resources constitutes your consent to EnvokeIT Policies and Directives.’
+ ‘ IF YOU ARE NOT AN AUTHORIZED USER, PLEASE EXIT IMMEDIATELY!’,
Continue: ‘Continue’
});
})(jQuery);
3. Edit front page with Custom Logo
3.1 The CSS selectors for the logo are #credentialupdate-logonimage and #logonbox-logoimage.
Locate those and edit them as follow:
#credentialupdate-logonimage, #logonbox-logoimage {
background-image: url(“Peter_Logo.png”);
height: 73px;
width: 215px;
}
#header-logo {
background-image: url(“Peter-Logo-Small.png”);
height: 23px;
margin: 8px 0 0 22px;
width: 68px;
}
4. Show Client IP & Storefront server the user is connected to through Netscaler Gateway.
4.1 Make sure you are loadbalancing your Storefront servers correctly by inserting the CLIENT-IP HTTP header “X-Forwarded-For” otherwise your Netscaler will return the SNIP (subnet IP) as the source IP for the user client IP module.
4.2 Create an empty file and call it “GetServerData.aspx”, and paste the following into it:
<%@ Page Language=”C#” %>
<script runat=”server” language=”C#”>
private string GetClientIP()
{
string ips = Request.ServerVariables[“HTTP_X_FORWARDED_FOR”];
if (!string.IsNullOrEmpty(ips))
{
return ips.Split(‘,’)[0];
}
return Request.ServerVariables[“REMOTE_ADDR”];
}
private string GetServerName()
{
// for security purposes, only return the last 2 chars
string server = Environment.MachineName;
return server.Substring(server.Length-2);
}
</script>
<%
// Storefront Server Data
string sData = Request[“serverData”]+””;
switch (sData)
{
case “clientIP”:
Response.Write(GetClientIP());
break;
case “serverName”:
Response.Write(GetServerName());
break;
case “clientIPandServerName”:
Response.Write(“Client IP: ” + GetClientIP() +
“ Server: ” + GetServerName());
break;
default:
break;
}
%>
4.3 Insert the following lines into custom.script.js
// Display Client IP and StoreFront server data
$.ajax({
url: ‘contrib/GetServerData.aspx?serverData=clientIPandServerName’,
success: function(data) {
var $markup = $(‘<div id=”server-info”>’ + data + ‘</div>’);
$markup.insertBefore(‘#header-userinfo’);
}
});
4.4 Add the following lines to custom.style.css
/* Storefront Server Data */
#server-info {
color: White;
font-size:12px;
float: left;
margin-right: 40px;
margin-top: 12px;
position: relative;
vertical-align: middle;
}
5. Disable user multiClick
5.1 Paste the following lines into custom.script.js
// Disable User MultiClick
$(document).ready(function() {
CTXS.Resources.multiClickTimeout = 10;
});
6. Editing page footer
6.1 Add the following lines to custom.script.js
// Logon page footer text
// $(document).ready(function() {
// var $footercontent = $(‘<div id=”authentication-footer”><div id=”authentication-copyrightfooter”> <p id=”authentication-copyrightFooterText”></p></div></div>’);
// $footercontent.insertAfter(‘#logonbelt-bottomshadow’);
// });// $(document).ready(function() {
// $(‘#authentication-copyrightfooter’)[0].innerHTML =
// ‘<p>©2015 Access restricted to authorized users only!</p>’;
// });
// application page footer text$(document).ready(function() {
$(‘#copyrightfooter’)[0].innerHTML = ‘<p>©2015 Name Of Your Company</p>’;
});
Would it be possible to get the Citrix Receiver that a client was using to access storefront? If so how would i do this?
Hi Richard,
I don’t understand what you are refering to? Could you be more specific?