Блог Ильи Бойко

Релиз SharePoint 2010 не за горами – 12 мая, но заказчики хотят его уже сейчас и одна из первых задач, возникающих в проекте внедрения SharePoint – это задача брендинга.

В плане возможностей брендинга SharePoint претерпел серьёзные изменения, особенно в том что касается тем.

К примеру, в новой версии продукта вы все ещё можете найти папку \TEMPLATE\THEMES, однако, знание её содержимого и структуры для нас уже совершенно бесполезно.

В новой версии мы получаем следующие возможности для брендинга :

• Темы (Themes)
• Главные страницы (Master Pages)
• Каскадные таблицы стилей (CSS)

Названия нам знакомы, но давайте подробнее рассмотрим, что за ними скрывается.

Темы в SharePoint 2010

В предыдущей версии продукта тема состояла из картинок, theme.css и пары конфигурационных файлов загруженных на сервер в директорию  \TEMPLATE\THEMES и зарегистрированных через SPTHEMES.XML.

В версии 2010 концепция тем изменилась, теперь темы позволяют управлять только следующими возможностями: определенным набором цветов (12 цветов) и семейством шрифтов, используемым для текста и заголовков (2 шрифта).

Самым главное нововведение – это появление инструмента для визуального создания тем – Microsoft PowerPoint 2010 (на 2007 мне  так же удавалось создавать работоспособные темы).

Рассмотрим подробнее процесс создания и применения темы:

1. Запустим Microsoft PowerPoint 2010.
2. Переходим к редактированию цветов, на вкладке “Дизайн”.
   
3. Создаем новую цветовую схему.
   
4. Выбираем понравившиеся цвета.
   
5. Сохраняем результат как тему.
   
6. В итоге мы получаем файл с расширением .thmx, в моем случае “Моя тема.thmx”, который необходимо загрузить в SharePoint.
7. Откроем кастомизируемый узел SharePoint в браузере.
8. Перейдем в “Параметры сайта”, блок “Коллекции” пункт меню “Темы”.
9. В открывшуюся библиотеку тем загрузим полученный ранее файл “Моя тема.thmx”.
10.   Перейдем в “Параметры сайта”, блок “Внешний вид и функции” пункт меню “Тема сайта”.
11.   Теперь “Моя тема” доступна при выборе темы узла и мы можем применить её.
12.   После применения темы мы получаем узел с нашим оформлением.

Завершая секцию тем, хочется отметить, что пользователи SharePoint Server 2010 имеют возможность менять цвета и шрифты темы прямо из веб-интерфейса, не используя приложение PowerPoint.

Каскадные таблицы стилей (CSS)

CSS – это второй уровень в кастомизации внешнего вида SharePoint, здесь вы можете тонко настроить внешний вид элементов страницы, как своих, так и предопределенных.

Есть несколько путей для подключения своих CSS стилей:

1. Внутрь макет главной страницы или текстового блока страницы вписать HTML тег: 

   <style type="text/css">
         body {background-color: #FF0000;}
   </style>

   Это самый простой и самый худший метод.

2. В макете главной страницы, например v4.master, зарегистрировать CSS:  
   <SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/my.css %>" After="corev4.css" runat="server"/>

   Обратите внимание, что в моем примере файл my.css расположен в Библиотеке стилей (Style Library) семейства узлов, я рекомендую Вам так же располагать свои стили в этой библиотеке.
   Легко и удобно отредактировать главную страницу и создать свой CSS-файл позволит обновленный SharePoint Designer 2010.
   Этот метод я считаю наиболее удобным и гибким, особенно если в процессе брендинга создается собственная главная страница.

   Важно: Если используется SharePoint 2010 Foundation, код с $SPUrl: работать не будет. Необходимо указывать путь в виде /Style Library/my.css

3. Последний вариант - это подключение CSS файла через веб-интерфейс.
   Для начала необходимо создать свой CSS-файл в Библиотеке стилей (Style Library) семейства узлов с помощью SharePoint Designer 2010.
   Далее необходимо перейти в “Параметры сайта”, блок “Внешний вид и функции” пункт меню “Главная страница”.
   На открывшейся странице в разделе “URL-адрес альтернативной таблицы CSS” можно выбрать свой CSS-файл или унаследовать этот параметр от родительского узла.

   

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

Если Вы работали с предыдущей версией продукта, то замечали, что при использовании тем SharePoint напрямую не работает с вашим CSS файлом, а работает с закэшированной версией файла, этот механизм сохранен в версии 2010. Однако, теперь файл не только кэшируется, на него также накладываются трансформации с использованием специальных “маркеров”:

Так же имеется 5 авто-генерируемых вариаций: Lightest, Lighter, Medium, Darker, Darkest – например: /* [ReplaceColor(themeColor:"Accent2-Darkest")] */.

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

Например стиль заголовка можно задать следующим образом:

h1
{
    /* [ReplaceFont(themeFont: "MajorFont")] */
    font-family: "Trebuchet MS","Times New Roman", Times, serif; 
    font-size: 22pt; 
    font-weight: bold; 
    /* [ReplaceColor(themeColor:"Accent1")] */
    color: #12386b;
    text-align: left;
}

При этом в конечном CSS, применяемом к страницам, значения “font-family” и “color” будут обновлены в соответствие с параметрами темы узла.

По-моему это отличное нововведение.

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

Системные таблицы стилей

Теперь давайте рассмотрим системные таблицы стили, такие как corev4.css, они расположены в папке: C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1049\STYLES\Themable

Если рассмотреть их в редакторе, то в них можно увидеть уже знакомые нам отсылки к свойствам темы:

Файл corev4.css для нас примечателен тем, что в нем хранятся  параметры стилей и стилей разметки, используемые в визуальном редакторе текста SharePoint:

В corev4.css имеются стили именуемые в формате ms-rteStyle-XXXX и ms-rteElement-XXXX, именно эти стили  отвечают за содержимое выпадающих списков “Стили” и “Стили разметки”.

Рассмотрим на примерах:

Так задается стиль “Обычный” (Normal):

.ms-rteStyle-Normal
{
-ms-name:"Обычный";
font-family:Verdana,Arial,sans-serif;
font-size:8pt;
/* [ReplaceColor(themeColor:"Dark1")] */ color:#676767;
/* [ReplaceColor(themeColor:"Light1")] */ background-color:#fff;
}

А так задается заголовок первого уровня:

H1.ms-rteElement-H1
{
-ms-name:"Заголовок 1";
}
.ms-rteElement-H1
{
font-size:2em;
font-weight:normal;
}

Как видно для данных элементов соблюдается необходимое правило именования, а так же имеется свойство “-ms-name:”, значение данного свойства определяет название элемента в соответствующем выпадающем списке.

Если рассмотреть файл corev4.css в нем можно найти множество других элементов, так же отвечающих за отображение тех или иных пунктов в ленте. Однако, не спешите править эти файлы, т.к. они глобальны на весь сервер, эти стили так же как и любые другие можно переопределить в своем собственном CSS-файле.

И последний важный момент, Вы можете не только переопределять стили и названия существующих элементов, но и добавлять свои, изменяя кастомную CSS:

.ms-rteStyle-MyCustomStyle
{
-ms-name:"Мой стиль";
font-family:Calibry,Arial,sans-serif;
font-size:14pt;
/* [ReplaceColor(themeColor:"Dark1")] */ color:#676767;
/* [ReplaceColor(themeColor:"Light1")] */ background-color:#fff;
}
.ms-rteStyle-Normal
{
-ms-name:"Normal";
font-family:Verdana,Arial,sans-serif;
font-size:8pt;
/* [ReplaceColor(themeColor:"Dark1")] */ color:#676767;
/* [ReplaceColor(themeColor:"Light1")] */ background-color:#fff;
}

После применения нашей CSS мы получаем следующий результат:

Прекрасная возможность, пользователи будут счастливы.

Главные страницы

Механизм главных страниц в целом остался прежним, что не удивительно, так как он идет от ASP.NET.

В SharePoint имеется 5 предопределенных главных страницы:

Основным инструментом работы с главными страницами является SharePoint Designer 2010, с его помощью можно создавать, править и удалять главные страницы.

При работе с главными страницами помните, что для библиотеки главных страниц включена версионность, а значит для того чтобы пользователи увидели изменения после завершения всех изменений - главные страницы необходимо публиковать.

Применять главные страницы к страницам сайта вы можете следующими способами:

1. Задав атрибут MasterPageFile страницы:

   <%@ Page language="C#" MasterPageFile="/_catalogs/masterpage/test.master"  %>

2. Перейдя в “Параметры сайта”, “Внешний вид и функции”, пункт меню “Главная страница” и выбрав подходящую главную страницу.
   В SharePoint 2010 при применении главных страниц к сайту можно выбрать разные страницы для разных областей применения ("Главная страница сайта" и "Главная системная страница").
   "Главная страница сайта" - это публикуемые страницы находящиеся в библиотеке "Страницы" (Pages).
   "Главная системная страница" - это служебные страницы: страницы представлений, страницы настроек и другие.
   В этом же разделе так же можно задать политику наследования страниц для данного и дочерних узлов и задать URL альтернативной CSS таблицы.

   

    

В качестве заключения

Продукт близится к релизу, и я думаю, что все описанные мною возможности мы сможем использовать в финальной версии, и это радует.

Брендинг SharePoint стал намного удобнее и логичнее.

Порадовал новый механизм тем, который позволит обычным пользователям работать с темами сайтов.

Ссылки по теме:

TechNet: Plan for using themes (SharePoint Foundation 2010)

Managing the CSS styles for the SharePoint 2010 wiki pages

How Themes work in SharePoint 2010

Codeplex: Starter Master Pages for SharePoint 2010

SharePoint 2010: Что нового? (часть 2) – Master-страницы или гвоздь в голову