如何自定义StoreFront的访问页面 - Part 2

简介:

Part 1:http://kaiqian.blog.51cto.com/236001/1694576


在第一章节中,我们通过StoreFront自带的控制台来完成包括配色、Logo、企业铭牌的变更。本章节我们将通过CCS的方式,来通过一些简单的语句,来让我们更加个性化的完成页面的调整。

对于的自定义配置配置信息,都会存放在这台StoreFront的对应你修改的web站点目录下:

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

查看这个文件夹我们可以看到,相对应的图片文件都保存在内。同时styel.css的时间戳也发生了改变。所有。

几乎所有定制的相关文件都会保存在这个文件夹内。

wKiom1X2Y5_iTpJaAAMar1WGYrE932.jpg


 通过css的文件编辑器,我们可以看到如下信息,这就是截至到目前通过StoreFront自带工具完成的设定产生的参数。

wKioL1X2ZdOxhDI_AAK-SKuc74Q744.jpg

/* 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. */


wKiom1X2ZUHxb6_PAAB5lasWImU367.jpg

保存Style.css,然后刷新页面,我们可以看到页面的背景已经完全改变。

wKiom1X2ZUeBppYWAAZWp0gQ9pA846.jpg

但是这个时候,你可能发现UserName/Password的文字颜色不是特别明显,或不符合整个页面的风格,那么我们通过工具进行适当调整。

小工具,这个页面可以帮助你选择合适的CSS颜色代码。

http://www.w3schools.com/tags/ref_colorpicker.asp

Logon 按钮及相关页面的配色

wKioL1X2Z3uQHX75AAB9RnM06hY120.jpg

.button.default{

background-color: #333333;

color: #FFFF00;

border-style: solid;

border-color: #333333;

border-width: 4px;

}

账号、密码框相关配色。

wKiom1X2ZUjwNe5RAABHP7c8Yjc224.jpg

可以看到登录页面中,文字部分都已经变为比较高亮的颜色。 

wKiom1X2ZU7yEN18AAZMovXEljA763.jpg

完成了登录页面调整,我们再回到访问页面里面,以调整相应内容适应新的这个界面风格。


然后我们再调整登录后页面内容。


首先我们来调整默认顶端的配色及文字信息。默认来说,可以直接调整背景颜色来符合整个的格式。

wKioL1X2aATS3P95AAA6nlmqpIc190.jpg

也可以直接调用一个图片来对应,

.theme-header-bgcolor{

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

}

可以看到调用的对应图片的就是shanghai.jpg的顶端页面。

wKiom1X2ZfKhmigfAABoLiLCuA4127.jpg

然后下面我们就要修改页面主体。包括工具栏、主页面以及应用内页面。


对于主体的页面,建议选择一个符合网站页面的主题背景图片来替代的纯白页面。


修改主页面的背景,sea_and_sky_light.jpg图片请先保存至custom文件夹下

.storeViewSection {

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

  background-size: cover;

wKiom1X3taqQTsPgAABwiGuMNKc496.jpg


wKioL1X3t2yALudUAAH31gHUSUg451.jpg

而对应每个应用弹出的背景框,我们也可以用类似的方式替换。

.appInfoView {

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

 background-size: cover;

}

wKioL1X3t9-DVskvAABtYSg5rL0671.jpg

wKiom1X3tTjh_0TdAAD2WBZcxuw875.jpg


下一章节我们将分享一些更为动态的调整。





      本文转自sesame.qian  51CTO博客,原文链接:http://blog.51cto.com/kaiqian/1694939,如需转载请自行联系原作者




相关文章
|
5月前
|
JavaScript
若依修改---白名单怎样添加,怎样在初始化页面初始为自己的页面
若依修改---白名单怎样添加,怎样在初始化页面初始为自己的页面
若依修改---白名单怎样添加,怎样在初始化页面初始为自己的页面
|
7月前
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
|
7月前
|
移动开发 小程序
微信小程序web-view嵌入uni-app H5页面,通过H5页面传参给小程序进行转发分享页面,并通过点击转发出来的卡片,定向打开对应H5路径
微信小程序web-view嵌入uni-app H5页面,通过H5页面传参给小程序进行转发分享页面,并通过点击转发出来的卡片,定向打开对应H5路径
|
域名解析 应用服务中间件 索引
为什么javaweb项目 域名启动 访问子页面或主页报404——Error
为什么javaweb项目 域名启动 访问子页面或主页报404——Error
272 0
为什么javaweb项目 域名启动 访问子页面或主页报404——Error
|
JSON 小程序 程序员
微信小程序---全局配置及页面配置
微信小程序---全局配置及页面配置
微信小程序---全局配置及页面配置
|
存储 搜索推荐 机器人
在Joomla中创建自定义404页面
默认情况下,Joomla不提供可以轻松创建和管理的404页面。当你的访问者访问你网站上的一个失效的URL时,404是非常有用的。 我将演示如何创建自定义404页面。 我们将创建一篇文章,添加一个菜单链接,然后在模板文件夹的文件中添加一些代码。
网站的domain不在首页的原因
网站的domain不在首页的原因
1132 0