Стилизация Дерева страниц

Дерево страниц — это древовидная структура, которую читатели видят слева от контента страницы. Это механизм навигации для читателей.

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

• Иконки элементов Дерева страниц в свойствах страницы
• Иконки элементов Дерева страниц в CSS-файле брендинга документации

Иконки элементов Дерева страниц в свойствах страницы

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

• Перейдите в Свойства страницы. Для этого просто наведите курсор мыши на элемент и щелкните по элементу, отмеченному на скриншоте. Затем нажмите Свойства...
  
  
• В разделе Общее в Свойствах найдите настройки Иконок элементов Дерева страниц.
  
  
• Щелкните на втором элементе рядом с иконкой, которую нужно изменить, чтобы загрузить в Хранилище собственное изображение иконки с ПК или выбрать существующее.
  
  
• В появившемся диалоговом окне нажмите Найти..., найдите на своем ПК нужную иконку, нажмите OK, а затем Загрузить или просто перетащите файл. Изображение появится в Хранилище.
   
  
• Выберите ее в диалоговом окне и нажмите OK. Теперь новую иконку можно увидеть в разделе Иконки элементов Дерева страниц.
           
  
• Сохраните изменения (нажмите кнопку Сохранить изменения внизу страницы) и обратите внимание, что в вашем Дереве страниц изменилась иконка по умолчанию. 
  
  
• Чтобы использовать иконки по умолчанию, щелкните на элементе Удалить пользовательскую иконку и сохраните изменения. Иконки по умолчанию будут восстановлены.
  
  

Иконки элементов Дерева страниц в CSS-файл брендинга документации

Как видно на скриншоте выше, мы изменили иконку только для одной страницы, остальные иконки остались по умолчанию.

Когда для иконок страниц установлено значение По умолчанию, их можно также переопределить в файле Branding.css: это файл стилей, который можно использовать для брендирования многих элементов на портале документации. Имя файла можно задать в настройках портала (Настройки портала → Внешний вид → Читательский интерфейс).

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

Перейдите в хранилище файлов в левой части страницы и выберите там вкладку Стили.

Здесь находится файл Branding.css . Щелкните Просмотр файла, чтобы открыть его в редакторе.

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

.TocTree_tocNode.TocTreeLight_imgTopic
{
  /* Uncomment the following lines to replace the default topic icon with an icon from Storage */
  /* background-image: URL('/resources/Storage/info.png') !important */
}

Давайте продолжим и внесем дальнейшие изменения:

.TocTree_tocNode.TocTreeLight_imgTopic
{
  /* Uncomment the following lines to replace the default topic icon with an icon from Storage */
  background-image: URL('/resources/Storage/info.png') !important
}

Теперь необходимо ввести путь к загруженному изображению и сохранить изменения.

.TocTree_tocNode.TocTreeLight_imgTopic
{
  /* Uncomment the following lines to replace the default topic icon with an icon from Storage */
  background-image: URL('/resources/Storage/doc.png') !important
}

Мы только что глобально изменили иконки по умолчанию страниц портала. Обратите внимание, что CSS-файл брендинга применяется только для читательского интерфейса — вошедшие в систему авторы не видят изменений интерфейса, внесенных с помощью этого файла. Таким образом, чтобы увидеть изменение иконок, нам необходимо иметь публикацию на портале, чтобы мы могли выйти из системы и открыть публикацию (или открыть ее в другом браузере).

Сделав это и проверив дерево страниц в качестве читателя, мы увидим измененные иконок страниц:

Подробнее о брендинге и стилизации в системе Документерра:

• Домашняя страница
• Настройки читательского интерфейса
• Шаблоны читательского интерфейса
• Заголовок и футер страницы
• Расширенный брендинг с помощью CSS