Работа с темами SharePoint

 

Исходная статья опубликована 10 апреля 2010 г.

Привет, с вами снова я, Колби. Чем ближе становится выпуск SharePoint 2010, тем больше мне нравится сам продукт и некоторые новые функции, которые мы добавили в версию 2010. В частности, мне не терпится опробовать возможности работы с темами, реализованные разработчиками SharePoint в этом выпуске. На прошлой неделе я научился настраивать CSS-файл для поддержки тем на главной странице в SharePoint Designer 2010 и подумал: "Все должны это увидеть!".

Какие же возможности предоставляют темы?  

Обработчик тем работает с CSS-файлами и поддерживает указанные ниже возможности (имя маркера выделено курсивом ).

• Замена цветов (например цвета фона или шрифта) — ReplaceColor
• Замена шрифтов — ReplaceFont
• Перекрашивание изображений (с помощью одного из трех методов: оттенок, цветовой переход и заливка) — RecolorImage

В пользовательском интерфейсе браузера можно выбрать одну из встроенных тем сайта либо создать новую с помощью SharePoint Server (SPS), указав 12 цветов и 2 шрифта. Эти значения хранятся в THMX-файле (этот стандарт также используется в Microsoft Office). Также можно создать тему в Microsoft PowerPoint и сохранить ее в виде THMX-файла для последующего использования в SharePoint. THMX-файлы хранятся в коллекции тем корневого сайта; темы можно добавлять в SPD или браузере на странице "Параметры сайта > Коллекция тем" (Site Settings > Themes gallery). Двенадцать цветов темы представлены следующими маркерами:

• Dark1 (темный 1), Dark2 (темный 2)
• Light1 (светлый 1), Light2 (светлый 2)
• Accent1 (акцент 1), Accent2 (акцент 2), Accent3 (акцент 3), Accent4 (акцент 4), Accent5 (акцент 5), Accent6 (акцент 6)
• Hyperlink (гиперссылка)
• Followed Hyperlink (просмотренная гиперссылка)

Обработчик тем на основе этих цветов создает пять оттенков: Lightest (самый светлый), Lighter (более светлый), Medium (средний), Darker (более темный) и Darkest (самый темный). Для ссылки на оттенок в CSS-файле используется следующий формат: цвет-оттенок (например "Light2-Darkest").

Синтаксис  

Обработчик тем считывает комментарии из CSS-файла. Для стиля с поддержкой тем задайте выбор по умолчанию и поместите маркер темы непосредственно перед стилем. Пример: у меня есть элемент цвета фона, для которого необходимо задать оттенок Light2-Darkest. Определение в CSS-файле будет выглядеть следующим образом:

/* [ReplaceColor(themeColor:"Light2-Darkest")] */ background-color:#707070;

В теме по умолчанию в качестве цвета фона будет использоваться цвет #707070, а после применения темы цвет фона будет заменен на Light2-Darkest. Примеры использования других маркеров см. в конце данной статьи или в CSS-файле по умолчанию для страницы v4.master (corev4.css), который сам по себе является отличным справочником.

Настройка файла  

Чтобы настроить главную страницу с поддержкой тем, выполните указанные ниже действия.

1. Поместите CSS-файл в папку, доступную обработчику тем.
2. Зарегистрируйте CSS-файл на главной странице.

Расположение  

Обработчик тем запускается только для CSS-файлов, расположенных в определенных папках. В нашем случае используется папка RootSite/Style Library/~язык/Themable. Эта папка создается для сайтов SPS, для которых активирована функция публикации SharePoint Server. При работе с корневым сайтом, для которого отсутствует эта структура, необходимо создать на корневом сайте папку Style Library с вложенной папкой Themable. Все содержимое папки Themable (в том числе содержимое вложенных папок) будет доступно обработчику тем. Создайте эту структуру папок в SharePoint Designer или в браузере. Языковая папка необязательна, однако если для разных языков используются различные CSS-файлы, эту папку необходимо создать. Для русского языка эта папка должна называться ru-ru.

Изображения не обязательно хранить в какой-либо конкретной папке, однако рекомендуется поместить их в папку RootSite/Style Library/Images.

Пара советов по перекрашиванию изображений: при перекрашивании изображения, которое отрисовывается в нескольких расположениях, во всех расположениях, к которым была применена тема, будет использоваться изображение, полученное в результате последнего перекрашивания. Например, мне необходимо продемонстрировать различные методы перекрашивания на одном и том же изображении (оттенок, цветовой переход и заливка), однако во всех случаях будет использоваться заливка. Необходимо сохранить несколько копий изображения и применить к ним тему по отдельности (примечание: в качестве последнего средства можно воспользоваться атрибутом detach, чтобы обработчик при перекрашивании создавал новое изображение, однако этот метод следует применять осторожно, поскольку загрузка при отрисовке множества копий изображения может отрицательно повлиять на производительность. По этой причине я не буду углубляться в подробности). Для кластеров изображений (файлов, содержащих несколько изображений) можно перекрасить отдельные части изображения с помощью параметра includeRectangle (пример см. в файле corev4.css).

Регистрация  

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

<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/ Themable /myStyleSheet.css %>" After="corev4.css" runat="server"/>

Параметр After гарантирует, что наш CSS-файл будет применен к странице после применения файла corev4.css. Однако обратите внимание, что маркер <% $SPUrl не разрешается в SharePoint Foundation (SPF). В SPF расположение указывается с помощью жестко заданного URL-адреса. К сожалению, это накладывает определенные ограничения в тех случаях, когда необходимо использовать различные CSS-файлы для разных языков (маркер ~language не поддерживается).

Демонстрация возможностей  

Итак, настройка "тематического" CSS-файла завершена. Создайте черновой вариант главной страницы и опробуйте на ней этот файл. Чтобы вы получили более точное представление о палитре цветов в темах, я разместил на странице v4.master большую таблицу со всеми оттенками цветов. Я также разместил на странице изображение и применил к нему перекрашивание. Ниже показано, как моя работа выглядит с цветовой темой по умолчанию (обратите внимание, что в качестве фона по умолчанию используется белый цвет).

Далее я открываю браузер и выбираю новую тему сайта, например со шрифтами Papyrus и Segoe Script. Теперь я вижу намного более красочную таблицу (см. ниже). Я применил тему к тексту гиперссылок и подписям изображений. Для перекрашивания я выбрал оттенок Dark2-Lightest (можно увидеть полное совпадение цвета ячейки Dark2-Lightest и эмблемы, перекрашенной с помощью заливки).

Пример кода  

Ниже приведен фрагмент CSS-файла для второго изображения эмблемы, для которого в теме задан шрифт, цвет шрифта и цвет изображения:

/* [ReplaceFont(themeFont: "MinorFont")] */ font-family:Verdana;
/* [ReplaceColor(themeColor:"Dark2-Darker")] */ color:black;
/* [RecolorImage(themeColor:"Dark2-Lightest",method:"Tinting")] */ background:url("/Style Library/images/spdicon1.png") no-repeat;

Я приятно удивлен качеством перекрашивания изображения. При правильном использовании и соблюдении стиля обработчик тем SharePoint действительно способен порадовать тех из нас, кому внешний вид важен не меньше функциональности :)

Спасибо за внимание, надеюсь, обработчик тем SharePoint понравился вам не меньше, чем мне.

Это локализованная запись блога. Исходная статья находится по адресу Working with the SharePoint Theming Engine