Citrix Customization Cookbook

An article by Richard Hayton from Citrix Blogs

This blog is a ‘cookbook’ of customization queries and requests that I’ve had since the release of StoreFront 3.0, together with some worked examples. Hope it is useful!

For each question, I’ve provided some explaination together with some javascript and/or css examples. The javascript should always be added to the custom\script.js file – for example C:\inetpub\wwwroot\Citrix\PurpleWeb\custom; and the css should always be added to the style.css file in the same directory.

How do I add a static header to the login page in Receiver for Web?

Static text here means something like a welcome message, or a company name. For something that changes, such as a news message or server status, use the dynamic example below.

For simple text try the following javascript: This sets 4 lines of text, delete the lines you don’t want

$('.customAuthHeader').html("Example one - top of login screen");

$('.customAuthTop').html("Example two - above login box");

$('.customAuthBottom').html("Example three - below login box");

$('.customAuthFooter').html("Example four - bottom of login screen");

 

To make them more obvious, add the following styling to custom.css

.customAuthHeader,
.customAuthFooter,
.customAuthTop,
.customAuthBottom
{
 font-size:16px;
 color:yellow;
 text-align: center;
}

Here is the rather striking result:

If you want to use html, rather than plain text that is just fine too. For example replace the four lines in script.js with theses:

$(‘.customAuthHeader’).html(“<b>Example one</b> – top of login screen”);

$(‘.customAuthTop’).html(“<div style=’background:black’>Example two – above login box</div>”);

$(‘.customAuthBottom’).html(“<i>Example three – below login box</i>”);

$(‘.customAuthFooter’).html(“<img src=’logo.png’>Example four – bottom of login screen”);

(The fourth example needs an image called logo.png in the custom directory).

How do I add a dynamic header to the login page in Receiver for Web?

By dynamic, we mean some content that is loaded and displayed every time, rather than being cached. Web browsers like to cache things when they can, but native receivers always cache the UI, and always load the previously cached UI. That means if you use the above example for something like service status you will not get what you intended.

Instead we need to do an ajax call to dynamically load the content and insert it into the page. This is easier than it sounds.

Read More

Be Sociable, Share!
 

Tags: , , ,

Comments: 3

Leave a reply »

 
  • Brian

    I can’t seem to find custom.css anywhere in Store Front 3.0 Web. I was able to get the Java portion to work but it comes back in a really small print and is black in color.

    Thanks

    Brian

     
     
     
  • Brian

    I did try adding it to the style.css but that did not change anything.

     
     
     
  • Les Kelemen

    I had the same issue

     
     
     
  • Leave a Reply
     
    Your gravatar
    Your Name