Фирменные фрагменты кода с использованием CSS в SharePoint

Статья
03/21/2023

Важно!

Такая расширяемость доступна только для классического интерфейса SharePoint. Эту возможность нельзя использовать вместе с современным интерфейсом в SharePoint Online, например на сайтах для общения. Мы больше не рекомендуем использовать классический интерфейс и эти методы применения фирменной символики.

Применять стиль фрагмент, переопределить стилей по умолчанию с помощью настраиваемого CSS. Идентификаторы CSS и значения выбора элементов можно использовать для переопределения стилей по умолчанию, применяемые к элементам, или можно использовать редактор HTML или средства, такие как средства разработчика F12 в Internet Explorer для идентификации и переопределения стили установленный по умолчанию.

Общие сведения о фрагментах кода стилей с использованием CSS

Преобразование HTML-главной страницы или создать макет страницы HTML, можно выполнить предварительный просмотр страницы в режиме предварительного просмотра дизайнер на сервере. На странице просмотра можно перейдите к коллекция фрагментов кода и затем скопируйте фрагментов кода HTML-файл. Фрагмент это представление HTML управления SharePoint, такие как элемент управления навигации верхнего уровня или поле поиска.

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

Примечание.

Дополнительные сведения о сопоставлении сетевого диска см. в разделе Практическое руководство. Сопоставление сетевого диска с коллекцией главных страниц SharePoint.

По умолчанию фрагменты кода наследуют свои стили из таблиц стиля SharePoint, таких как corev15.css. Чтобы стиль фрагмент, необходимо переопределить эти стили по умолчанию с помощью настраиваемого CSS. Для этого можно использовать один из описанных ниже способов.

Использование CSS идентификаторы и значения выбора элементов полностью переопределить стили по умолчанию, применяемые к выбранные элементы.
Воспользуйтесь средством браузере, например средства разработчика F12 в Internet Explorer для проверки стилей по умолчанию в режиме предварительного просмотра в диспетчере оформления на сервере и затем определите определенные стили для переопределения.
Используйте возможности редактора HTML для проверки стилей по умолчанию в режиме предварительного просмотра только для чтения фрагмент и определите определенные стили для переопределения.

Для определения стилей по умолчанию с помощью средств разработки в браузере Internet Explorer, следует использовать preview на сервере в диспетчере оформления для просмотра главной страницы HTML или макет страницы, нажмите клавишу F12 для запуска средства разработчика, выберите меню « Поиск », а затем нажмите выбрать элемент, нажмите кнопку. Это позволяет щелкните элементы на странице и посмотрите, какой точно стили, чтобы переопределить, добавив CSS для пользовательской таблицы стилей, HTML главной страницы или страницы макета ссылки на.

По умолчанию таблицы стилей SharePoint содержат множество стилей, что может затруднить поиск отдельных стилей. В качестве альтернативы для средства на основе браузера и в зависимости от редактора HTML можно проще копирование фрагмента коллекция фрагментов кода в HTML-файл и затем использовать редактор HTML для определения стилей. В коллекции фрагмент при выборе обновления и нажмите кнопку Копировать в буфер обмена, фрагмент содержит HTML-код для фрагмента. После копирования фрагмента в HTML-файл, можно проверить стилей, используемых в предварительной версии только для чтения, содержащихся в фрагменте. Таким образом, синтаксический анализ небольшому стилей по умолчанию.

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

Фрагмент кода верхней панели навигации — один из наиболее часто используемых фрагментов кода, поэтому он также является одним из наиболее часто используемых фирменных фрагментов кода. На сайте SharePoint можно выбрать параметр для использования управляемой навигации, чтобы банк терминов становится источником данных для фрагмента кода верхней панели навигации. Таким образом, можно использовать средство управления терминами хранилища в Настройках сайта для добавления или удаления терминам навигации и управления таксономии навигации, которая отображается по навигации в начало фрагмента.

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

Прежде чем использовать Дизайнер, при разработке макета HTML для главной страницы, скорее всего используется HTML и CSS для разработки элемент функциональным верхней панели навигации. В этом примере HTML используется базовая структура для верхней панели навигации: элемент<div> с идентификатором и именем класса, списком элементов навигации верхнего уровня и вложенным списком для каждого всплывающего подменю.


<div id="navigation" class="msax-Navigation">
   <ul>
      <li><a href="#">Cameras</a>
         <ul>
            <li><a href="#">Camcorders</a></li>
            <li><a href="#">Digital cameras</a></li>
            <li><a href="#">Disposable cameras</a></li>
            <li><a href="#">Film cameras</a></li>
         </ul>
      </li>
      <li><a href="#">Computers</a>
         <ul>
            <li><a href="#">Desktops</a></li>
            <li><a href="#">Laptops</a></li>
            <li><a href="#">Netbooks</a></li>
            <li><a href="#">Tablets</a></li>
         </ul>
      </li>
      <li><a href="#">Media</a>
         <ul>
            <li><a href="#">Movies</a></li>
            <li><a href="#">Music</a></li>
            <li><a href="#">TV shows </a></li>
            <li><a href="#">Video games </a></li>
         </ul>
      </li>
      <li></li>
   </ul>
</div>

Чтобы переопределить стили SharePoint по умолчанию, в HTML-файле макета добавьте стандартную ссылку на CSS-файл (<link rel="stylesheet" type="text/css" href="URLtoYourCustomCSSFile"/>) непосредственно перед закрывающим <тегом /head> .

В этих примерах HTML и CSS обратите внимание на следующее:

Элементы навигации стильируются с использованием формата .msax-Navigation ul li вместо применения классов непосредственно к тегам <ul> или <li> .
Стили используют синтаксис .msax-Navigation ul li , а не потому, что разметка фрагмента .msax-Navigation ul>li может содержать промежуточные <теги div> между выбранными элементами.
Макет HTML содержит пустой элемент <li></li> в качестве последней записи <ul> верхнего уровня. Это объясняется тем, что при включенной управляемой навигации в SharePoint добавляется команда Изменить ссылки в качестве последнего элемента навигации верхнего уровня, и конечному сайту обычно не нужно отображать этот параметр. В примере CSS используется .msax-Navigation ul li:last-child для выбора этой записи и настройки значения отображения на none. Пустой элемент <li></li> в HTML-файле — это временная подстановка для записи по умолчанию Изменить ссылки. Обратите внимание на этот конечный элемент <li>, если для вашего сайта используется управляемая навигация и в CSS используется любой селектор li:last-child.


.msax-Navigation {
margin: 10px 0px; top: 0px; position: relative;
z-index:200;
}
.msax-Navigation a {
margin: 0px; padding: 0px; border: 0px currentColor;
}
.msax-Navigation ul {
list-style: none; margin: 0px; padding: 0px; font-size: 16px; z-index:200;
}
.msax-Navigation ul li {
padding: 10px; display: inline-block; position: relative; z-index:200;
}
.msax-Navigation ul li:first-child {
margin: 0px;
}
.msax-Navigation ul li:last-child {
margin: 0px; padding: 0px; display: none;
}
.msax-Navigation ul li a.selected, .msax-Navigation ul li.selected {
background-color: rgb(58,60,62) !important;
color:rgb(255,255,255) !important;
}
.msax-Navigation ul li a {
width: 100%; color: rgb(58,60,62); font-size: 16px;
}
.msax-Navigation ul li:hover {
background-color: rgb(58,60,62);
color:rgb(255,255,255) !important;
}
.msax-Navigation ul li a:hover {
text-decoration: none;
color:rgb(255,255,255) !important;
}
.msax-Navigation li ul {
left: 0px; top: 35px; display: none; position: absolute; min-width: 100px; box-shadow: 5px 5px 10px 0px rgb(0,0,0); background-color: rgb(58,60,62);
}
.msax-Navigation li:hover ul {
display: block; z-index: 150;
}
.msax-Navigation li li {
margin: 0px; padding: 5px 10px 5px 0px; border-top-width: 0px; display: block; min-width: 100px;
}
.msax-Navigation li li:last-child {
margin: 0px; padding: 5px 10px 5px 0px; border-top-width: 0px; display: block; min-width: 100px;
}
.msax-Navigation li li a {
width: 100%; padding-left: 10px; display: block; color:rgb(255,255,255) !important;
}
.msax-Navigation li li:hover {
background-color: rgb(120, 120, 120);
}

После внедрения пользовательских стилей в макет HTML и при наличии функционального элемента верхней панели навигации выполните указанные ниже действия:

Подключите сетевой диск.
Отправьте файлы конструктора.
Преобразуйте HTML-файл в главную страницу.
Проверьте и исправьте все ошибки.
Добавьте фрагмент кода верхней панели навигации в HTML главной страницы с помощью коллекции фрагментов кода.

В коллекции фрагментов кода при настройке свойств фрагмента кода верхней панели навигации обратите внимание на следующее:

В разделе Важно в верхней части не вносите никаких изменений в свойство CssClass.
Не вносите никаких изменений в свойства в заголовке AjaxDelta, потому что эти свойства относятся к свойствам MDS, которые SharePoint использует для преобразования фрагмента кода HTML в соответствующий фрагмент кода ASP.NET. Это относится к любому фрагменту кода, а не только к фрагменту кода верхней панели навигации.
Если вы планируете переопределить стили SharePoint по умолчанию, в коллекции фрагментов кода в разделе Поведение в разделе AspMenu (может быть несколько разделов Поведение, если фрагмент кода содержит более одного элемента управления, как "делегировать управление"), установите ClientIDMode на значение Статический. Если оставить настройку ClientIDMode в значении по умолчанию, Наследовать, применяемые фрагментом кода классы CSS будут изменяться в соответствии с порядком фрагментов кода на странице. Дополнительные сведения о ClientIDMode см. в разделе Свойство Control.ClientIDMode.

Например, по умолчанию в элементе управления верхней панели навигации используются атрибуты идентификатора SharePoint по умолчанию, такие как zz5_TopNavigationMenu и zz6_RootAspMenu. При изменении ClientIDMode на значение Статический вы сможете использовать эти идентификаторы по умолчанию в качестве селекторов в собственных CSS для переопределения стандартных стилей SharePoint.
Некоторые свойства уже настроены таким образом, чтобы облегчить создание фирменной символики для фрагмента кода верхней панели навигации, избегая динамического поведения CSS и JavaScript по умолчанию (например, по умолчанию UseSimpleRendering имеет значение Истина и MaximumDynamicDisplayLevels установлено на 0). Дополнительные сведения о конкретных свойствах верхнего фрагмента навигации см. в разделах Свойства AspMenu и Свойства меню.

После настройки фрагмента кода верхней панели навигации в коллекции фрагментов нажмите кнопку Обновитьи выберите пункт Копировать в буфер обмена. На главной странице HTML удалите содержимое навигации<div id="navigation" class="msax-Navigation">, содержащей элемент управления макетом (удалите только содержимое тега <div>, а не <самого тега div>), а затем скопируйте фрагмент в раздел> навигации< div. При необходимости переместите раздел> навигации<, как правило, сразу после начала тега<div id="s4-bodyContainer">, но до div,<>PlaceHolderMainсодержащего .

Для удобства сравнения с HTML элемента навигации <div> выше следующий пример содержит часть элемента <div> панели навигации фрагмента кода верхней панели навигации. Обратите внимание на то, что это не весь фрагмент кода.


<div id="zz7_TopNavigationMenu" class=" noindex ms-core-listMenu-horizontalBox">
     <ul id="zz9_RootAspMenu" class="root ms-core-listMenu-root static">
          <li class="static">
          <a accesskey="1" class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/cameras" tabindex="0">
          <span class="additional-background ms-navedit-flyoutArrow">
          <span class="menu-item-text">Cameras</span></span></a><ul class="static">
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/cameras/camcorders" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Camcorders</span></span></a></li>
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/cameras/digital-cameras" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Digital cameras</span></span></a></li>
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/cameras/disposable-cameras" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Disposable cameras</span></span></a></li>
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/cameras/film-cameras" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Film cameras</span></span></a></li>
          </ul>
          </li>
          <li class="static">
          <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/computers" tabindex="0">
          <span class="additional-background ms-navedit-flyoutArrow">
          <span class="menu-item-text">Computers</span></span></a><ul class="static">
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/computers/desktops" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Desktops</span></span></a></li>
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/computers/laptops" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Laptops</span></span></a></li>
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/computers/netbooks" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Netbooks</span></span></a></li>
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/computers/tablets" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Tablets</span></span></a></li>
          </ul>
          </li>
          <li class="static">
          <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/media" tabindex="0">
          <span class="additional-background ms-navedit-flyoutArrow">
          <span class="menu-item-text">Media</span></span></a><ul class="static">
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/media/movies" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Movies</span></span></a></li>
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/media/music" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Music</span></span></a></li>
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/media/tv-shows" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">TV shows</span></span></a></li>
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/media/video-games" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Video games</span></span></a></li>
          </ul>
          </li>
          <li class="static ms-verticalAlignTop ms-listMenu-editLink ms-navedit-editArea">
          <span id="zz7_TopNavigationMenu_NavMenu_Edit" class="ms-navedit-editSpan">
          <a id="zz7_TopNavigationMenu_NavMenu_EditLinks" class="ms-navedit-editLinksText" href="#" onclick="g_QuickLaunchMenu = null; EnsureScriptParams('quicklaunch.js', 'QuickLaunchInitEditMode', 'zz7_TopNavigationMenu', 2, 0, 0, ''); cancelDefault(event); return false;">
          <span class="ms-displayInlineBlock">
          <span class="ms-navedit-editLinksIconWrapper ms-verticalAlignMiddle">
          <img class="ms-navedit-editLinksIcon" src="/_layouts/15/images/spcommon.png?rev=23" /></span><span class="ms-metadata ms-verticalAlignMiddle">Edit Links</span></span></a><span id="zz7_TopNavigationMenu_NavMenu_Loading" class="ms-navedit-menuLoading ms-hide"><a id="zz7_TopNavigationMenu_NavMenu_GearsLink" href="#" onclick="HideGears(); return false;" title="This animation indicates the operation is in progress. Click to remove this animated image."><img id="zz7_TopNavigationMenu_NavMenu_GearsImage" src="/_layouts/15/images/loadingcirclests16.gif?rev=23" /></a></span><div id="zz7_TopNavigationMenu_NavMenu_ErrorMsg" class="ms-navedit-errorMsg">
          </div>
          </span></li>
     </ul>
</div>

Вместо применения только пользовательских стилей вы можете иметь сценарий, в котором требуется переопределить только определенный стиль. Например, чтобы скрыть узел Изменить ссылки, можно создать пользовательский стиль, в котором будет использоваться идентификатор по умолчанию zz7_TopNavigationMenu_NavMenu_Edit для настройки параметра отображения на значение none.

Поделиться через

Фирменные фрагменты кода с использованием CSS в SharePoint

Общие сведения о фрагментах кода стилей с использованием CSS

Пример: стиль фрагмента кода верхней панели навигации

Пример 1. элемент <div> панели навигации из файла макета HTML

Образец 2: элемент <div> панели навигации со стилем из пользовательской CSS

Образец 3: предварительный просмотр "только для чтения" фрагмента кода панели навигации в верхней части

См. также

Дополнительные ресурсы