Брендинг ленты

Брэндинг страниц на SharePoint 2010 в целом выполняется так же, как и брендинг страниц на SharePoint 2007. Главным существенным отличием этих процессов является брендинг ленты. Поэтому, расскажу об этом поподробнее.

Лента состоит из двух частей, верхняя и нижняя:

С точки зрения HTML верхняя часть представлена тегом <div class="s4-pr " id="s4-ribbonrow">. Нижняя часть представлена тегом <div class="s4-pr s4-notdlg " id="s4-titlerow" style="display: block;">, если открыта закладка “Обзор” (Browse). Если же открыта одна из других закладок, (например, “Страница”, “Page”) то тег верхней части превращается в <div class="s4-pr " id="s4-ribbonrow" style="height: 135px;"> (вырастает в высоту) и представляет уже обе части. При этом нижняя часть внутри данного тега представлена тегом <div class="ms-cui-tabContainer" unselectable="on">.

Ссылка каждой закладки имеет атрибут вида onclick="_ribbonStartInit('Ribbon.Read',false, event);", где вместо Ribbon.Read подставляются идентификаторы закладок. Скрипты обеспечивают все поведение переключения между закладками на стороне клиента без необходимости перезагрузки страницы.

Верхняя часть ленты содержит три блока. <div class="ms-cui-TabRowLeft ms-siteactionscontainer s4-notdlg" id="RibbonContainer-TabRowLeft" unselectable="on"> это левая периферийная часть верхней полосы ленты, содержащая меню сайта и хлебные крошки. <ul class="ms-cui-tts" role="tablist" unselectable="on" _scaleStep="0"> это блок закладок. <div class="ms-cui-TabRowRight s4-trc-container s4-notdlg" id="RibbonContainer-TabRowRight" style="display: block;" unselectable="on"> это правая периферийная часть верхней полосы ленты, содержащая меню пользователя и кнопки социальных возможностей.

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

При настройке CSS обратите внимание на то, что закладки могут быть многоуровневыми:

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

1. периферийные части верхней полосы
2. нижняя часть на закладке “Обзор”

Остальные части не поддаются прямому редактированию и если вам требуется их поменять, видимо, придется прибегнуть к тем же java-скриптам:

1. блок закладок
2. нижняя часть инструментальных закладок, таких как “Страница”, “Список” и т.п.

Для того чтобы поменять содержимое левой периферийной части, в главной странице следует менять содержимое тега <SharePoint:SPRibbonPeripheralContent runat="server" Location="TabRowLeft" CssClass="ms-siteactionscontainer s4-notdlg">

Для того чтобы поменять содержимое правой периферийной части, в главной странице следует менять содержимое тега <SharePoint:SPRibbonPeripheralContent runat="server" Location="TabRowRight" ID="RibbonTabRowRight" CssClass="s4-trc-container s4-notdlg">

Для того чтобы поменять содержимое закладки “Обзор”, в главной странице следует менять содержимое тега <div id="s4-titlerow" class="s4-pr s4-notdlg s4-titlerowhidetitle">.