Подчеркивание стиля с помощью использования тем SharePoint

Article
11/27/2012

Исходная статья опубликована во вторник, 30 октября 2012 г.

Лайонел Робинсон (Lionel Robinson) является является руководителем программы инженерной группы SharePoint и работает над взаимодействием с пользователем.

Использование тем в SharePoint 2013 значительно упрощает изменение внешнего вида сайта для придания ему индивидуальных черт. Однако новый вид сайтов SharePoint просто замечательный, зачем может потребоваться его изменять? Вот отдельный пример:

После рождения близнецов я просто перестал помещаться в водительское кресло машины из-за установленных детских кресел. Даже в пассажирском кресле, сидя наискосок, я упирался коленями. Пришло время для машины побольше. В детстве мою жену и меня много возили на мини-фургонах, поэтому мы просто обомлели, наткнувшись на модель, которую хотели, с подходящей расцветкой и комплектацией. В нее помещалась вся семья и еще несколько тонн груза. Это было здорово!

Возможно это было связано психологическими закономерностями, но с того самого дня мне начало казаться, что каждая третья машина на дороге похожа на мою Honda Odyssey цвета светло-голубой металлик. Однажды на парковке я нажал кнопку разблокировки дверей на брелоке и только потом понял, что моя машина стоит в двух пролетах от этого места.

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

Мы встречали несколько клиентов, у которых аналогичная проблема возникала с имеющимися сайтами SharePoint. Когда все вокруг используют одни и те же шаблоны, Интернет может наводнить огромное количество поразительно одинаковых сайтов. Вы можете игнорировать это и надеяться придать сайтам некоторую индивидуальность незначительными отличиями (как наклейка на бампере), либо вам потребуется использовать CSS и HTML для настройки сайта, что может оказаться утомительным и долгим процессом.

Именно такие проблемы и призваны решить новые темы SharePoint. Благодаря этой возможности вы можете настроить свой сайт за считанные минуты, "играя" следующими четырьмя базовыми характеристиками: цветами, разметкой сайта, шрифтами и фоновым рисунком. Изменяя их, вы можете добиться действительно уникального внешнего вида.

Краткое руководство

В области "Getting started with your site” (Приступая к работе с сайтом) щелкните плитку "What's your style?" (Какой стиль предпочитаете вы?). (Если эти плитки скрыты, вы можете также щелкнуть элемент "Change the look" (Изменить внешний вид) в меню параметров или найти элемент "Change the look" (Изменить внешний вид) в параметрах сайта под заголовком "Look and Feel" (Внешний вид и функции).)
На первой странице показано несколько начальных точек, которые мы собрали вместе только для того, чтобы показать вам всю широту возможностей по настройке внешнего вида и удобства использования сайта. Выберите любой из этих параметров, чтобы начать.
Вот теперь начинается самое интересное. Вы можете изменить каждую из четырех указанных ранее характеристик (фоновый рисунок, разметка, цвета и шрифты), при этом мгновенно изменяется и предварительный просмотр. Перетащите свой фоновый рисунок на прямоугольник в левом верхнем углу, выберите соответствующую цветовую палитру, выберите разметку сайта и шрифтовую схему, точнее всего отражающие вашу индивидуальность.
После выбора требуемого сочетания параметров щелкните "Try it out" (Попробовать) (в правом верхнем углу), чтобы применить его к предварительному просмотру своего сайта.
А вот здесь происходит волшебство! Создается копия CSS (файлы, отвечающие за внешний вид и форматирование) вашего сайта, в которой цвета и изображения заменяются на новые. После просмотра можно сохранить эту копию или повторить попытку.

Хотите использовать определенный цвет или шрифт?

Мы включили понравившиеся нам шрифты и набор цветовых палитр. Но вы всегда можете добавить свои собственные. Для этого вам требуется всего лишь любимый текстовый редактор. Сейчас описание станет немного более техническим (если вы уже знакомы с темами в SharePoint 2010, значит у вас фора). Главное различие состоит в том, что мы больше не используем формат файлов THMX. Мы создали для описания параметров тем набор новых и простых форматов XML: файлы SPColor описывают цветовую палитру, а файлы SPFont — шрифтовую схему. Самый простой способ создания собственных палитр и шрифтовых схем заключается в том, чтобы начать работу со значениями по умолчанию на сайте группы . Перейдите на корневой сайт семейства, щелкните элемент "site settings" (параметры сайта) в меню параметров и затем элемент "theme gallery" (коллекция тем). Цветовые палитры и шрифтовые схемы находятся в папке с именем "15".

Цветовые палитры

Каждый файл SPColor содержит простой XML-код, в шестнадцатеричном формате определяющий значение цвета для каждой из доступных ячеек цветов. Если вы знаете, какую ячейку цвета хотите изменить, просто введите новое значение и сохраните копию файла в той же папке коллекции тем (если включено управление версиями или публикация, обязательно верните и опубликуйте этот файл). Ваша новая палитра становится доступна в компоненте выбора цвета интерфейса тем (упомянутое ранее действие 3).

Ниже приведен фрагмент файла SPColor. Кроме того, в данном выпуске впервые появилась возможность указывать вместе с цветом значения непрозрачности. Вы можете сделать это, используя 8-значное шестнадцатеричное значение, в котором две первые цифры обозначают непрозрачность, после чего следуют 6 цифр, традиционно представляющих значения для красного, зеленого и синего цветов.

<?xml version="1.0" encoding="utf-8"?>

<s:colorPalette isInverted="false" previewSlot1="BackgroundOverlay" previewSlot2="BodyText" previewSlot3="AccentText" xmlns:s="https://schemas.microsoft.com/sharepoint/">

<s:color name="BodyText" value="444444" />

<s:color name="SubtleBodyText" value="777777" />

<s:color name="StrongBodyText" value="262626" />

<s:color name="DisabledText" value="B1B1B1" />

<s:color name="SiteTitle" value="262626" />

<s:color name="WebPartHeading" value="444444" />

<s:color name="ErrorText" value="BF0000" />

<s:color name="AccentText" value="0072C6" />

<s:color name="SearchURL" value="338200" />

<s:color name="Hyperlink" value="0072C6" />

<s:color name="BackgroundOverlay" value="D8FFFFFF" />

...

</s:colorPalette>

Шрифтовые схемы

Шрифты могут придать сайту заметную индивидуальность. Одной из замечательных особенностей использования тем в SharePoint является поддержка веб-шрифтов. Перед использованием данного компонента вам необходимо выбрать один из 8–10 старых шрифтов, которые допустимо использовать на веб-сайтах (эти шрифты по умолчанию установлены почти на всех устройствах — Arial, Times New Roman и Georgia). Благодаря веб-шрифтам вам становится доступно огромное количество шрифтов в Интернете — после выбора шрифта необходимые файлы загружаются веб-браузерами вместе с оставшейся частью страницы.

Аналогично файлу SPColor для цветовых палитр, файл SPFont определяет шрифт, используемый для каждой из доступных ячеек шрифтов. Самый простой способ создания настраиваемой шрифтовой схемы заключается в том, чтобы начать с уже доступной схемы и вносить требуемые корректировки. SharePoint поддерживает множество языков и скриптов, поэтому такая поддержка действует и для тем шрифтов. Для каждой ячейки шрифта вам следует задать шрифт, который будет использоваться в каждом скрипте. Для шрифтов, которые допустимо использовать на веб-сайтах, просто включите имя в атрибут гарнитуры шрифта для каждой ячейки шрифта. Если вы хотите указать веб-шрифт, потребуется указать URL-адрес для его файлов в четырех форматах (для поддержки в разных браузерах), а также мелкий и крупный эскиз, используемый для отрисовки названий шрифта в средстве выбора шрифта (см. упомянутое ранее действие 3).

<?xml version="1.0" encoding="utf-8"?>

<s:fontScheme name="Impact" previewSlot1="title" previewSlot2="body" xmlns:s="https://schemas.microsoft.com/sharepoint/">

<s:fontSlots>

<s:fontSlot name="title">

<s:latin typeface="Impact"

eotsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.eot"

woffsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.woff"

ttfsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.ttf"

svgsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.svg"

largeimgsrc="https://blogs.msdn.com/_layouts/15/fonts/ImpactLarge.png"

smallimgsrc="https://blogs.msdn.com/_layouts/15/fonts/ImpactSmall.png" />

...

<s:font script="Arab" typeface="Segoe UI Light" />

<s:font script="Deva" typeface="Nirmala UI" />

<s:font script="Grek" typeface="Segoe UI Light" />

...

</s:fontSlot>

<s:fontSlot name="navigation">

<s:latin typeface="Segoe UI" />

...

<s:font script="Arab" typeface="Segoe UI" />

<s:font script="Deva" typeface="Nirmala UI" />

<s:font script="Grek" typeface="Segoe UI" />

...

</s:fontSlot>

...

</s:fontSlots>

</s:fontScheme>

Готовый внешний вид

Элементы "Composed looks" (Готовый внешний вид) являются начальными точками при работе с интерфейсом тем. Вы можете добавлять такие элементы, использующие ваши собственные цветовые палитры и шрифтовые схемы. Очень удобно сохранить несколько дизайнов, чтобы их можно было применить впоследствии. Список готовых внешних видов находится в области "Web Designer Galleries" (Коллекции веб-дизайнера) раздела "Site Settings" (Параметры сайта). Вы можете управлять имеющимися внешними видами и добавлять новые. Чтобы добавить внешний вид, просто добавьте новый элемент списка и заполните его имя, заголовок и URL-адреса на главной странице, файл SPColor, фоновый рисунок (необязательно) и файл SPFont (необязательно). После добавления этого элемента списка в качестве начальной точки страницы "Change the look" (Изменение внешнего вида) добавляется предварительный просмотр для нового готового внешнего вида.

Не мешкайте! Создайте для сайтов привлекательный внешний вид, отразите уникальность своей группы и подчеркните свою индивидуальность. Если бы я мог сделать то же самое со своим мини-фургоном.

Это локализованная запись блога. Оригинал статьи находится на странице Show Off Your Style with SharePoint Theming