Создание тем для сайтов Sharepoint используя CSS
Темы – самый простой и быстрый, но наименее гибкий способ изменения внешнего вида сайта Sharepoint. Поэтому, если задача стоит слегка перекрасить портал – сделайте это темами. Для того, чтобы создать свою первую тему не требуется глубоких знаний в сайтостроении или архитектуре Sharepoint. Достаточно будет знания CSS. Применить готовую тему можно через веб интерфейс Sharepoint. Страница с выбором темы выглядит следующим образом.
Темы применяются для каждого сайта Sharepoint отдельно и делается это действие администратором.
Давайте создадим первую в своей жизни тему. На сервере SharePoint перейдите в папку "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES". В ней располагаются все стандартные темы Sharepoint. Скопируйте например папку с темой "SIMPLE". Переименуйте её на ваше усмотрение. Например "HABR".
В папке " HABR" удалите все изображения и переименуйте файл SIMPLE.INF в HABR.INF. Откройте HABR.INF и замените везде "Simple" на "HABR".
Перейдите в папку "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\" и отредактируете SPTHEMES.XML добавив выделенный текст:
Ну вот и всё. Мы создали тему. Теперь вооружаемся чем-нибудь типа Internet Explorer Developer Toolbar или любым другим add-on’ом для браузера, позволяющим работать с CSS. Кстати в IE8 есть встроенная консоль для разработчиков, обладающая нужными нам возможностями.
Итак, давайте изменим логотип и перекрасим выпадающее меню Site Action.
Напишем в theme.css следующее:
#siteactiontd div, .ms-siteactionsmenu div{
background-image: none !important;
background-color: #86C5EA !important;
font-family: Arial !important;
font-size: 12px;
}
td.ms-sitetitle {
width: 240px;
height: 130px;
background: 0 5px no-repeat url(habr_logo.gif);
}
h1.ms-sitetitle, td.ms-titleimagearea {
display: none;
}
Используйте !important, когда идет речь о переопределении.
Применим тему к сайту зайдя на страницу Site Actions / Site Settings / Site Theme.
Как видите, «раскрасить» портал – это просто! Спустя не более 20 минут у меня получился такой вот результат:
