Customizing Receiver for Web -
Note :. An updated version of this blog for StoreFront 2.0 is available here
Citrix Receiver for Web provides integrated support for customizing the user interface. In this blog post, I will explain and demonstrate how to implement the custom interface using the integrated support. If you take this approach, your customization will have a better chance of surviving the release upgrade. All the examples in this article are based on Cloud Gateway Express 1.1.
After a receptor for the Web site is created, there is a folder named contrib under the site (default location is C: inetpub wwwroot sites Citrix StoreWeb contrib ). This contains the integrated hooks for customization interface. It is recommended that all the customization and the media code are stored in this folder because the contents of this file will be kept when upgrading to future releases. Please note, however, that there is no guarantee that personalization will still work out of the box through the release upgrade, especially when the user interface changes significantly.
CSS Customization
custom CSS can be used to easily change many aspects of the appearance of the site, including fonts, colors and images. A CSS file named custom.style.css is included in the contrib folder . This CSS file is referenced after the main CSS files of the site and therefore the CSS style definitions specified in this file override any similar definitions specified elsewhere. You can use Web development tools such as Firebug (for Firefox) or the development tools provided by Internet Explorer and Google Chrome to identify the CSS selectors (element types, classes or ID) you want to customize. Examples
Example 1 :. Rebranding the logon screen
First we will try to change the background image. As shown in the screenshot below, using Firebug, we recognize that the CSS selector for the background image is body .
We copy the new background image abstract wave-on-a-blue-background.jpg to contrib folder . Add the following CSS definition custom.style.css
body {
background-image: url ( "abstract-wave-on-a-blue-background jpg ");
}
Reload the page and the new background image took effect as
then we'll change the logo. We identify the CSS selector for the logo is # logonbox-logoimage.
Copy the new logo image logo_world.png to contrib folder. Add the following CSS definition custom.style.css
# logonbox-logoimage {
background-image: url ( "logo_world.png") ;
}
Reload the page and the new logo is displayed:
Finally, we will change the font color and weight for labels logon form. Using Firebug, we recognize that the CSS selector for the login form labels is # label logonbox-LogonForm .
Add the following CSS definition custom.style.css
# logonbox-label LogonForm {
color: yellow;
font-weight: bold;
}
Reload the page and you can see the labels for the login form become bold yellow
Example 2 :. Customizing the home screen
First, we will replace the logo in the header area. We identify the CSS selector for the logo # header-logo .
Copy the new image header logo logo_header.png to contrib folder. Add the CSS defined in custom.style.css
# header-logo {
background-image: url ( "logo_header.png");
}
Reload the page and logo in the header area is replaced:
then, we'll change the font color for application names to make it more readable. We recognize that the CSS selector for the strong to the application names is .myapps-name .
Just add the following CSS definition personalized .style.css
. myapps-name
{
color: yellow;
}
as well, by adding the following CSS definitions custom.style.css changes the font color for the username and log Off link in the header area:
# # resources header header-userinfo {
color: lightgreen;
}
# # resources header header-logofflink {
color: lightgreen;
}
is the resulting home screen:
JavaScript customization
JavaScript customization can be used to inject extra content in the user interface and load other scripts, CSS and HTML fragments via Ajax. A JavaScript file named custom.script.js is included in the contrib and referenced by the HTML file for the receiver to the Web user interface. This custom JavaScript file is referenced after major site-wide JavaScript files so that all functions defined in the custom file function replacement with the same names defined elsewhere
Example 3 :. Adding a hyperlink to the footer area
Using Firebug, we recognize that the ID of the footer area is #-resources footer . We add the following JavaScript code custom.script.js
$ (document) .ready (function () {
$ var = $ markup ( '');
$ ( '#-resources footer') append ($ markup) ;.
});
This adds a mailto link to the footer area:
We need to apply some style to make it pretty. Just add the following CSS definition custom.style.css
#-resources footer div {
padding-top: 58px;
}
#-resources footer a {
color: lightgreen;
}
#-resources footer a: hover {
color: silver;
text-decoration: underline;
}
These Prettify the hyperlink:
Example 4: Loading additional files IU
in this example, we load the HTML and CSS more to achieve the same effect as example 3. If you applied customization in example 3 in your site, you must undo the changes before following the instructions below -Dessous.
First, create a new file named footer.htm in the contrib folder with the following HTML fragment:
Then create another file called footer.css in the contrib folder with the following CSS definitions:
#-resources footer div {
padding-top: 58px;
}
#-resources footer a {
color: lightgreen;
}
#-resources footer a: hover {
color: silver;
text-decoration: underline;
}
Finally, add the following JavaScript code custom.script.js
$ ( document) .ready (function () {
$ .ajax ({
url: "contrib / footer.css '
success :. function (data) {
$ (' ') appendTo (' head ') .html (data)
}
});
$ (' #-resources footer ') expense (. 'contrib / footer.htm');
}) ;.
ajax $ call load the CSS footer.css and $ ( '#-resources footer'). load call loads the HTML fragment defined in footer.htm to footer div . The resulting screen is exactly the same as in Example 3.
customization Chain
custom string bundle files for all supported languages are included in the contrib folder. They are simple JavaScript files that define a set of name-value pairs. Strings defined in these files replace the high-ropes for the given language
Example 5 :. texts customization in the Header area
We will change the link text "Log Off" to "Sign Out" and "Welcome" to "Signed as".
First, we need to locate the string IDs. Open the string file in English (default location is C: inetpub wwwroot Citrix StoreWeb scripts en ctxs.wrstrings.js ). In a text editor
then search the file for the strings "Log Off" and "Welcome" and note the string ID in this case LogOff and welcome.
Change the English custom file chains custom.wrstrings.en.js in the contrib folder and add channels updates as
(function ($) {
$ .localization.customStringBundle ( 'en', {
Welcome to "Logged in as {0} ',
LogOff' Logout '
Example1: "This is an example'
Example2: 'This is another example
});
}) (jQuery);
Reload the page and you can see the new texts on the home screen:
A similar process can be followed to modify existing channels found in the user interface. Channels can be changed to other languages by providing customization in the appropriate custom string file, for example, custom.wrstrings.fr.js for the French.
Limitations
As mentioned at the beginning of this article, all in the folder contrib will be preserved through the release upgrade. However, the page elements can be added, deleted or renamed in future versions of Receiver for Web. As a result, customizations may not work after upgrading to a future version.
