StoreFront Guide


Customize your Citrix StoreFront 3 website.

Make sure to catch up this series' previous posts first!

 

Getting Started

  • Only do changes in the configuration files located in the StoreFront custom folder. This will help you during StoreFront upgrades as the content from the custom folder will remain.
    Default location:

    • Javascript -> C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom\script.js
    • CSS -> C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom\style.css
  • Copy new images in C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom\
  • Progagate your changes to all secondary servers using the StoreFront propagation feature or copy the content of the custom folder to all the servers.
  • Troubleshooting:
    • Display alerts: http://<StoreFrontURL/Citrix/<StoreName>Web/#-errors
    • Enable debug: http://<StoreFrontURL/Citrix/<StoreName>Web/#-debug
    • Disable customizations: http://<StoreFrontURL/Citrix/<StoreName>Web/#-nocustom
    • Enable tracing: http://<StoreFrontURL/Citrix/<StoreName>Web/#-tr
    • Enable tracing with no customizations: http://<StoreFrontURL/Citrix/<StoreName>Web/#-tr-nocustom

Customizations

Global

Rename StoreFront webpage

Code
  • Javascript

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open strings.en.js.

Before

[caption id="attachment_2556" align="alignnone" width="239"]StoreFront Title before StoreFront Title before[/caption]

After

[caption id="attachment_2555" align="alignnone" width="252"]StoreFront Title after StoreFront Title after[/caption]

Rename others items

Below is a list of all items available in StoreFront 3:

Warning: Items are case sensitive!

You can set new value for the items by following the procedure below.

Code
  • Javascript

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open strings.en.js.

 

 Example:

I’d like to change the following items:

[caption id="attachment_2557" align="alignnone" width="1022"]items to change items to change[/caption]

Code
  • Javascript

Add the following code into strings.en.js:

Result

[caption id="attachment_2559" align="alignnone" width="1022"]Renamed Renamed[/caption]

Note: if you want to change the configuration for another language, you need to modify the proper javascript file (Ex: for French, you need to modify strings.fr.js in the custom folder).

Change storefront favicon

Code
  • Javascript

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open script.js.

Before

[caption id="attachment_2605" align="alignnone" width="239"]Favicon after Favicon after[/caption]

After

[caption id="attachment_2606" align="alignnone" width="237"]Favicon after Favicon after[/caption]

Note: Make sure to copy your favicon file in the custom folder. 

Before logon

Add disclaimer

Code
  • Javascript

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open script.js.

Result

[caption id="attachment_2486" align="alignnone" width="474"]Add disclaimer Add disclaimer[/caption]

To display a long disclaimer, you may want to have scrollbar within your message. Here is how to do:

Code

  • Javascript

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open script.js.

  • CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

Result

[caption id="attachment_2570" align="alignnone" width="1018"]Long disclaimer Long disclaimer[/caption]

Change logo during loading

Code
  • CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

Before

[caption id="attachment_2488" align="alignnone" width="508"]Loading logo original Loading logo original[/caption]

After

[caption id="attachment_2489" align="alignnone" width="508"]New loading logo New loading logo[/caption]

Jump to the next item to change the background color during the loading.

Change background image during loading

Code
  • CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

Change background color during loading

Code
  • CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

Result

[caption id="attachment_2490" align="alignnone" width="508"]Loading background changed Loading background changed[/caption]

Logon page

Add header logo

Code
  • Javascript

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open script.js.

  •  CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

Add header

Code
  • Javascript

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open script.js.

  •  CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

Result

[caption id="attachment_2492" align="alignnone" width="1020"]Logon header Logon header[/caption]

Add text - middle Top

Code
  • Javascript

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open script.js.

  • CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

Result

[caption id="attachment_2494" align="alignnone" width="1021"]Auth Top Auth Top[/caption]

 

Add text - middle Bottom

  • Javascript

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open script.js.

  • CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

Result

[caption id="attachment_2495" align="alignnone" width="1020"]Auth bottom Auth bottom[/caption]

Add text - footer

Code
  • Javascript

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open script.js.

  • CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

Result

[caption id="attachment_2496" align="alignnone" width="1020"]Auth footer Auth footer[/caption]

Change form text color

Code
  • CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

Result

[caption id="attachment_2497" align="alignnone" width="1020"]Form color Form color[/caption]

Change button color

Code
  • CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

Result

[caption id="attachment_2498" align="alignnone" width="1023"]Button color Button color[/caption]

Change message color

Code
  • CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

Result

[caption id="attachment_2500" align="alignnone" width="1022"]Message color Message color[/caption]

Change background image

Code
  • CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

Image must be located in C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom.

Result

[caption id="attachment_2501" align="alignnone" width="1021"]Change background Change background[/caption]

Replace background image with a color

Code
  • CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

Result

[caption id="attachment_2502" align="alignnone" width="1022"]Background color Background color[/caption]

Change logo

Code
  • CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

Image must be located in C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom.

Result

[caption id="attachment_2505" align="alignnone" width="1020"]Change logon logo Change logon logo[/caption]

Jump to the next item to change the form background color.

Change form background color

Code
  • CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

Result

[caption id="attachment_2506" align="alignnone" width="1022"]Change form background color Change form background color[/caption]

Form transparency

Code
  • CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

Result

[caption id="attachment_2509" align="alignnone" width="1022"]Form transparency 50% Form transparency 50%[/caption]

Form transparency with IE8

Code
  • CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

BEFORE IE8

[caption id="attachment_2511" align="alignnone" width="1020"]Form with no transparency Form with no transparency[/caption]

AFTER IE8

[caption id="attachment_2510" align="alignnone" width="1022"]Form transparency IE8 Form transparency IE8[/caption]

Display server name in the footer

Originally posted here: Display server name with Citrix StoreFront 3.

IIS

Connect to your StoreFront server and open IIS console (inetmgr.exe). Select your StoreFront website (Default Web Site by default).

[caption id="attachment_2362" align="alignnone" width="265"]Select the StoreFront website in IIS Select the StoreFront website in IIS[/caption]

In the Features view, select HTTP response headers.

[caption id="attachment_2363" align="alignnone" width="476"]Select HTTP response headers Select HTTP response headers[/caption]

Select Add, and then type :

  • Name: SF-ServerName
  • Value: SF02

[caption id="attachment_2364" align="alignnone" width="734"]Add new HTTP response header Add new HTTP response header[/caption]

Select OK.

[caption id="attachment_2365" align="alignnone" width="457"]New HTTP response header created New HTTP response header created[/caption]

IIS is now configured.

Note: Make sure to repeat the operation on all your servers.

StoreFront configuration
  • CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\Custom and open style.css.

Add the following code:

  • Javascript

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\Custom and open script.js.

Add the following code:

If needed, restart IIS with the following command:

Result

Connect to your StoreFront website, you should see the server name at the bottom of the page.

[caption id="attachment_2366" align="alignnone" width="1022"]Connect to your StoreFront website Connect to your StoreFront website[/caption]

Before Applications/Desktops page

Add disclaimer

Code
  • Javascript

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open script.js.

Result

[caption id="attachment_2564" align="alignnone" width="1020"]Disclaimer before showing apps Disclaimer before showing apps[/caption]

To display a long disclaimer, you may want to have scrollbar within your message. Here is how to do:

Code

  • Javascript

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open script.js.

  • CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

Result

[caption id="attachment_2566" align="alignnone" width="465"]Long disclaimer Long disclaimer[/caption]

Applications/Desktops page

Navigate to a folder

Code
  • Javascript

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\Custom and open script.js.

[caption id="attachment_497" align="alignnone" width="727"]script.js default content script.js default content[/caption]

Add the following lines:

Replace folder/path by your folder name or the path of your folder.

To redirect to the root of the categories, add the following lines:

Result

[caption id="attachment_2583" align="alignnone" width="1022"]Redirected to folders Redirected to folders[/caption]

Add Header bar

Code
  • Javascript

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open script.js.

  • CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

Result

[caption id="attachment_650" align="alignnone" width="620"]New Header bar New Header bar[/caption]

[caption id="attachment_651" align="alignnone" width="506"]New Header bar New Header bar[/caption]

Here is the receiver icon in case you want to use it.

Change header color

Code
  • CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

BEFORE

[caption id="attachment_2513" align="alignnone" width="1021"]Original header Original header[/caption]

AFTER

[caption id="attachment_2514" align="alignnone" width="1022"]New RED Header New RED header[/caption]

Add header background image

Code
  • CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

Before

[caption id="attachment_2584" align="alignnone" width="1020"]Original Header Original Header[/caption]

After

[caption id="attachment_2585" align="alignnone" width="1021"]New header background New header background[/caption]

Change header background color

Code
  • CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

bEFORE

[caption id="attachment_2516" align="alignnone" width="1021"]Original Header Original Header[/caption]

AFTER

[caption id="attachment_2515" align="alignnone" width="1022"]New blue header New blue header[/caption]

Add gradient in the header

Code
  • CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

Result

[caption id="attachment_2518" align="alignnone" width="1023"]Header gradient Header gradient[/caption]

Add gradient in the header with IE8 compatibility

Code
  • CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

Result on IE8

[caption id="attachment_2518" align="alignnone" width="1023"]Header gradient with IE8 Header gradient with IE8[/caption]

Change header height

Code
  • CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

Add header (scrolling with the apps)

Code
  • CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

Result

[caption id="attachment_2587" align="alignnone" width="620"]Blue header is displayed Blue header is displayed[/caption]

[caption id="attachment_2586" align="alignnone" width="1023"]Disappear while scrolling down Disappear while scrolling down[/caption]

Change background

Code
  • CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

Result

[caption id="attachment_2588" align="alignnone" width="1022"]Store Background Store Background[/caption]

Change app titles color

Code
  • CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

Result

[caption id="attachment_2589" align="alignnone" width="620"]Change titles color Change titles color[/caption]

Change categories, folders and details color

Code
  • CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

BEFORE

[caption id="attachment_2521" align="alignnone" width="1023"]Original color Original color[/caption]

AFTER

[caption id="attachment_2520" align="alignnone" width="1022"]New color New color[/caption]

Note: This will also apply to Folders/Categories titles. 

Change toolbar color

Code
  • CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

BEFORE

[caption id="attachment_2592" align="alignnone" width="1023"]Original toolbar Original toolbar[/caption]

AFTER

[caption id="attachment_2593" align="alignnone" width="1022"]New toolbar background New toolbar background[/caption]

Change top left logo

Code
  • CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

Result

[caption id="attachment_2519" align="alignnone" width="1021"]New logo top left New logo top left[/caption]

Display server name in the footer

Originally posted here: Display server name with Citrix StoreFront 3.

IIS

Connect to your StoreFront server and open IIS console (inetmgr.exe). Select your StoreFront website (Default Web Site by default).

[caption id="attachment_2362" align="alignnone" width="265"]Select the StoreFront website in IIS Select the StoreFront website in IIS[/caption]

In the Features view, select HTTP response headers.

[caption id="attachment_2363" align="alignnone" width="476"]Select HTTP response headers Select HTTP response headers[/caption]

Select Add, and then type :

  • Name: SF-ServerName
  • Value: SF02

[caption id="attachment_2364" align="alignnone" width="734"]Add new HTTP response header Add new HTTP response header[/caption]

Select OK.

[caption id="attachment_2365" align="alignnone" width="457"]New HTTP response header created New HTTP response header created[/caption]

IIS is now configured.

Note: Make sure to repeat the operation on all your servers.

StoreFront configuration
  • CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\Custom and open style.css.

Add the following code:

  • Javascript

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\Custom and open script.js.

Add the following code:

If needed, restart IIS with the following command:

Result

Logon to the webpage, you should also see the server name at the bottom of the applications page.

[caption id="attachment_2367" align="alignnone" width="620"]Server name is displayed Server name is displayed[/caption]

You can play with the CSS to display the server name wherever you want.

Add a random text in the footer

Code
  • Javascript

Go to C:\inetpub\wwwroot\Citrix\MainStoreWeb\custom and open script.js.

By default, the script will try to find trivia.txt located in C:\inetpub\wwwroot\Citrix\<StoreName>Web.

You also need to add the following to display the footer and the random message (please review the “Add a footer” section in this post) :

  • CSS

Then, open style.css (in the same directory) and add the following:

You can modify the CSS to fit your needs.

The last step is to create trivia.txt in C:\inetpub\wwwroot\Citrix\MainStoreWeb.

StoreFront will display a different message every time you refresh the page.

Note: I’ve adapted the script from this website.

Featured App Groups

Change bar image

Code
  • CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

Note: appBundle1 is the 1st picture, appBundle2 is the 2nd, etc.

Before

[caption id="attachment_2573" align="alignnone" width="1005"]Previous Featured App group background Previous Featured App group background[/caption]

After

[caption id="attachment_2572" align="alignnone" width="1006"]New Featured App group background New Featured App group background[/caption]

Change Featured app groups background color

Code
  • CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

Result

[caption id="attachment_2575" align="alignnone" width="1021"]Featured app groups background Featured app groups background[/caption]

Change Featured app groups title and text

Code
  • CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

Before

[caption id="attachment_2577" align="alignnone" width="521"]Featured app group title and text original Featured app group title and text original[/caption]

After

[caption id="attachment_2576" align="alignnone" width="520"]Featured app group title and text updated Featured app group title and text updated[/caption]

 

Change featured app groups background image

Code
  • CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

Result

[caption id="attachment_2578" align="alignnone" width="1021"]Featured app groups with background image Featured app groups with background image[/caption]

About

Change logo

Code
  • CSS

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

Result

[caption id="attachment_2595" align="alignnone" width="362"]Change logo about Change logo about[/caption]

Change content

Code
  • Javascript

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open script.js.

Result

[caption id="attachment_2596" align="alignnone" width="366"]Change content About box Change content About box[/caption]

Change background color

Code
  • Javascript

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

Result

[caption id="attachment_2598" align="alignnone" width="386"]Change background Change background[/caption]

Change background image

Code
  • Javascript

Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

Result

[caption id="attachment_2599" align="alignnone" width="398"]Add background image Add background image[/caption]

Sources: 
Welcome to Receiver X1
Citrix customization cookbook
X1 Customization: Going deeper with CSS

Make sure to catch up this series' previous posts first!

 

68 COMMENTS

  1. Thanks for a great site!

    “Change background during loading”

    It says:

    .loading-screen {
    background-image: #FFFFFF;
    }

    But the correct line is “color” instead of “image”, that’s how I got it to work.

  2. What class can I use to modify the height of the existing gray header bar on the Applications/Desktops page?

    By the way, thank you for posting this article. It has been a great resource.

    • Something like that?

      Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open script.js.

      $('.customAuthTop').html("Text1<br /> <a href="http://www.citrixguru.com” rel="nofollow">citrixguru</a><br /><br />");
      CSS
      Go to C:\inetpub\wwwroot\Citrix\<StoreName>Web\custom and open style.css.

      .customAuthTop {
      font-size:12px;
      color:white;
      text-align:center;
      }

      • Hi Nicolas,

        i have attempted this but it has not worked…im using Storefront 3.8

        i wanted to but them on the footer so my code is below

        FROM CSS

        #customBottom
        {
        text-align:center;
        font-size:30px;
        position:static;
        }

        .customAuthFooter
        {
        font-size:30px;
        color:yellow;
        text-align: center;
        }

        $(‘#customBottom’).html(“Text1 citrixguru“);

        $(‘.customAuthFooter’).html(“Text1 citrixguru“);

  3. Nice.. thanks – very useful.

    Have a question – I want to add an additional URLs like to applications – eg a link to documentation or where the user can find support for that app. I tried to embed html in the ‘description’ but it doesn’t get decoded properly. Anyone have any ideas? Thought to add some custom .js but I can’t find enough example to get me going.

  4. Awesome article. How can I change the client name?
    Previously in WI5.4, I’ve modified SessionUtils.java file located in C:\inetpub\wwwroot\Citrix\XenApp\app_code\PagesJava\com\citrix\wi\pageutils.
    deviceInfo.setClientName(“EXT_” + clientName);

    It was working fine … but I’ve migrated to SF3.5 … couldn’t find how to do it ?

    Thanks for helping 🙂

    Stephane

  5. This was awesome , I have one burning issue my company allows users to download AV from the Web Interface how can I provide the function in Storefront without screwing it up…

    • I believe it’s: .credentialform input[type=text], .credentialform input[type=password, .credentialform .pseudo-input {

      background-color: #ffffff;

      • I searched for the same because I wanted to use a White Background. Correct is:

        .credentialform input[type=”text”], .credentialform input[type=”password”], .credentialform .pseudo-input {
        background-color: #CCCCCC;
        }

  6. Hi Nicolas,

    Any idea how can i change the color for textboxes from logon page?…username…password …domain.
    i ask this because was needed to change the background color to white and now the textboxes can not be seen.

    Thank you!

  7. Hi Nicolas,

    great article. I have two questions:
    1. Is it possible to change the url in the about box? now it is http://www.citrix.com and i like to use a page of our company
    2. Is it possible te add a footer to the desktop/applications page only?

    • Hi Erwin, not sure if you already found it but for your first question, you need to change it to the receiver.html file located in C:\inetpub\wwwroot\Citrix\yourstoreWeb

      You would also need to do a iisreset for changes to be applied.

  8. Great Article.

    Does anybody know how to change link color underneath Logon Button (“Account self service”)?

    Thanks,

    Timo

    • Found it, Anybody who is interested in. You can change the color in Style.css located in C:\inetpub\wwwroot\Citrix\StoreWeb\custom. Below you will a short example.

      .web-screen .detail-text{
      color:#ffffff;
      font-size:20px;
      font-weight:300
      }

      • This didn’t work for me. The text under Log On is “Switch to user name and password” and it’s still a light blue but it’s hard to read with the company image in the background. Anybody else know how to change this text color?

        • Found it. Add to style.css:
          .authentication-link {
          color:#FFFFFF
          }

          I have pass-through and username/password enabled. When users log off they have a checkbox option to “Remember my logon method.” By default this option is selected. Does anyone know how to deselect this option as default?

          Another question: some of my longer application names are being cut off. Is there a way to force the entire application name to appear?

  9. Thanks for an awesome site. You have put all the needed customizations in just one page with collapsible/expandable boxes which adds in further delight in accessibility. I have just upgraded my StoreFront from 3.0 to 3.5 with most of these customizations.

    Thankyou for such a valuable information. Keep up the good work..!!!

  10. Hi All, I am using SF v3.7, is it possible to put a logoff icon that is always visible rather than needing to click on the username drop down? or, make ‘logoff’ the default rather than the username?

  11. Simply Awesome. One of the valuable information given in a single page. It’s Greatest one which i have found in a site. You are really Champ Nicolas. Keep up Good Show looking forward for the same..

  12. HELP! First off, a great site – excellent. I’m going round and round in circles. All I want is a text hyperlink on the logon page. Like a message of the day but with a hyperlink firing off to another website. I have tried several methods, each aren’t working. This one seems to be the closest, but not working for me. $(‘#customAuthBottom’).html(“Visit W3Schools “); This shows nothing. I get text without the hyperlink using $(‘.customAuthBottom’).html(“Click Here”); But I just want a working hyperlink – please… (SF 3.7).

  13. Update: it’s showing as I want it on the time-out logged off screen, so it’s hiding somewhere…to be continued.

  14. Great post!
    Any idea of how to not have the login form aligned to the center? I would like to move it a bit to the left.

  15. Hi!
    Great Article!

    Do you know how to change the thirdPartyNoticeLink – not the name, but the destination?

    Thanks!

  16. Does anyone know of a way to display the receiver client version along with the SF server name in the footer? I have the SF server name displayed without issue, but adding the Receiver client version is a bit more difficult. Thanks!

  17. I’m running Storefron v3.8. and XenApp 7.12. I tried using the code to change the About content. I placed the code into the script.js and noting happened. The code to change the logo that is added to the style.css worked fine. Not sure why the js for modifying the About content is not executing. Still shows the default text.

  18. Hi.
    Is there any way to keep the default tab as favorites on user log in .
    what i am looking for is when the user log in to storefront the default page will be favorties.
    is their any possibility?

  19. Are you able to make these customizations while running the Classic theme on StoreFront? Or do you have to have the new UI enabled?

  20. Hi,

    thanks for the great stuff. I just have a question reqarding the displaying of Servername. As of I propagate changes from one StoreFront Server to another, my ResponseHeader(‘SF-ServerName’); gets overwritten from Server XYZ 02 to Server XYZ 01. I would propose to write the ServerName into a textfile, which will be placed somewhere else. Any idea how to deal with it?

  21. Is it possible to have the Favorites options in the native Receiver, but not in Receiver for Web?

  22. Thank you very much, really helpful site 🙂

    I have a question. As of I set up a customized loading logo, I see the new logo only at desktop sites. On my mobile phone I still see Citrix Receiver logo multiple times. It looks really strange.

  23. How to remove the “About” from the content? I tried to remove it from .js file but not working.

    • @ yawhing, to delete the ‘About’ button, amend the script.js file and add:

      (function ($) {
      $.localization.customStringBundle(“en”, {
      About: “”,
      });
      })(jQuery);

      There’s a whole list of variables (strings) you can change, the format for example:

      (function ($) {
      $.localization.customStringBundle(“en”, {
      AppStore: “Citrix Appstore”,
      About: “”,

      });
      })(jQuery);

      I found the strings in the ctx.strings_1C19D57C5BC66253.js file in receiver\js\localization\en

      Worked for me after hours of searching!

  24. Hi

    I need add/change password complexity requirements message in StoreFront page. Currently when the user doesn’t meet the requirements it displays the default message :
    Your new password must meet password policy requirements. Check the minimum password length, password complexity and password history requirements.

    where do I make this change?

    Many thanks

  25. Any updates for Storefront 3.9? Trying to add a couple URL’s to the storefront login page. Code in replies does not work.

  26. We access our XenDesktops via Linux Thin clients that boot to Firefox hardcoded to the StoreWeb page. We would like to redirect the “time out” page back to the logon page. We have accomplished it with the “logoff” page by editing the strings.en.js file. Can it be done?

  27. Awesome Guide.
    I would liketo add another icon to the right of “Apps” called “Help”. This would just be a html page with a reference guide and possibley a form fo a user to fill in to report an issue.

    How would I go about doing that? I tried using something that was posted on Carl’s site (http://www.carlstalhood.com/storefront-3-5-tweaks/#special) which used CTXS.ExtensionAPI.addHelpButton but that didn’t seem to work with SF 3.11

    Thank you in advance
    Magnus

  28. Hi,

    I’ve used your code to “change top left logo”. It works on the MyStoreweb site, but not when using receiver to connect to MyStore? The Citrix logo has disappeared, but has not been replaced with the new one.

    Sonia.

  29. Ignore my earlier comment. Typical after fiddling about for ages and then saying it’s not working – it does!

  30. Hi there,

    Firstly, fantastic article. 🙂 Was just going through the section where you detail changing the loading screen logo, loading screen background image, and colour.

    The background image works, the background colour works, but not the loading logo. I’m running SF3.11. Do you know if “change logo during loading” on 3.11 supported or is something else wrong? I’ve cut and pasted straight from the example above.

    Thanks in advance,

    Pete

    • Try using .large .loading-logo {
      background-image: url(yourlogo.jpg);
      background-size: 403px 185px;
      }

      .loading-logo {
      background-image: url(yourlogo.jpg);
      width:403px;
      height:185px;
      }

  31. First off, Awesome site! Thank you for helping the community! I have a question, I am looking for a way to change the text color and logo when I am redirected to the Install Citrix Receiver page. I am not seeing in this post an option to modify that. I was able to modify the log off page but cannot find out how to change the Detect Receiver landing page text and add a logo instead of it displaying Citrix Receiver. Help much appreciated!

  32. Fantastic article..! I used a lot from here. Thanks for it Nicholas. I could get everything working apart from just one thing. The Logo doesn’t follow on the Logoff screen. For the login screen, it appears fine and I have used .customAuthHeader in .CSS for logo with an entry in script.js file as below:
    $(‘.customAuthHeader’).html(“”);

    Please help. Thanks a ton once again.

  33. Hello Nicholas
    Thanks for the great article. I used a lot of settings from here and all of them worked like a treat. The only thing I have issues with is the logo on the Login screen doesn’t follow on the Logoff screen.
    I have used background colour setting .CSS and logo top right for Login screen along with the entry in .js file as follows:
    $(‘.customAuthHeader’).html(“”);

    Please help

  34. Hello Nicholas,
    how can i change the color from the “username and password” link on the logon screen?

  35. Hi Nicholas
    I am trying to add a post logon message and I cant get it to work. I edit the custom.script.js custom.style and custom.wrstring files where i made the changes. I was wondering if you can post some suggestion. I am using StoreFront 3.9

  36. Hello,
    thanks to your article, I’ve added a custom header to the Apps page (no download link, just a hint for our users). Unfortunatley, this new Element seems to cover the back Button that you see when clikcing an app’s Detail Link. You need it to return to the normal App List. It is still there and clickable, but not visible. Any Idea?

    Code:
    #customTop {
    text-align: center;
    background-color:#f9f9f9;
    color: #574f5b;
    font-size: 12px;
    padding-top:5px;
    margin-bottom:-20px;
    }

  37. Hi Nicolas, awesome article!

    One query. I have a customer who wants a dark background with white text on the apps and desktops screen. This is easily achievable using the post you have put together above. However, the one annoying thing is that they also use Featured App Groups, and changing the text color to white also changes the arrows on the buttons at each end of the Featured App Groups to white. Which means the Featured App Groups look stupid, because now they are all-white circles with no arrow to be seen 🙁

    Don’t suppose you’d have any idea how to change this? I can see the element appears to be inheriting the colour that I’ve overridden in the custom CSS file from .theme-highlight-color. Ideally, I’d like to change the text to white but leave the arrows on the Featured App Groups as a darker colour, or even the default.

    Thanks in advance!

    JR

  38. Regarding my question above:-

    not to worry 🙂

    I got around this by simply editing each individual element in style.css to make it white

    .smallTiles .storeapp .storeapp-name,
    .largeTiles .storeapp .storeapp-name {
    color: white;
    font-weight:normal;
    }

    .no-results-message, .no-fav-results-message {
    color:#FFFFFF;

    }

    .smallTiles .storeapp-category,
    .largeTiles .storeapp-category {
    color:#FFFFFF;
    }

    .smallTiles .storeapp-action-link, .taskapp-action-link,
    .largeTiles .storeapp-action-link, .taskapp-action-link {
    color:#FFFFFF;

    }

    .smallTiles .store-view .store-apps-title,
    .largeTiles .store-view .store-apps-title {
    color:#FFFFFF;
    }

    .large .store-view .toolbar-button {
    color:#FFFFFF;
    }

    .large .store-view .toolbar-button.selected {
    color:#FFFFFF;
    }

    For the record, never would have been able to do this without your article anyways 🙂

  39. When your loading-logo isn’t working Then it probably has to do with this part:
    .large .detection-right-links, .large .loading-logo

    It injects before the loading-logo part.
    Place this part in your custom/style.css

    .large .detection-right-links, .large .loading-logo {
    background-image: url(Logo.png);
    }

    And your loading-logo customisation will work again.

Comments are closed.