Pull to refresh

Создание тем для сайтов Sharepoint с использованием CSS

Reading time2 min
Views4.5K
Темы – самый простой и быстрый, но наименее гибкий способ изменения внешнего вида сайта 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 минут у меня получился такой вот результат:


Tags:
Hubs:
+15
Comments13

Articles

Change theme settings