如何自定義StoreFront的通路頁面 - Part 2

在第一章節中，我們通過StoreFront自帶的控制台來完成包括配色、Logo、企業銘牌的變更。本章節我們将通過CCS的方式，來通過一些簡單的語句，來讓我們更加個性化的完成頁面的調整。

對于的自定義配置配置資訊，都會存放在這台StoreFront的對應你修改的web站點目錄下：

C:\inetpub\wwwroot\Citrix\<storename>Web\custom

檢視這個檔案夾我們可以看到，相對應的圖檔檔案都儲存在内。同時styel.css的時間戳也發生了改變。所有。

幾乎所有定制的相關檔案都會儲存在這個檔案夾内。

<a href="http://s3.51cto.com/wyfs02/M00/73/25/wKiom1X2Y5_iTpJaAAMar1WGYrE932.jpg" target="_blank"></a>

 通過css的檔案編輯器，我們可以看到如下資訊，這就是截至到目前通過StoreFront自帶工具完成的設定産生的參數。

<a href="http://s3.51cto.com/wyfs02/M01/73/22/wKioL1X2ZdOxhDI_AAK-SKuc74Q744.jpg" target="_blank"></a>

/* The followingsection of the file is reserved for use by StoreFront. */

/* CITRIXDISCLAIMER: START OF MANAGED SECTION. PLEASE DO NOT EDIT ANY STYLE IN THISSECTION */

.theme-header-bgcolor{

         background-color:#A710F2;

}

.theme-header-color{

         color:#ECF71F;

.is-hdpi.logo-container{

         background-image:url('logo-220x78.png');

         background-size: 220px 78px;

.logo-container{

         background-image:url('Citrix_HalfHeaderLogo.png');

         background-size: 110px 39px;

.is-hdpi.logon-logo-container{

         background-image:url('create-a-shutdown-or-restart-your-desktop-icons-1.jpg');

         background-size: 256px 256px;

.logon-logo-container{

         background-image:url('Citrix_HalfLogonLogo.png');

         background-size: 128px 128px;

/* CITRIXDISCLAIMER: END OF MANAGED SECTION. */

/* You may addcustom styles below this line. */ 

首先我們來修改登入頁面的背景。将你需要作為背景頁的圖檔拷貝到此目錄下。本例中，圖檔名稱叫shanghai.jpg

通過文本編輯器打開Style.css，找到如下兩行，所有自定義的配置都在此語句之後。

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

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

<a href="http://s3.51cto.com/wyfs02/M00/73/25/wKiom1X2ZUHxb6_PAAB5lasWImU367.jpg" target="_blank"></a>

儲存Style.css，然後重新整理頁面，我們可以看到頁面的背景已經完全改變。

<a href="http://s3.51cto.com/wyfs02/M01/73/25/wKiom1X2ZUeBppYWAAZWp0gQ9pA846.jpg" target="_blank"></a>

但是這個時候，你可能發現UserName/Password的文字顔色不是特别明顯，或不符合整個頁面的風格，那麼我們通過工具進行适當調整。

小工具，這個頁面可以幫助你選擇合适的CSS顔色代碼。

<a href="http://www.w3schools.com/tags/ref_colorpicker.asp" target="_blank">http://www.w3schools.com/tags/ref_colorpicker.asp</a>

Logon 按鈕及相關頁面的配色

<a href="http://s3.51cto.com/wyfs02/M00/73/22/wKioL1X2Z3uQHX75AAB9RnM06hY120.jpg" target="_blank"></a>

.button.default{

background-color: #333333;

color: #FFFF00;

border-style: solid;

border-color: #333333;

border-width: 4px;

賬号、密碼框相關配色。

<a href="http://s3.51cto.com/wyfs02/M00/73/25/wKiom1X2ZUjwNe5RAABHP7c8Yjc224.jpg" target="_blank"></a>

可以看到登入頁面中，文字部分都已經變為比較高亮的顔色。 

<a href="http://s3.51cto.com/wyfs02/M01/73/25/wKiom1X2ZU7yEN18AAZMovXEljA763.jpg" target="_blank"></a>

完成了登入頁面調整，我們再回到通路頁面裡面，以調整相應内容适應新的這個界面風格。

然後我們再調整登入後頁面内容。

首先我們來調整預設頂端的配色及文字資訊。預設來說，可以直接調整背景顔色來符合整個的格式。

<a href="http://s3.51cto.com/wyfs02/M01/73/22/wKioL1X2aATS3P95AAA6nlmqpIc190.jpg" target="_blank"></a>

也可以直接調用一個圖檔來對應，

background-image: url(./shanghai.jpg);

可以看到調用的對應圖檔的就是shanghai.jpg的頂端頁面。

<a href="http://s3.51cto.com/wyfs02/M02/73/25/wKiom1X2ZfKhmigfAABoLiLCuA4127.jpg" target="_blank"></a>

然後下面我們就要修改頁面主體。包括工具欄、首頁面以及應用内頁面。

對于主體的頁面，建議選擇一個符合網站頁面的主題背景圖檔來替代的純白頁面。

修改首頁面的背景，sea_and_sky_light.jpg圖檔請先儲存至custom檔案夾下

.storeViewSection {

  background: url('./Sea_and_sky_light.jpg') no-repeat center centerfixed;

  background-size: cover;

} 

<a href="http://s3.51cto.com/wyfs02/M02/73/35/wKiom1X3taqQTsPgAABwiGuMNKc496.jpg" target="_blank"></a>

<a href="http://s3.51cto.com/wyfs02/M00/73/32/wKioL1X3t2yALudUAAH31gHUSUg451.jpg" target="_blank"></a>

而對應每個應用彈出的背景框，我們也可以用類似的方式替換。

.appInfoView {

 background: url('./Sea_and_sky_light.jpg')no-repeat center center fixed;

 background-size: cover;

<a href="http://s3.51cto.com/wyfs02/M00/73/32/wKioL1X3t9-DVskvAABtYSg5rL0671.jpg" target="_blank"></a>

<a href="http://s3.51cto.com/wyfs02/M00/73/35/wKiom1X3tTjh_0TdAAD2WBZcxuw875.jpg" target="_blank"></a>

下一章節我們将分享一些更為動态的調整。

      本文轉自sesame.qian  51CTO部落格，原文連結：http://blog.51cto.com/kaiqian/1694939，如需轉載請自行聯系原作者