How to customize the Storefront access page-PART3

Through the previous two chapters, we have learned how to customize the login page and the content page through the storefront's own management console and CSS. This section describes how to create some fine-grained settings, such as login prompts.

Many times users need to do some login reminders on the landing page, such as login restrictions, or some company announcements!

is still accessing the C:\inetpub\wwwroot\citrix\<storename>web\custom folder on the storefront server,

Edit Scripts.js file,

Remove Var before the/* and/* End of the sample before/* to make the contents between this set of comment symbols take effect.

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M02/73/52/wKiom1X6KmmyAg2FAAAYbqZjodM720.jpg "style=" float: none; "title=" 2015-09-17_104905.jpg "alt=" Wkiom1x6kmmyag2faaaybqzjodm720.jpg "/>

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/73/4F/wKioL1X6LQGiT8XVAAAl8Em6-UE649.jpg "title=" 2015-09-17_105122.jpg "alt=" Wkiol1x6lqgit8xvaaal8em6-ue649.jpg "/>

Edit the Messgetitle/messagetext/okbutton/text information, enter the content you want, and save it.

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/73/52/wKiom1X6Kzehfl7oAADR0ie8y-o801.jpg "title=" 2015-09-17_105321.jpg "alt=" Wkiom1x6kzehfl7oaadr0ie8y-o801.jpg "/>

Running iisrest in the cmd window of the storefront host is a configuration that takes effect. (change scripts.js need to recharge IIS, modify STYLE.CSS not required)

This dialog box pops up when you log in to the Storeweb site.

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/73/4F/wKioL1X6LKDS_5_fAAA5p66pNoM505.jpg "title=" 2015-09-17_104724.jpg "style=" Float:none; "alt=" wkiol1x6lkds_5_faaa5p66pnom505.jpg "/>

After this is done, we consider adding a footer to the content page.

To continue editing script.js, add the following: for the text content, please modify it yourself.

/* Footer */

$ (' #customBottom '). HTML ("Accept only Citrix Employee access!") ");

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/73/50/wKioL1X6Ni-isoBKAAA8j8MrWr0310.jpg "title=" 2015-09-17_112948.jpg "style=" Float:none; "alt=" wkiol1x6ni-isobkaaa8j8mrwr0310.jpg "/>

To edit the STYLE.CSS, add the following: You can modify the font color, size, position as needed.

#customBottom

{

Text-align:center;

font-size:10px;

Color:white;

Background:gray;

position:static;

}

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M01/73/52/wKiom1X6M_jCQ2LqAABir_TfayM949.jpg "style=" float: none; "title=" 2015-09-17_113039.jpg "alt=" Wkiom1x6m_jcq2lqaabir_tfaym949.jpg "/>

Run iisreset, log on to the content page, and you'll see a line of text at the bottom.

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/73/50/wKioL1X6No3g8mVCAAC29D5DFkw460.jpg "title=" 2015-09-17_113206.jpg "alt=" Wkiol1x6no3g8mvcaac29d5dfkw460.jpg "/>

After this, we can create a scrolling progress bar, so that it is convenient to give some content reminders, such as: the system needs to do operations and so on.

Navigate to C:\inetpub\wwwroot\citrix\<storename>web folder, edit receiver.html

Find this line:

<div id= "Plugintop" ><div id= "Customtop" ></div></div>

Modified to:

<div id= "Plugintop" ><div id= "customtop" ><div class= "Storemarquee" ><span></span>< /div></div></div>

To edit the STYLE.CSS, add the following:

/* StoreFront Messaging BEGIN * *

#customTop {

height:30px;

Background:gray;

}

. Storemarquee {

width:0 Auto;

margin:0 Auto;

White-space:nowrap;

Overflow:hidden;

Box-sizing:border-box;

}

. Storemarquee span {

font-family: ' Arial Black ', Sans-serif;

Font-size:1.8em; /* Modify the font size */

Font-weight:bold;

Color:white;

Display:inline-block;

padding-left:100%; /* Show the marquee just outside the paragraph */

Animation:storemarquee 15s linear infinite;

-moz-animation:storemarquee 15s linear infinite;

-webkit-animation:storemarquee 15s linear infinite;

}

/* Make it move */

@keyframes Storemarquee {

0% {transform:translate (0, 0);}

100% {transform:translate (-100%, 0);}

}

@-moz-keyframes Storemarquee {

0% {-moz-transform:translate (0, 0);}

100% {-moz-transform:translate (-100%, 0);}

}

@-webkit-keyframes Storemarquee {

0% {-webkit-transform:translate (0, 0);}

100% {-webkit-transform:translate (-100%, 0);}

}

. Storemarquee Span:after {

Content: ' Welcome to the Citrix Shanghai Demo Center! ‘; /* What to display */

Display:inline;

}

/* StoreFront Messaging End */

Save, and run Iisrest, log in to Storeweb's content page and you can see a line scrolling through the fonts displayed.

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/73/53/wKiom1X6N16TIbLyAABO2QvxwtE583.jpg "title=" 2015-09-17_114451.jpg "alt=" Wkiom1x6n16tiblyaabo2qvxwte583.jpg "/>

The contents of Storefront's tips section are described here.

This article is from the "Citrix in the Cloud" blog, be sure to keep this source http://kaiqian.blog.51cto.com/236001/1695638

How to customize the Storefront access page-PART3