使用ThemeRoller为LightSwitch SharePoint 应用程序设计主题

使用ThemeRoller为LightSwitch SharePoint 应用程序设计主题

Rate This
  • Comments 0

[原文发表地址]  Theming a LightSwitch SharePoint App with ThemeRoller

[原文发表时间]  2013-01-31 3:57 PM

使用 LightSwitch 构建HTML 客户端最大的好处之一是您可以轻松地使用标准的 CSS来更改您的应用程序的主题。当您安装客户端 HTML 预览版 2时,你得到两个主题可供选择,一个黑暗的主题 (预览版2中 默认的) 和一个明亮的主题。但是您可以完全自定义 CSS 为任何你想要的。一个真正轻松地做到此的方法是使用ThemeRoller for JQuery Mobile

在上一个星期左右里,我一直在研究在LightSwitch SharePoint 教程中所构建的Survey应用程序的变体,然后分享我的经验。如果你错过了以下文章:

但是,您会发现当我们将应用程序部署到 Office 365时,应用程序有点格格不入,不匹配站点的主题。根据您的 SharePoint 网站的外观,您可能更喜欢黑暗的主题。不过,对于此 SharePoint 应用程序,我想让它看上去与我的网站的其余部分更一致,我的网站主要是蓝色和白色。

image

切换到明亮的主题

如前所述,LightSwitch HTML 客户端还附带了一个备用的明亮主题。为了使用这一主题,首先在Solution Explorer中切换到File View:

image

然后打开Client项目中的default.htm文件。您将在该文件的顶部看到定义的样式。

<title>SurveyApp</title>
<link rel="stylesheet" type="text/css" 
href="//ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/jquery.mobile.structure-1.1.1.css" /> <link rel="stylesheet" type="text/css" href="Content/msls.global.css" /> <link rel="stylesheet" type="text/css" href="Content/msls.shell.css" /> <link rel="stylesheet" type="text/css" href="Content/msls.controls.css" /> <!-- To use the light theme, change this to light-theme.css and modify user-customization.css according to comments. You may also replace this with a custom jQuery Mobile theme. --> <link rel="stylesheet" type="text/css" href="Content/dark-theme.css" /> <!-- Additional customizations for icons, fonts, and headers can be added here. --> <link rel="stylesheet" type="text/css" href
="Content/user-customization.css"/>
...

就像注释所说,使用明亮的主题首先替换掉黑暗的主题,明亮的主题应该是像这样的:

<link rel="stylesheet" type="text/css" href="Content/light-theme.css" />

然后打开位于Content文件夹下的user-customization.css文件,使用黑暗的对应物替换掉明亮的图像,就像注释所指示的一样。(请注意您还可以在这里更改徽标和图标)。

#msls-id-app-loading .ui-icon-loading {
/* If using light theme, change to Images/msls-loader-light.gif */
    background-image: url(Images/msls-loader-light.gif) !important; }

#msls-id-app-loading .msls-app-loading-img {
/* Input your own custom logo here */
    
background-image: url(Images/user-splash-screen.png); } #msls-id-progress-overlay .msls-progress { /* If using light theme, change to msls-loader-light.gif */ background: url(Images/msls-loader-light.gif) no-repeat bottom !important;} .msls-header .msls-large-icon .ui-icon { /* If using light theme, change 'white' to 'black' */ background-image: url(images/msls-black-icons-36.png)!important
;
background-color:transparent; }

当我们运行我们的应用程序时,我们现在拥有了一个更明亮的版本。

image

这绝对是为使此应用程序看上去像是我的 SharePoint 的一部分的正确一步。不过,我想进一步自定义这一点,尤其是选中的蓝色部分和链接需要更暗些来匹配顶部的 SharePoint 镶边。ThemeRoller 拯救了我!

使用ThemeRoller for jQuery Mobile 自定义

若要开始使用ThemeRoller ,前往http://jquerymobile.com/themeroller/。为了更方便,你可以导入一个样式表,然后只调整您想要的元素。所以在 Visual Studio 中打开该样式表,我们使用/Content/light-theme.css,然后将所有内容都复制到剪贴板中。然后使用 ThemeRoller,点击屏幕顶部的Import按钮,粘贴在 CSS中,然后点击Import:

image

这将加载明亮的主题到设计图面的色板上 。现在,通过在左边更改属性,您可以自定义任何元素。或者,您也可以从各种预先构建的主题和颜色中选择,然后简单地将它们拖动到色板上。

image

现在我需要做的一切就是弄清我想要的颜色的十六进制值。一种很简单的方法是通过在 Visual Studio 中使用颜色吸管工具。只需打开任意 CSS 文件,右击任意样式,然后您可以点击一个颜色属性,并使用吸管工具来选择屏幕上的任何颜色。

image

我只是将颜色吸管指向了蓝色的 SharePoint 镶边栏,它看起来很像,我想要的蓝色的值是 #0072C6。回到ThemeRoller,添加它到您的recent colors中:

image

然后将新的颜色拖到超链接和按钮中。

image

最后,若要更改选项 (选择列表和下拉列表) 按下的状态,展开属性的" Button: Pressed "这一部分,更改背景为新的颜色 (通过拖动或键入)。

image

使用该自定义主题

既然我们有了我们想要的主题,让我们回到我们的应用程序中。首先我们需要导出我们刚刚创建的主题。点击 ThemeRoller 顶部的Download按钮,命名为theme,然后点击Download。这将作为ZIP 文件下载(ZIP 包括一个可读的版本和已取出空白的最小版本)。

提取ZIP 文件的内容,在theme文件夹中,复制 (我将我的命名为 MyOffice365)CSS 文件,然后回到 Visual Studio 中,粘贴到client的Content文件夹中。

image

最后再次打开default.htm,现在,使用我们自己的替换掉light-theme.css。

<link rel="stylesheet" type="text/css" href="Content/MyOffice365.css" />

<!-- Additional customizations for icons, fonts, and headers can be added here. -->
<link rel="stylesheet" type="text/css" href="Content/user-customization.css"/>
...

现在当我们运行 LightSwitch SharePoint 应用程序时,它看起来更好地与站点的其余部分集成了。很好 !

image

它在我的手机上也看起来不错:-)

wp_ss_20130130_0002wp_ss_20130130_0001

我希望我给你们展示了将自己的风格纳入到 LightSwitch HTML 应用程序中是多么的简单。通过使用标准的 CSS 和在 ThemeRoller 的帮助下,任何人都可以使他们的移动应用程序看起来不可思议。

希望大家喜欢!

Leave a Comment
  • Please add 1 and 8 and type the answer here:
  • Post