Поделиться через

Создание пользовательских тематических CSS-файлов в SharePoint

Узнайте, как добавить разметку стилей комментариев в CSS-файл, чтобы его можно использовать в механизме темы SharePoint.

Общие сведения о заметках

Примечания, разметку специальные стиль комментариев, сообщают engine темы SharePoint как свойства темы в CSS-файл. При применении темы к сайту engine темы заменяет значения свойств CSS значения соответствующие темы. В SharePoint можно использовать заметки для изменения цвета, шрифта и фонового изображения. Можно также изменить цвет изображения. При использовании настраиваемого CSS-файлы, если вы хотите использовать их с помощью механизма SharePoint темы необходимо добавить эти заметки CSS-файлы. Если применить тему для сайта, использующего настраиваемые CSS-файлы, и вы не добавили аннотации, свойства CSS не изменяются. Это может привести к сайтом с несоответствие разработки.

В этой статье описываются доступные заметки и регистрация CSS-файлы.

Дополнительные сведения о пользовательских темах см. в разделах Практическое руководство. Развертывание настраиваемой темы в SharePoint и Практическое руководство. Создание файла предварительного просмотра master страницы в SharePoint.

Добавление заметок в пользовательские CSS — файлы

Заметки сообщить engine темы SharePoint как свойства темы в CSS-файл. В этом разделе описываются доступные заметки и как их использовать.

Заметка ReplaceColor

Заметка ReplaceColor заменяет значение цвета указанным цветом темы. Его можно использовать со свойствами CSS, которые определяют значение цвета, например цвет, цвет фона, границы и т. д.

Ниже приводится формат ReplaceColor заметки.

/* [ReplaceColor(themeColor:"ColorSlot"[, themeShade:"ShadeValue"][, themeTint:"TintValue"][, opacity:"OpacityValue"])] */

Замените ColorSlot на имя заметки цветового слота для использования. Чтобы просмотреть список доступных цветовых слотов, обратитесь к разделу Сопоставление цветовых слотов в статье Цветовые палитры и шрифты в SharePoint.

Используйте параметр необязательно themeShade, если вы хотите затемнить цвет темы. Замените ShadeValue числовое значение от 0,0 (без изменений) для версии 1.0 (самый темный).

Используйте параметр необязательно themeTint, если вы хотите осветлить цвет темы. Замените TintValue числовое значение от 0,0 (без изменений) для версии 1.0 (очень светлый).

Используйте параметр необязательно opacity, если вы хотите задать непрозрачность цвет темы. Замените OpacityValue числовое значение, указывающее, непрозрачность. Непрозрачность параметр в диапазоне от 0.0 (полностью прозрачный) до 1.0 (полная непрозрачность).

Ниже приведены примеры ReplaceColor заметки, используемых в CSS-файл.

  • /* [ReplaceColor(themeColor:"BodyText")] */ color:#444;
  • /* [ReplaceColor(themeColor:"BackgroundOverlay",opacity:"0.5")] */ background-color:#fff;
  • /* [ReplaceColor(themeColor:"EmphasisBackground",themeTint:"0.05")] */ background-color:#f2faff;

Заметка ReplaceFont

Заметки ReplaceFont добавляет шрифт темы указанного списка доступных шрифтов. Его можно использовать со свойствами CSS font и font-family.

Ниже приводится формат ReplaceFont заметки.

/* [ReplaceFont(themeFont:"FontSlot")] */

Замените FontSlot именем используемого слота шрифтов. Чтобы просмотреть список доступных слотов шрифта, обратитесь к разделу Слоты шрифтов в статье Цветовые палитры и шрифты в SharePoint.

Ниже показан пример ReplaceFont заметки. В этом примере Если разъем body шрифтов определяется как Courier в теме, Courier добавляются как первый элемент в списке доступных шрифтов в мастере Choose the Look.

  • /* [ReplaceFont(themeFont:"body")] */ font-family:"Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;

Заметка ReplaceBGImage

Заметки ReplaceBGImage заменяет фонового изображения в CSS-файл фонового изображения темы. Его можно использовать со свойствами CSS background и background-image.

Ниже приводится формат ReplaceBGImage заметки. Заметки ReplaceBGImage можно также использовать с фильтром AlphaImageLoader для поддержки более ранних версий Internet Explorer.

/* [ReplaceBGImage] */

Заметка RecolorImage

Заметки RecolorImage recolors указываемое изображение.

Следующие описывает формат RecolorImage заметки.

/* [RecolorImage(themeColor:"ColorSlot"[, method:["Tinting"|"Blending"|"Filling"]][, includeRectangle: {x:x-Setting,y:y-Setting,width:RegionWidth,height:RegionHeight})] */

Замените ColorSlot именем заметки цветового слота. Чтобы просмотреть список доступных цветовых слотов, обратитесь к разделу Сопоставление цветовых слотов в статье Цветовые палитры и шрифты в SharePoint.

Используйте параметр необязательно method, если вы хотите указать метод recoloring.

Используйте параметр необязательно includeRectangle, если вы хотите изменить цвет для отдельного региона изображения. Замените x-Setting, y-Setting, RegionWidth и RegionHeight на x-координаты, y-координаты, ширину и высоту области, которую требуется перекрасить.

Ниже приведены примеры RecolorImage заметки, используемых в CSS-файл.

  • /* [RecolorImage(themeColor:"SubtleBodyText",method:"Tinting")] */ background-image:url("/_layouts/15/images/tabtitlerowbottombg.png?rev=23");
  • /* [RecolorImage(themeColor:"BodyText",method:"Filling",includeRectangle:{x:161,y:178,width:16;height:16})] */ background:url("/_layouts/15/images/spcommon.png?rev=23") no-repeat -161px -178px;

Отправка CSS – файла в тематическую папку в библиотеке стилей

Place the custom CSS files in the Themable folder in the Style library (not the Themable folder in the Master Page Gallery). Only CSS files that are stored in the Themable folder in the Style library are recognized by the theming engine. The Themable folder is created automatically for publishing sites. В противном случае можно создать папку Themable в правильном расположении (http:// SiteCollectionName/Style Library/ language/Themable/).

Примечание.

Имя языковой папки должно быть в 4-значном формате ll-cc , чтобы определить язык и язык и региональные параметры соответственно. Например, en-us или ar-sa. Для получения дополнительных сведений см идентификаторы языков и значения идентификаторов OptionState в Office 2013.

CSS-файлы должны вернули и опубликован. Если CSS-файлы изменяются, необходимо повторно применить темы для внесенных изменений.

Регистрация CSS файла

Необходимо зарегистрировать CSS-файла в главную страницу, прежде чем CSS-файла можно использовать ядром темы. Если применить тему к сайту, направляет главную страницу в CSS-файл. Чтобы зарегистрировать CSS-файл, добавьте <элемент SharePoint:CssRegistration> в <head> элемент страницы master. Ниже показан формат <элемента SharePoint:CssRegistration> .

<SharePoint:CssRegistration Name="CSSFileLocation" runat="server" />

Замените CSSFileLocation на расположение CSS-файла.

Ниже приведен пример <элемента SharePoint:CssRegistration> .

<head>
…
<SharePoint:CssRegistration Name="<%$SPUrl:~SiteCollection/Style Library/~language/Themable/MyCustomFile.css%>" runat="server" />
</head>

Примечание.

[!Примечание] Маркер %$SPUrl не может использоваться для SharePoint Foundation 2013. Необходимо использовать URL-адрес, чтобы указать расположение CSS-файла.

См. также