There have been many requests asking how stigmatize Citrix Receiver for Web. Just look Providers Citrix Service LinkedIn group to know that this is a subject that has generated much interest.
Jeroen Tielen has already done much of the heavy lifting when it comes to the Citrix Receiver branding for the web - see his blog post on how to customize branding: http: // www.jeroentielen.nl/customizing-the-cloud-gateway-logon-screen/
I provide a step step by step guide on how to do it, and also how to extend it. CSPs have also said they want to provide a list of URL links, for example links to helpdesk / support sites, feedback mechanisms, etc ...
In other words, let's start with this:
The "Front" website
And end up with something like this:
the "After" website
branding of the Connect
Let's start by creating a new site Storefront for a white label reseller. It also isolates all our changes just this new site, and we can always return to the Citrix brand image by default.
1. Run the Server Role Manager Citrix XenApp, and click the Edit link configuration for the Storefront receiver. This will start the MMC snap-in for Citrix Receiver Storefront.
2. In the left tree view, click the receiver for the Web, then to the far right pane, click Create Website.
3. Change the way web site for everything you want the URL path to your dealer. In the screen above screen, you can see I chose "/Citrix/TenantACME".
Now that we have created a new website, let's take a look. If you use a default environment, you will see that it has created a new folder in C: inetpub wwwroot Citrix TenantACME, and that in this case there is a css folder, media folder, a scripts folder and a folder uiareas. These seem promising!
start with the background. If you have already read the blog Jeroen you know that the file that we want to change is in C: inetpub wwwroot Citrix TenantACME media bg_bubbles.jpg. Simply replace this file with another JPG image with the same name. Here's an example:
Not bad, but the white text is a bit hard to read. We'll start with the username / password and change it to black
Open C :. Inetpub wwwroot Citrix TenantACME css Default.htm.style.min.css in a text editor such as Notepad and search for "logonbox-label LogonForm #" (it will be near the end). You will find a section of text that looks something like this:
# label logonbox-LogonForm {color: white display: table-cell; font-size: 12px; height: 20px; vertical-align: bottom;}
All you have to do is to change the part of the highlighted text from "white" to "black"
label logonbox-LogonForm # {color: black display: table-cell; font-size: 12px; height: 20px; vertical-align: bottom;}
Although you in this file, you will also need to change other things too. For example all messages will be blank. So the search ".ctxsui-messagebox {height: 142px" (up) and change the color to black and
.ctxsui-messagebox {height: 142px; min-width: 388px; max-height: 0px; width: 510px; display: table; color: black ;}
The Citrix Receiver logo is also very difficult to read because he is white. It is an image, so all we have to do is replace C: inetpub wwwroot Citrix TenantACME uiareas Authentication media logo_notagline.png with a different image, as we did for the background image. We will also change the image "Screen_SemiTranslucent.png" (the light bar passes through the middle) and the image "VerticalGreenBarOnly.png" (the vertical bar on the left) and, since our background is more than one theme blue.
Our website now looks like this:
it looks much nicer! You can see that we stigmatized to the dealer with the "Powered by ACME" tagline in the logo image. Until now, if we have not really anything new presented. All we have done is tweak a few pictures and some minor CSS. Now let's tackle the fun stuff: adding links
Added links on the login page
Before you jump in, let's take a look on how the page is structured !. If you use Internet Explorer or Chrome press F12 to follow along. The web page is structured as a series of nested tags. These divide the page into logical sections. It is laid out like this:
You can see the great Divs, and one that is of interest to us is "authentication". This is the only division that is visible first (the others are set to "display: none"). How this page works is that these Divs toggles on or off -., For example, once you connect the "authentication" Div become hidden and "resources" will become visible Div
you can see that the "authentication" Div further consists of other divs. What we will do is insert another division in the "authentication" Div. So our code will be visible only when the authentication screen is displayed, hidden and otherwise
Create a new text file called "HelpLinks.js" in your C :. Inetpub wwwroot Citrix TenantACME folder scripts. We will add our javascript code into its own file so that we can keep isolated from the main code. In this file, copy and paste the following items:
var SetLinks = function () {var content = ' '; newDiv var = $ (content); newDiv.insertAfter ( '# logonbelt-bottomshadow'); }; What this does is add the HTML code (the part that is highlighted) right after the "# logonbelt-bottomshadow" in our Div. It does not need to be exactly, but the important thing is that our new Div is added somewhere within the "authentication" Div.
But so far, this code is not linked to anything. Open C: inetpub wwwroot Citrix TenantACME Default.htm in a text editor such as Notepad and add a reference to our new Javascript file. Find this line in the html page (up):
Now add another line before:
The references our new javascript, but does not invoke. To do this, we change the C: inetpub wwwroot Citrix TenantACME scripts Default.htm.script.min.js file in Notepad. Find Next:
$ (document) .ready (function () {CtxsApplication.preinit ()
Now change this so it looks like this:
$ (document) .ready (function () { SetLinks () CtxsApplication.preinit ()
Let's take a glance eye now.
Nice! Let's see what has changed in our page structure.
notice that our new division was added just after the "logonbelt-bottomshadow" Div.
the rest is just a matter of polish. Some things you could do.
- our helpdesk and feedback links look a little bare. You can edit the HTML code in HelpLinks.js to decorate these links with some images (as in the "After" image at the top of this article)
- After user connects. and sees the applications you notice that white text on a light background can be a little hard to read. To update the search for the text color for "# resources # header-header userinfo {float: left;", "# # resources header header-logofflink {float: left;" and ".myapps-name {padding-top: 6px ;. "Default.htm.style.min.css in the file and update each of them with a darker color
- shading around each of the applications also may need a little tweaking because of background light. Update the image at C :. Inetpub wwwroot Citrix TenantACME uiareas Store media MainAppIcon_normal.png if you want to change
You may have noticed that, generally, you will have an easier time if you stay with a dark background. Also, depending on your setup and release, some of the file names may be slightly different. For example, the Citrix logo image could be called "logo_tagline.png" instead of "logo_notagline.png"
What if you do not want the links on the authentication page, but * * after the user logs? This can be done using the same principles in this article:
- Look at the structure of the website
- Find where you want to place your new HTML (a new sub -div. in the "resources" Div in our case)
- Add some javascript to insert new HTML after an element of existing division of the page (insert after the "resource-footer" Div work)
- Call your javaScript Default.htm.script.min.js
I'll leave that as an exercise for the reader. If you are having trouble let me know in the comments section and perhaps an enterprising individual display their response
(caveat emptor: None of that is officially supported by Citrix, take it -is.)
(Thanks to Scott Novack who also contributed to this article.)
0 Komentar