This article describes how to apply advance Customizations to StoreFront web page.
Note: Citrix Support will only help with customization that can be done using StoreFront Management Console.

• For supported customizations refer to Product Documentation

 

Prerequisites

• HTML and CSS programming knowledge is required.

---

Instructions

Note: The examples in this article rely on internal styles that may change between StoreFront versions without notice.

Complete the following steps to apply advance customizations to StoreFront web page:

1. (Optional) Open “C:\inetpub\wwwroot\Citrix\<Name of the Store>\receiver\css\ctxs.large*.css” with your favorite text editor, scripting tool, or CSS editor.
   If you use Notepad++; go to Language > C > CSS.

                   

2. Taking a reverse engineering approach, look for the settings that corresponds to the changes you want to make. Using a visual CSS editor will make this part easier.
   • For example if you want to change the background image, look for the name of the image it currently uses; there are only a few, and are all located under C:\inetpub\wwwroot\Citrix\<Name of the Store>\receiver\images folder.
   • Or if you want to change a color, look for the color currently being use.
   • Do not modify the actual ctxs *.css files.

Some of the setting are:

• Defines the Prelog on screen background:

• Defines the text on the Prelog on screen:

.web-screen .main-text {

      color:white;

      font-size:18px;

      font-weight:300

}

• Defines the grey bar on middle of the Prelog on screen:

.web-screen .content-area {

      padding:60px 0;

      background-color:#3f3643;

      background-color:rgba(63,54,67,0.8);

      text-align:center

}

• Defines the Font of the credential form on the Prelog on screen:

.credentialform .plain {

      margin-left:0;

      color:#9a9a9a;

      font-size:17px;

      font-weight:300;

      line-height:44px

}

• Defines the Post log on screen background:

.home-view-content {

      background-color:white;

      position:absolute;

      width:100%;

      height:100%

}

• The grey middle bar is color RGBA (0,94,214,.7) 
• The font for the credential box is slightly larger and not white

 

For pre-logon screen, use the following:

.web-screen .content-area {

   background-color:rgba(0,94,214,.7);

}

.web-screen {

   background-image:url(Add background image location);

}

.credentialform .plain {

   color:#d67800;

   font-size:20px;

}

3. (Optional) After identifying the settings you need to modify. Test it by using Firefox Developer Edition on a system that has access to the web store, it does not have to be on the StoreFront server.
4. Access the Receiver for Web URL and navigate to the part of the page that you want to modify.
5. Click on the wrench icon next to the search field and then choose “Style Editor”. On a Windows system you can press Shift + F7.

                      

 

6. Go to the Style.css on the lower left-hand corner and add the changes you want to make there.

Your changes will reflect in real time, without the need to refresh the page. But only for the tab you are currently working on in Firefox, and not the actual StoreFront page itself.

Note that the ctxs *.css file mention in Step 1 is also presented along with the style.css.

                         

7. Once you finish your testing, backup and modify the actual C:\inetpub\wwwroot\Citrix\<Name of the Store>\custom\style.css on the StoreFront server.

The above mentioned sample code is provided to you as is with no representations, warranties or conditions of any kind. You may use, modify and distribute it at your own risk. CITRIX DISCLAIMS ALL WARRANTIES WHATSOEVER, EXPRESS, IMPLIED, WRITTEN, ORAL OR STATUTORY, INCLUDING WITHOUT LIMITATION WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, TITLE AND NONINFRINGEMENT. Without limiting the generality of the foregoing, you acknowledge and agree that (a) the sample code may exhibit errors, design flaws or other problems, possibly resulting in loss of data or damage to property; (b) it may not be possible to make the sample code fully functional; and (c) Citrix may, without notice or liability to you, cease to make available the current version and/or any future versions of the sample code. In no event should the code be used to support ultra-hazardous activities, including but not limited to life support or blasting activities. NEITHER CITRIX NOR ITS AFFILIATES OR AGENTS WILL BE LIABLE, UNDER BREACH OF CONTRACT OR ANY OTHER THEORY OF LIABILITY, FOR ANY DAMAGES WHATSOEVER ARISING FROM USE OF THE SAMPLE CODE, INCLUDING WITHOUT LIMITATION DIRECT, SPECIAL, INCIDENTAL, PUNITIVE, CONSEQUENTIAL OR OTHER DAMAGES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. Although the copyright in the code belongs to Citrix, any distribution of the sample code should include only your own standard copyright attribution, and not that of Citrix. You agree to indemnify and defend Citrix against any and all claims arising from your use, modification or distribution of the sample code.

This article describes how to apply advance customizations to StoreFront web page.

Points to Note:

• The setting in the style.css file will take precedence over the ctxs. *.css files.

• When you change the appearance of the webpage through StoreFront management console, those changes take effect because of the modifications that it will do to this file.

• It is recommended that you save any custom images in the custom or customweb folder, so that they are not tampered during a Citrix update.

• When modifying the style.css file directly, be sure put your changes below these lines:

  /* CITRIX DISCLAIMER: START OF MANAGED SECTION. PLEASE DO NOT EDIT ANY STYLE IN THIS SECTION */

  /* CITRIX DISCLAIMER: END OF MANAGED SECTION. */

  /* You may add custom styles below this line. */