Всем привет. В этой статье я попытаюсь сжато изобразить, как можно изменить дизайн сайта sharepoint 2010. Это ознакомительная статья, где достаточно поверхностно будут описаны некоторые шаги и приемы для брендирования сайта sharepoint.
Для демонстрации возьмем бесплатный html / css шаблон, который, затем "натянем" на наш портал.
Итак, к чему будем стремится мы уже определились, а вот с чего мы начнем:
Для начала в SharePoint Designer создадим пустой файл .css
Затем, скопируем в него содержимое загруженного фала variant-trio.css
Далее в Библиотеке Стилей создадим папку Image и с помощью web-интерфейса Sharepoint загрузим изображения из нашего шаблона.
Перетаскиваем файлы из папки с шаблоном в форму sharepoint
После мы увидим загруженные изображения в sharepoint designer.
Теперь изменим немного наш variant.css, т.к. background нашей страницы прописан в таблице стилей, то необходимо изменить путь к изображению. Для этого в адресной строке браузера, находясь в библиотеке стилей, где хранятся наши изображения (папка image) скопируем URL библиотеки
Используя полученный url откорректируем пути в файле .css, т.е. изменим
background:#f0f0f0 url(background.jpg)
на
background:#f0f0f0 url(../Style%20Library/Image/background.jpg)
Это мы проделали для фонового изображения нашей страницы. Сейчас обратим внимание, что для шапки изображение определено непосредственно в HTML. Я хочу перенести этот параметр в таблицу стилей, для чего заменю следующую часть кода:
#headerimage {
clear:both;
width:980px;
height:200px;
margin:0 0 15px 0;
overflow:hidden;
border:2px solid #ddd;
}
на вот такую
.headerimage {
clear:both;
width:980px;
height:200px;
margin:0 0 15px 0;
overflow:hidden;
border:2px solid #ddd;
background: url(../Style%20Library/Image/header.jpg);
}
Соответственно в HTML коде для шапки необходимо использовать класс .headerimage из таблицы стилей.
Теперь переключимся на нашу мастер страницу
и присоединим к ней таблицу стилей
после чего появится ссылка в мастер странице
Теперь переключимся на нашу мастер страницу
и присоединим к ней таблицу стилей
после чего появится ссылка в мастер странице
<link href="/sites/team/Style%20Library/variant.css" rel="stylesheet" type="text/css"/>
Итак, начнем пытаться менять дизайн. Сперва приступим к шапке. Как можно поступить дальше? Можно в sharepoint designer, используя конструктор, определять какой кусок кода к какому элементу страницы относится и затем менять его, но мне кажется, что достаточно удобно будет использовать developer tools браузера, чтобы находить где какой кусок кода и какой класс css чему соответствует.
Я хочу вместо выделенной области вставить шапку из шаблона. Поместим выделенный фрагмент sharepoint в блок <asp:panel> и сделаем его скрытым.
Т.е. должно получиться следующее:
<asp:Panel runat="server" Visible="false"> <div class="s4-title s4-lp"> ... ... ... </div> </asp:Panel>
Сохраним изменения и после обновления страницы в браузере мы увидим, что наша шапка исчезла.
Теперь из нашего шаблона вставим кусок кода, который отвечает за шапку страницы, в мастер страницу sharepoint
<div class="headerimage">
</div>
Размер картинки не соответствует странице, так что смотрится весьма кривовато, но это мы потом исправим.
Сейчас займемся меню.
С помощью developer tools браузера находим меню навигации
Сейчас займемся меню.
С помощью developer tools браузера находим меню навигации
<div class="s4-lp s4-toplinks">
Теперь в мастер странице найдем компонент, являющийся меню
<SharePoint:AspMenu ID="TopNavigationMenuV4" Runat="server" EnableViewState="false" DataSourceID="topSiteMap" AccessKey="<%$Resources:wss,navigation_accesskey%>" UseSimpleRendering="true" UseSeparateCss="false" Orientation="Horizontal" StaticDisplayLevels="2" MaximumDynamicDisplayLevels="1" SkipLinkText="" CssClass="s4-tn"/>
Как видим - это ASP controll (AspMenu), который использует css класс "s4-tn". Что же, заменим это значение на класс из нашего шаблона "topmenu", предварительно откорректировав файл variant.css:
#topmenu {text-align:right;margin-top:-40px;}
#topmenu p {font-size:1.3em; line-height:1.9em; color:#555; margin:0 0 15px 0;}
#topmenu a {padding:6px 8px 5px 8px; font-weight:400; margin:0 0 0 2px; color:#555;}
#topmenu a:hover {background-color:#eee; color:#222; text-decoration:none;}
#topmenu a.active {background-color:#a13538; color:#fff;}
#topmenu a.active:hover {background-color:#a13538; color:#fff;}
заменим на вот такое:
.topmenu {text-align:right;margin-top:0px;}
.topmenu p {font-size:1.3em; line-height:1.9em; color:#555; margin:0 0 15px 0;}
.topmenu a {padding:6px 8px 5px 8px; font-weight:400; margin:0 0 0 2px; color:#555;}
.topmenu a:hover {background-color:#eee; color:#222; text-decoration:none;}
.topmenu a.active {background-color:#a13538; color:#fff;}
.topmenu a.active:hover {background-color:#a13538; color:#fff;}
Сохраняем все изменение в sharepoint designer и обновляем страницу в браузере. Как видим, наша кнопка изменилась, но не совсем она такая, как в скачанном шаблоне. Это из-за того, что меню в шаблоне построено с использованием простых ссылок <a href="URL">, а в sharepoint используется список <ul><li></li></ul>. Мне, откровенно говоря, лень переделывать шаблон HTML, но не смотря на это, рассмотрим немного подробнее как устроено меню навигации.
Следующие классы .css используется для описания стилей меню навигации (COREV4.CSS):
.menu ul,.menu li
{
margin:0;
padding:0;
}
.menu-horizontal li.static,
.menu-horizontal a.static,
.menu-horizontal span.static
{
float:left;
}
.s4-tn li.static > .menu-item{
/* [ReplaceColor(themeColor:"Dark2")] */ color:#3b4f65;
white-space:nowrap;
border:1px solid transparent;
padding:4px 10px;
display:inline-block;
height:15px;
vertical-align:middle;
}
Следовательно, вполне разумно будет напрямую вносить изменения здесь либо копировать классы от сюда и переопределять их в своих стилях.
Идем дальше! Давайте все-таки сделаем меню другим, например, вот таким
Скопируем из basic-noise.css следующие строки:
#menu{height:40px;}
#menu ul{height:40px;list-style:none;margin:0;padding:0 25px 0 0;}
#menu ul li{background-color:#333;display:block;float:left;margin:0 5px 0 0;padding:0;}
#menu ul li a{background-color:#333;color:#ddd;display:block;font-size:1.4em;padding:10px 12px;text-decoration:none;}
#menu ul li a:hover{color:#fff;}
#menu ul li a.current{background-color:#eee;color:#333;border-bottom:1px solid #eee;}
и заменим на следующий код:
.navmenu{height:40px;}
.navmenu ul{height:40px;list-style:none;margin:0;padding:0 25px 0 0;}
.navmenu ul li{background-color:#333;display:block;float:left;margin:0 5px 0 0;padding:0;}
.navmenu ul li a{background-color:#333;color:#ddd;display:block;font-size:1.4em;padding:10px 12px;text-decoration:none;}
.navmenu ul li a:hover{color:#fff;}
.navmenu ul li a.current{background-color:#eee;color:#333;border-bottom:1px solid #eee;}
Т.е. мы будем использовать класс .navmenu для стилизации меню навигации. Вставим вновь полученные классы в файл variant.css, изменим в SharePoint:AspMenu CssClass на navmenu, сохраним изменения и обновим страницу в браузере. Теперь что-то похожее на правду.
Можно посмотреть в developers tools какие стили применяются к меню.
Теперь хорошая новость, если добавить новые дочерние сайты, то стили для вновь созданных пунктов меню, будут применяться автоматически (вот какая вот неожиданность)
Теперь хочу вернуться к общему виду нашей страницы, после присоединения variant.css ее немного перекособочило. Для начала я в контейнере body (variant.css) удалил все стили, кроме backgound, так что теперь он выглядит так:
/* Main containers */
body {
background:#f0f0f0 url(../Style%20Library/Image/background.jpg) top center no-repeat;
}
На данный момент наша страница выглядит следующим образом:
Первое, что бросается в глаза - изображение в шапке (нужно его сделать соответствующего странице размера), а также прозрачность фона, который просвечивается под боковым меню.
Сейчас мы займемся тем, что отцентрируем содержимое нашей страницы. Используя developers tools броузера, мы можем увидеть, что основной странице соответствуют следующие стили s4-workspace
body #s4-workspace{
overflow-y:scroll;
overflow-x:auto;
position:relative;
left:0px;
}
Добавим следующий код в библиотеку стилей variant.css:
#s4-workspace{
max-width:1000px;
margin:0 auto;
padding:0px;
background-color:white;
}
Теперь наша страница будет выглядеть так:
Обратите внимание на scroll bar и ribbon, с фоном теперь все отлично. Можно пойти по следующему пути - опять-таки, с помощь developer tools определим стиль ленты
Добавим следующий код в variant.css:
#s4-ribbonrow
{
max-width:1000px;
margin:0 auto;
padding:0px;
background-color:white;
}
Получим следующий вид:
Как видим, наши #s4-ribbonrow и
#s4-workspace одинаковы, поэтому немного оптимизируем код следующим образом:
#s4-workspace, #s4-ribbonrow{
max-width:1000px;
margin:0 auto;
padding:0px;
background-color:white;
}
На данный момент мы сделали тот минимум, который наметили с самого начала - header, navigation menu, background.
Я считаю, что задача минимум реализована. Мы разобрались с базовыми принципами изменения дизайна основных элементов страницы, как применять собственные стили к тем или иным элементам страницы. Конечно же это далеко не все, а лишь малая часть того, что можно сделать, но именно такая цель и стояла с самого начала. Я надеюсь, что в следующих публикациях я рассмотрю более сложные моменты брендирования, обхавытающие большее число элементов интерфейса.
Комментариев нет:
Отправить комментарий