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

StoreFront Title before
StoreFront Title before

After

StoreFront Title after
StoreFront Title after

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:

items to change
items to change

Code
  • Javascript

Add the following code into strings.en.js:

Result

Renamed
Renamed

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

Favicon after
Favicon after

After

Favicon after
Favicon after

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

Add disclaimer
Add disclaimer

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

Long disclaimer
Long disclaimer

Change logo during loading

Code
  • CSS

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

Before

Loading logo original
Loading logo original

After

New loading logo
New loading logo

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

Loading background changed
Loading background changed

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

Logon header
Logon header

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

Auth Top
Auth Top

 

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

Auth bottom
Auth bottom

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

Auth footer
Auth footer

Change form text color

Code
  • CSS

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

Result

Form color
Form color

Change button color

Code
  • CSS

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

Result

Button color
Button color

Change message color

Code
  • CSS

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

Result

Message color
Message color

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

Change background
Change background

Replace background image with a color

Code
  • CSS

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

Result

Background color
Background color

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

Change logon logo
Change logon logo

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

Change form background color
Change form background color

Form transparency

Code
  • CSS

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

Result

Form transparency 50%
Form transparency 50%

Form transparency with IE8

Code
  • CSS

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

BEFORE IE8

Form with no transparency
Form with no transparency

AFTER IE8

Form transparency IE8
Form transparency IE8

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).

Select the StoreFront website in IIS
Select the StoreFront website in IIS

In the Features view, select HTTP response headers.

Select HTTP response headers
Select HTTP response headers

Select Add, and then type :

  • Name: SF-ServerName
  • Value: SF02

Add new HTTP response header
Add new HTTP response header

Select OK.

New HTTP response header created
New HTTP response header created

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.

Connect to your StoreFront website
Connect to your StoreFront website

Before Applications/Desktops page

Add disclaimer

Code
  • Javascript

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

Result

Disclaimer before showing apps
Disclaimer before showing apps

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

Long disclaimer
Long disclaimer

Applications/Desktops page

Navigate to a folder

Code
  • Javascript

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

script.js default content
script.js default content

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

Redirected to folders
Redirected to folders

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

New Header bar
New Header bar

New Header bar
New Header bar

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

Original header
Original header

AFTER

New RED Header
New RED header

Add header background image

Code
  • CSS

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

Before

Original Header
Original Header

After

New header background
New header background

Change header background color

Code
  • CSS

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

bEFORE

Original Header
Original Header

AFTER

New blue header
New blue header

Add gradient in the header

Code
  • CSS

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

Result

Header gradient
Header gradient

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

Header gradient with IE8
Header gradient with IE8

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

Blue header is displayed
Blue header is displayed

Disappear while scrolling down
Disappear while scrolling down

Change background

Code
  • CSS

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

Result

Store Background
Store Background

Change app titles color

Code
  • CSS

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

Result

Change titles color
Change titles color

Change categories, folders and details color

Code
  • CSS

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

BEFORE

Original color
Original color

AFTER

New color
New color

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

Original toolbar
Original toolbar

AFTER

New toolbar background
New toolbar background

Change top left logo

Code
  • CSS

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

Result

New logo top left
New logo top left

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).

Select the StoreFront website in IIS
Select the StoreFront website in IIS

In the Features view, select HTTP response headers.

Select HTTP response headers
Select HTTP response headers

Select Add, and then type :

  • Name: SF-ServerName
  • Value: SF02

Add new HTTP response header
Add new HTTP response header

Select OK.

New HTTP response header created
New HTTP response header created

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.

Server name is displayed
Server name is displayed

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

Previous Featured App group background
Previous Featured App group background

After

New Featured App group background
New Featured App group background

Change Featured app groups background color

Code
  • CSS

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

Result

Featured app groups background
Featured app groups background

Change Featured app groups title and text

Code
  • CSS

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

Before

Featured app group title and text original
Featured app group title and text original

After

Featured app group title and text updated
Featured app group title and text updated

 

Change featured app groups background image

Code
  • CSS

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

Result

Featured app groups with background image
Featured app groups with background image

About

Change logo

Code
  • CSS

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

Result

Change logo about
Change logo about

Change content

Code
  • Javascript

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

Result

Change content About box
Change content About box

Change background color

Code
  • Javascript

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

Result

Change background
Change background

Change background image

Code
  • Javascript

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

Result

Add background image
Add background image

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.