Citrix StoreFront

Customizing the Receiver

for Web User Interface

© 2012 Citrix. All rights reserved.

Customizing the Receiver for Web User Interface

Introduction
Receiver for Web provides a simple mechanism for customizing the user interface. Each Receiver
for Web site includes a \contrib folder containing files in which UI customizations can be placed.
The contents of this folder are preserved when StoreFront is upgraded to a newer version.
However, page elements may be added, removed, or renamed in future releases so there is no
guarantee that specific customizations will continue to function correctly following an upgrade,
especially when the UI changes significantly between releases.

You can customize strings, the cascading style sheet (CSS), and the JavaScript files. You can also
add a custom pre-logon or post-logon screen, and add language packs. Receiver for Web style
sheets and JavaScript files are concatenated and minified, so you must use Web development tools
to discover CSS class and id names.

String Customization
Customized string bundle files for all supported languages are included in the \contrib folder for a
Receiver for Web site. The customized string bundle files are simple JavaScript files that define a
set of name–value pairs. Strings defined in these files override the built-in strings for the particular
language.

The following example illustrates how to change the text of the Log Off link for English locales.

1. On the StoreFront server, use a text editor to open the ctxs.wrstrings.js file for the Receiver
for Web site, which is typically located in the
C:\inetpub\wwwroot\Citrix\storenameWeb\scripts\languagecode\ directory, where storename
is the name specified for the store when it was created and languagecode is the two-letter
ISO 639-1 language identifier.
2. Search the file for the string 'Log Off' (including the quotes) to locate the key name that is
associated with this value, which in this case is LogOff.

2
 Citrix StoreFront

3. Use a text editor to open the custom.wrstrings.en.js file for the site, which is typically located
in the C:\inetpub\wwwroot\Citrix\storenameWeb\contrib\ directory, where storename is the
name specified for the store when it was created. Modify the file as shown below.
(function ($) {
$.localization.customStringBundle('en', {
Example1: 'This is an example',
Example2: 'This is another example',
LogOff: 'Sign Out'
});
})(jQuery);
Ensure that you add a comma at the end of the preceding line for the Example2 key.
4. Log on to the Receiver for Web site.
The Log Off link text changes to Sign Out.
You can use this procedure to change any of the existing strings found in the user interface.
However, some text that appears on the UI, such as the Citrix Receiver logo text, is delivered as
part of an image. In such cases, you must customize the CSS to replace the image.

You can alter strings for other languages by adding the customized text to the appropriate language
variant of the custom string file; for example, custom.wrstrings.fr.js for French.

CSS Customization
The CSS file custom.style.css is included in the \contrib folder and referenced by the HTML file for
the Receiver for Web user interface. This custom CSS file is referenced after the site’s main CSS
files so that CSS specifiers defined in the custom file override similar specifiers defined elsewhere.

You can use CSS customizations to change many aspects of the site appearance, including fonts,
colors, and images. It is assumed that you are familiar with CSS syntax and have access to a tool
that enables you to view CSS class names for Web pages, such as the developer tools available
with Internet Explorer and Google Chrome, or Firebug for Mozilla Firefox.

The following example illustrates how to customize the Receiver for Web background image.

1. View the Receiver for Web site using a page inspector.

The CSS background-image specifier for the body tag sets the background image to
url("../media/bg_bubbles.jpg").
2. On the StoreFront server, use a text editor to open the custom.style.css file for the site,
which is typically located in the C:\inetpub\wwwroot\Citrix\storenameWeb\contrib\ directory,
where storename is the name specified for the store when it was created.

3
Customizing the Receiver for Web User Interface

3. Add a CSS override as shown below.

body {
background-image: url("../media/launchready.png");
}
4. Reload the site in your Web browser.
The background image changes.
In most browsers, the 6 x 10 pixel image launchready.png used in this example is stretched to fit
the browser window as per the background-size: cover specifier. However, Internet Explorer 8 does
not support this specifier and so the image is tiled across the page. To support Internet Explorer 8
users, use either a larger image or an image that is conducive to tiling when customizing the
Receiver for Web site background image.

The following example illustrates how to customize the Citrix Receiver logo image displayed on the
logon screen.

1. View the Receiver for Web site using a page inspector.

The logo is delivered through a <div> element with an id attribute of logonbox-logoimage. A
CSS specifier targets this element and sets the logo to url("../media/logo_notagline.png").
2. On the StoreFront server, use a text editor to open the custom.style.css file for the site,
which is typically located in the C:\inetpub\wwwroot\Citrix\storenameWeb\contrib\ directory,
where storename is the name specified for the store when it was created.
3. Append the following specifier to override the logo image:
#logonbox-logoimage {
background-image: url("../uiareas/Store/media/
UserMenuSelect.png");
width: 88px;
height: 24px;
top: 108px;
}
4. Reload the site in your Web browser.
A customized blue logo image strip appears. You can use this method to add the logo for
your own company.

4
 Citrix StoreFront

You can also change the appearance of the text on the Receiver for Web desktop and application
views. For example, append the following CSS specifiers to the custom.style.css file to configure
Tahoma as the default font and update the font colors for the resource names and items in the
applications menu.

.myapps-name {
color: firebrick;
}

div#withscript {
font-family: Tahoma;
}

#resources-appsmenu .resource-name {
color: wheat;
}

JavaScript Customization
The JavaScript file custom.script.js is included in the \contrib folder and referenced by the HTML file
for the Receiver for Web user interface. This custom JavaScript file is referenced after the site’s
main JavaScript files so that any functions defined in the custom file override identically named
functions defined elsewhere.

You can use the custom JavaScript file to inject additional content into the user interface or load
other scripts using Ajax.

The following example illustrates how to add content to the Receiver for Web footer area.

1. On the StoreFront server, use a text editor to open the custom.script.js file for the Receiver
for Web site, which is typically located in the
C:\inetpub\wwwroot\Citrix\storenameWeb\contrib\ directory, where storename is the name
specified for the store when it was created.
2. Append the following at the end of the file.
$(document).ready(function () {
var $markup = $('<div id="helpdesk-area">
<a href="mailto:[email protected]">Contact the Help
Desk</a></div>');
$('#resources-footer').append($markup);
});

5
Customizing the Receiver for Web User Interface

3. Use a Web development tool to open the custom.style.css file in the \contrib folder for the
site. Add the following specifiers.
#resources-footer { height: 84px; }
#helpdesk-area { margin-top: 8px; }
#helpdesk-area a { color: white; }
#helpdesk-area a:hover { text-decoration: underline; }
4. Reload the site in your Web browser.
A Help Desk link appears in the footer area.

Adding Custom Pre-Logon or Post-Logon Screens

The custom.script.js file contains comments describing how to create a custom pre-logon screen.
The code performs the following tasks.

1. A function is assigned to CTXS.Application.preLoginHook. This function is invoked by the

Receiver for Web code before the user logs in, prior to fetching the logon form.
2. The hook function dynamically appends some sample markup to a <div> element with an id
attribute of prelogin-pane. This <div> element occupies the entire browser area and acts as
a parent element under which the custom screen is built.
3. The prelogin-pane <div> is displayed by calling the custom jQuery plugin ctxsDisplayPane().
4. A click handler is registered on the Continue link, which publishes the event
CTXS.Events.preLogin.done to signal that Receiver for Web should switch to the next
screen, either the logon screen or the Citrix Receiver download screen.
To style the custom markup appropriately, add rules to custom.style.css; the comments in
custom.script.js provide some sample CSS markup for the example pre-logon screen.

You can also display a custom screen after users log on, just before their resources appear. To do
this, modify the pre-logon example to specify the function CTXS.Application.postLoginHook instead
of CTXS.Application.preLoginHook and to use a <div> id attribute of postlogin-pane rather than
prelogin-pane.

Pre-logon and post-logon screens exhibit the following behavior.

 Pre-logon and post-logon screens are displayed every time users log on.
 If users refresh their browser windows while viewing a custom screen, the display
automatically switches to the next screen in the logon sequence.
 As with other screens, users are logged off if their Web sessions time out while they are
viewing the post-logon screen.

6
 Citrix StoreFront

Adding Language Support

To add support for a new language in Receiver for Web, you must add a Receiver for Web
language pack and then add resource files to the StoreFront authentication service.

Adding a Receiver for Web Language Pack

New language packs are comprised of a culture definition script file and a string bundle script file for
each language. The format of the culture definition script file is as follows.

(function ($) {
$.globalization.availableCulture("languagecode", {
name: "languagecode",
englishName: "enlanguagename",
nativeName: "nativelanguagename",
stringBundle: "bundlelocation"
});
})(jQuery);
Where languagecode is the two-letter ISO 639-1 language identifier, enlanguagename is the name
of the language in English, nativelanguagename is the name of the language in that language, and
bundlelocation is the location of the string bundle script file.

The string bundle script file defines a set of name–value pairs as follows.

(function ($) {
$.localization.addStringBundle('en', {
AcceptTermsMessage: 'Please accept the terms of the licensing
agreement before installing Citrix Receiver.',
ActivateReceiver: 'Activate Receiver',
AddApp: 'Add App',
...
...
});
})(jQuery);
The custom.script.js file contains comments describing how to create and load the culture definition
and string bundle script files, using the addition of support for Polish as an example.

7
Customizing the Receiver for Web User Interface

To add resource files to the StoreFront authentication service

The user interface for the logon form is provided by the StoreFront authentication service. To
localize these strings, you must create three additional resource files.

The following example illustrates how to add resource files for Polish (language code pl).

1. On the StoreFront server, locate the resource (.resx) files for the authentication service,
which are typically located in the
C:\inetpub\wwwroot\Citrix\Authentication\App_Data\resources\ directory.
2. Make copies of the files ExplicitAuth.resx, ExplicitCore.resx, and
ExplicitFormsCommon.resx. Rename the copies ExplicitAuth.pl.resx,
ExplicitCore.pl.resx, and ExplicitFormsCommon.pl.resx, respectively.
3. Using a text editor, open the new files and, for each <data> element, translate the string in
the corresponding <value> element. Save the files using UTF-8 encoding.
4. Restart Microsoft Internet Information Services (IIS) on the StoreFront server.
When users access the Receiver for Web site from a Polish locale, all the UI text appears in
Polish.
If any translated strings are longer in a new language than they are in the built-in languages they
may not be correctly positioned in the user interface. Because the language code appears as a
class name on the <body> element, you can create CSS rules to adjust elements as necessary. For
example, append the following CSS specifier to the custom.style.css file to make the logon box
slightly larger to accommodate longer strings for Polish users.

.pl #logonbox-logonform {
width: 320px;
}
Tip: Receiver for Web uses the preferred language for your Web browser to determine the display
locale. To test multiple languages on a Receiver for Web site using a single machine, modify the
preferred language setting for your browser and reload the site.