Создание главной страницы с применяемыми темами

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

Необходимо спланировать какие элементы главной страницы должны менять свое оформление. Возможна замена следующих атрибутов:

• Начертание шрифта
• Расцветка

Для этого в теме предполагается настройка образцов цветов и шрифтов:

Для обозначения в CSS-документах заменяемых атрибутов используются следующие ключи ReplaceColor, RecolorImage и ReplaceFont. Для обозначения цветов используются следующие переменные:

•Dark1, Dark2

•Light1, Light2

•Accent1, Accent2, Accent3, Accent4, Accent5, Accent6

•Hyperlink

•Followed Hyperlink

Движок тем работает с этими цветами и их оттенками: Lightest, Lighter, Medium, Darker, and Darkest.

Задача	Ключ	Примеры
Замена цвета (кроме картинок)	ReplaceColor	/* [ReplaceColor(themeColor:"Light2-Darkest")] */ background-color:#707070;
Замена цвета картинки	RecolorImage	/* [RecolorImage(themeColor:"Dark1",method:"Tinting")] */ background: url(/_layouts/images/hero-bg.jpg) no-repeat; /* [RecolorImage(themeColor:"Dark1",method:"Blending")] */ background: url(/_layouts/images/hero-bg.jpg) no-repeat; /* [RecolorImage(themeColor:"Dark1",method:"Filling")] */ background: url(/_layouts/images/hero-bg.jpg) no-repeat;
Замена шрифта	ReplaceFont	/* [ReplaceFont(themeFont: "MinorFont")] */ font-family:Verdana; /* [ReplaceFont(themeFont: "MajorFont")] */ font-family:Verdana;

Если требуется применение к одному стилю сразу нескольких замен, используйте следующий пример:

/* [RecolorImage(themeColor:"Dark1",method:"Tinting")] */ /* [ReplaceColor(themeColor:"Dark1")] */ background: url(/_layouts/images/hero-bg.jpg) no-repeat 0px 0px rgb(128, 128, 128);

CSS-файлы должны размещаться в папке

C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1049\STYLES\Themable

Подключать CSS к странице требуется особым образом:

<SharePoint:CssRegistration name="<% $SPUrl:/_layouts/1049/STYLES/Themable/css(1).css %>" After="corev4.css" runat="server"/>

Картинки необходимо расположить в папке

C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\IMAGES

В CSS следует указывать относительный путь. Например, background: url(/_layouts/images/hero-bg.jpg)

Я пробовал использовать jpg и png. Уверен, что спектр совместимых форматов намного шире.

При применении темы к узлу в папке _themes (а если на семействе узлов активирована фича инфраструктуры публикации, то _catalogs/theme/Themed) создается папка, куда сохраняются переработанные CSS и картинки, указанные в этих CSS.

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

http://blogs.msdn.com/b/sharepointdesigner/archive/2010/04/09/working-with-the-sharepoint-theming-engine.aspx

http://www.sharepointbits.com/blog/2010/1/4/how-themes-work-in-sharepoint-2010.html

Сами темы можно настраивать в настройках узла (если активирована возможность публикации на семействе сайтов), либо с использованием PowerPoint.