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

Article
02/04/2013

[原文发表地址] 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 应用程序，我想让它看上去与我的网站的其余部分更一致，我的网站主要是蓝色和白色。

切换到明亮的主题

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

然后打开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<br> 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;
}

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

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

使用ThemeRoller for jQuery Mobile 自定义

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

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

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

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

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

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

使用该自定义主题

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

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

最后再次打开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 应用程序时，它看起来更好地与站点的其余部分集成了。很好！

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

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

希望大家喜欢！

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

Additional resources