Introduction
Citrix StoreFront has an extensible UI customization engine to allow Citrix admins to tune their Receiver for Web pages to meet legal, user experience, and support objectives. I have worked with numerous Ferroque and Citrix Consulting customers requiring customization of their StoreFront deployments over the years, or observed customizations they have done themselves, and have maintained some documentation of various configurations aligned to customer requirements.
There are a number of good resources online from Citrix and the Citrix users community and this guide is intended to complement those resources.
As time permits, this guide may be updated periodically.
This guide is organized into a number of customization areas as follows:
- Log On Page
- Post-Log On Page (loading page)
- Logged In Page
- Log Off Page
- Adding Server Identifier Name
- Links and Tools
- Other Notes and Observations
File Location
Most of the customization work will be done in the following location of the given StoreFront Store being customized. Files added or modified in this location will propagate when propagation is invoked from the primary StoreFront Server.
The files in which will be edited to create a custom StoreFront are located in:
C:\inetpub\wwwroot\Citrix\<STORE NAME>Web\custom
Log On Page
Create a custom log on disclaimer
Config File: Script.js
To create a custom log on disclaimer, open scripts.JS and add the following code. Images and gifs can be added to the popup box. Images that are larger than 500px X 500px will not fit. 300px X 300px is recommended. <br/> can be used to create line breaks in between sentences.
CTXS.Extensions.beforeLogon = function (callback) { doneClickThrough = true; CTXS.ExtensionAPI.showMessage({ messageTitle: "<img src= custom/welcome.png>", messageText: "Unauthorized access is strictly prohibited. <br /> <a href='http://insertlinkhere.com/'>Click Here</a> to reset your password", okButtonText: "Accept", okAction: callback }); };
Style the custom logon disclaimer – Tile
Config File: style.css
.messageBoxTitle { color: #9BCD99; font-size: 22px; font-weight: normal; margin: 0 0 10px 0; text-align: center; }
Style the custom logon disclaimer – Message Box
Config File: style.css
.messageBoxText { margin: 0; font-size: 13px; color: #666; text-align: center; }
Style the button (Applies to all Citrix buttons)
Config File: style.css
.button.default { background-color: #FFC600; color: #FFFFFF; border: 1px solid white; }
Change the background image
Config File: style.css
.web-screen { background-image: url(redwallpaper.jpg); }
Change Logo
Config File: style.css
.is-hdpi .logon-logo-container{ background-image: url('cloud.png'); background-size: 214px 207px; } .logon-logo-container{ background-image: url('cloud.png'); background-size: 214px 207px; }
Add Buttons to Footer
Config File: Script.js
$('.customAuthFooter').html("Ferroque Systems Technical Support <br />Excluding Holidays<br />Main Office: 416-777-7777<br />Support Email: support@ferroquesystems.com<br/> <a href='http://insertlinkhere.com/'><img src= custom/tips.png></a> <img src= custom/online.png> <img src= custom/remote.png> ");
Style Logon Page Footer
Config File: style.css
.customAuthFooter { font-size:14px; font-weight: bold; color: #CE0000; text-align:left; padding-left: 50px; }
Add a Auth Header Over Logon Form
Config File: Script.js
$('.customAuthTop').html(" Welcome to Cloud Portal<br />");
Style Auth Header Over Logon Form
Config File: style.css
.customAuthTop { font-size:28px; color: #CE0000; font-family: "OpenSans-Regular","citrixsans","HelveticaNeue-Light"; text-align:center; padding-right: 260px; font-style: italic; font-weight: bold; margin-bottom: 11px; margin-top: 9px }
Post Log On Page
Change the Receiver Loading Logo
Config File: style.css
By default, prior to the application enumeration, you will see a page with the Citrix Receiver and a spinning loading bar. To change the receiver image, add the image to the custom folder and modify style.css.
.loading-logo { background-image: url(logo.png); width:226px; height:128px; }
Logged In Page (Resources)
Add a Help Button (Pop-Up Window)
Config File: Script.js
The help button created will appear in the top right corner of the page. Create an html page for the pop-up window to be directed to. Save the page to C:\inetpub\wwwroot\Citrix\”STORE NAME”\custom. Apply the following code.
CTXS.ExtensionAPI.addHelpButton( function popupCenter(url, title, w, h) { w = 500; h = 600; var left = (screen.width/2)-(w/2); var top = (screen.height/2)-(h/2); var newWindow = window.open("custom/help.html", "XL Storefront Help", 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left); return newWindow } );
Change the About Citrix Receiver Window
Config File: C:\inetpub\wwwroot\Citrix\<STORENAME>Web\receiver.html
<div class="popup aboutBox" id="aboutBoxPopup"> <a href="#" id="aboutBoxCloseBtn" class="aboutBoxCloseBtn"></a> <div class="citrixReceiverLogoAboutBox"></div> <p class="thirdPartyNoticeHeader _ctxstxt_ThirdPartyNotices"></p> <a id="thirdPartyNoticesBtn" href="/ReceiverThirdPartyNotices.htm" class="thirdPartyNoticeLink _ctxstxt_ThirdPartyNoticesWeb" target="_blank"></a> <a id="html5ThirdPartyNoticesBtn" href="/clients/HTML5Client/src/ReceiverThirdPartyNotices.html" class="thirdPartyNoticeLink _ctxstxt_ThirdPartyNoticesHtml5" target="_blank"></a><br/> <span class="citrixCopyright _ctxstxt_CitrixCopyright"></span><br /> <span class="_ctxstxt_AllRightsReserved"></span><br /> <a href="https://www.ferroquesystems.com" class="citrixLink" target="_blank">www.ferroquesystems.com</a>
Config File: Strings.en
(function ($) { $.localization.customStringBundle("en", { AppStore: "BANANA IT MANAGEMENT", Example2: "This is another example" }); })(jQuery); $('.customAuthTop').html("");
Add Border to Applications
Config File: style.css
.largeTiles .storeapp:last-of-type, .largeTiles .store-view .folder:last-of-type { width: 278.875px; margin-left: 50.875px; padding-right: 50.875px; padding-left: 0; margin-right: 0; border: 1px solid #CE0000; }
Add Spacer to Application Icon and Name
Config File: style.css
.storeapp-icon { border-radius: 8px; display: block; margin-left: 11px; margin-top: 10px; } .storeapp .storeapp-name { color: #CE0000; margin-left: 11px; margin-top: 10px; }
Add a Header on Page
Config File: Script.js
$('#customTop').html("Update: We are making changes to Storefront. Expected date of completion is May 25, 2018");
Style Header on Page
Config File: style.css
#customTop { text-align: center; background-color: #4AAFD6; color: #574f5b; font-size: 12px; padding-top: 10px; margin-bottom: -20px; font-weight: 700; }
Add a Footer on Page
Config File: Script.js
$('#customBottom').html("For Citrix issues, please contact the Ferroque Systems Service Desk at abcdefg@ferroquesystems.com");
Style Header on Page
Config File: style.css
#customBottom { background:#DE0303; text-align: center; color: #FFFFFF; font-weight: 600; font-size: 14px; }
Dynamic Subscription Icons in StoreFront
Config File: Strings.en.js
Remove the word details Edit strings.en.JS
(function ($) { $.localization.customStringBundle("en", { Details: "" }); })(jQuery);
Add custom icon files to the custom folder.
Config File: style.css
.storeapp-action-link{ background-image: url('img.png'); background-repeat: no-repeat; background-position: center; } .added .storeapp-action-link{ background-image: url('img2.png'); }
Log Off Page
Create a custom log off message
Config File: Strings.en.js
To create a custom log off message, open strings.en.JS and add the following code.
(function ($) { $.localization.customStringBundle("en", { YouHaveLoggedOff: "You have successfully logged off", LogOn: "Back to Sign In", LogOff: "Sign Out", About: "About Us", YouCannotUseAppsOrDesktops: "There are no apps available to you at this time.", }); })(jQuery);
Redirect log off to another page
Config File: Strings.en.js
To redirect log off to a different website, open strings.en.JS and add the following code. <br/> can be used to create line breaks in between sentences.
(function ($) { $.localization.customStringBundle("en", { LogOn: "Please Wait", YouHaveLoggedOff:'You have logged off successfully.<br>You are being redirected to ferroquesystems.com<script type="text/javascript">window.location.replace("https://www.ferroquesystems.com");</script>' }); })(jQuery);
Add Server Identifier Name
There are two methods for this that Citrix has documented but others are possible.
Method 1: ASPX method alone
Method 2: IIS variable method with ASPX
The advantage of 2 over 1 is the ability to create a placeholder name and not the “real” server name if necessary for security reasons. Method 1 has fewer config steps but will call the server name as it is, and does not require further per-StoreFront server configs.
In the below example, we are using Method 1 and have injected the server name into the header.
As the Citrix documentation is a little old (StoreFront 2.5) I am including a functional means of using it in modern StoreFront and its custom folder structures. Something Michael Shuster worked on with Feng (Citrix blog author and all-around cool guy) circa StoreFront 3.0. Note similar logic could be used to extend some of the useful code in that original 2014 blog into newer versions of StoreFront as well.
Step 1: Add a dynamic script to the server
Within Windows Explorer on the primary StoreFront server, navigate to the following path:
[Drive Letter]:\inetpub\wwwroot\Citrix\[Store Name]Web\custom
In this folder, create a file called GetServerName.aspx and include the following content:
<%@ Page Language="C#" %> <%@ Import Namespace="System" %> <%=Environment.MachineName %>
Step 2: Append script.js with the server identifier retrieval code
$(document).ready(function() { $.ajax({ url: 'custom/GetServerName.aspx', success: function(data) { var $markup = $('<div class="servername">' + '<span class=/> StoreFront Server: ' + data + '</div>'); $('#customTop').html($markup).ctxsLocalize(); } }); });
Step 3: Stylize the server identifier
Add the following to style.css
.servername { font-size: 12px; font-weight: 600; color: #FFFFFF; background:#DE0303; padding: 2px 2px; text-align: center; }
If you want to customize the header add this as well to style.css:
#customTop{ background:#DE0303; text-align: center; color: #FFFFFF; font-weight: 600; font-size: 14px; }
Step 4: Propagate your changes
Navigate to the Server Group tab and click Propagate Changes.
Links and Tools
Resize Images
http://resizeimage.net/ – All image types
https://ezgif.com/resize – Animated gifs
Colour Matching
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool – Find colour codes
https://html-color-codes.info/colors-from-image/ – Find colour of image
Other Notes/Observations
Embed an image where text is supposed to be.
<img src= custom/unismall.gif>
-
Reubin Huckle
Reubin is a seasoned consultant specializing in Microsoft, VMware, Public Cloud, and Citrix infrastructure platforms, with a focus on digital workspace technologies and interests in scripting and web coding.