There are a good few blogs out there about customising Citrix StoreFront over and above what is offered within the GUI. However I have found most of them show you the steps rather than the method.
Now I’m in no way a coding whizz but I learned a lot from a recent project I was involved in and sucked up all I could from a colleague who knew his stuff so I’d like to show you the method on customising the bits of StoreFront you want using nothing more than a couple of text files and Google Chrome.
This blog will probably stretch over a couple of posts.
Let’s firstly go though which files we are talking about so assuming you are using a reasonably recent version of Citrix Storefront then all the files you need to modify can be found within your store folder. For this exercise I have created a store named Default(Web) and inside the default store location of C:\inetpub\wwwroot\Citrix\defaultWeb is a folder named custom which strangely enough is where all our modifications will go.
Inside the custom folder are 3 major files.
Script.js – is where you place javascript which modifies how to StoreFront web component works
Strings.en.js – (modify en for your local language tag) is where you can easily customise text content.
Styles.css – modifies the look and feel of the StoreFront instance.
Now I’ve already talked in a previous blog post about modifying text within Citrix StoreFront blog post HERE, so I won’t go into that again at this point but rather concentrate on configuring the look and feel.
So now we know where we need to change the look and feel of StoreFront, lets concentrate on HOW we do it.
I mentioned Google Chrome before truth is any browser with a developer mode (Firefox, IE etc) will do but I’ve found Chrome to be most idiot proof for me.
So goto your settings tab then more options and finally click on the developer tools at the bottom.
Once you’ve done that you’ll be greeted by all kinds of “cody stuff” on the screen and in the top most left hand side of the new dialog is the mouse button we will use to focus on the items we want to change.
Now you will see as we move on that CSS is divided into sections or blocks which generally look like this:
.Function{
Size: 123px;
color: #FFFFFF;
}
So initially you will look to identify which .Function is used for the StoreFront item you wish to change and then you can add and change formatting items within the functions.
Now we have that open its time to have a look at StoreFront and see what we would like to change.
As a basic example lets firstly look at the logon button. Perhaps we don’t like it and and would like it changed how do we do that.
Within developer mode you see the little mouse button I pointed out 2 images previously all you need to do is click it then hover over the logon button.
What you should see is that area being highlighted and all the cody stuff changing to focus on that element.
For the majority of changes to the StoreFront site we are going to focus on the bottom code pane as that is where all the CSS content is stored. Now what you will notice is that in the area I have highlighted above you will see a Hex code with a familiar looking colour example next to it.
Yep thats the code for the button. Now with Chrome and many other browsers they also allow you to “sandbox” changes by changing the values within the CSS content which is handy because you don’t have to physically change anything in StoreFront and then revert it because it doesn’t look nice.
Now I’m choosing rather eye watering options here just to make it obvious what I’m doing but all you need to do within Chrome is to click within the Hexadecimal value and change it to the corporate standard which in this example is eye-melting red.
Thats all very well and good but Mr CEO doesn’t like the size of the logon button perhaps he wants it a bit smaller. But the CSS selector doesn’t appear to show any size options for the buttons in either the .button.default or the .button sections so now what.
Well again we can use the Chrome sandbox to test out our size requirements by adding lines of CSS to the existing code.
if you click just underneath the colour code a new blank line will be created and typing in any letter will show you the CSS options available to you, which handily includes a “width” option.
As a general rule of thumb with CSS there is a format to entering the code correctly, that is namely:
CODE: Variable;
If you have a quick scroll up and down the other items of existing CSS you will also see that much of the sizing based CSS deals with pixels i.e 100px so we’ll use that size as an example.
Enter the following into the new blank line (note you can use tab to move from width to the variable.
Width:100px;
Again you will see the results being shown immediately within the browser window.
Of course this at the moment is not committed in the slightest to StoreFront and a simple refresh of your browser will remove all the sandbox changes you have made so far so what do we need to do to get these changes within the StoreFront Configuration itself.
We need to copy the content we have created all the way from the .button to the closing statement } so for our example we need to copy this:
.button.default {
background-color: #ff0000;
width: 100px;
}
Once copied if you head over to your storefront server and open Notepad in administrator mode then navigate to the c:\inetpub\wwwroot\Citrix\DefaultWeb\custom\styles.css file.
Once opened paste the content at the bottom of the existing file and save the changes.
Don’t forget to propagate the changes if your StoreFront server is part of a server group.
Couple with this knowledge the GUI options within StoreFront and a little experimentation you can customise pretty much every element of StoreFront style. In the next post we will look at adding content to StoreFront such as a helpdesk contact option etc.
Author: Dale Scriven
