---
title: "Способы работы с редактором меню читателя"
id: "sposoby-raboty-s-redaktorom-menu-chitatelya"
project: "Руководство пользователя Документерры"
url: "https://docs.documenterra.ru/articles/manual/sposoby-raboty-s-redaktorom-menu-chitatelya"
updated: 2026-11-06T08:56:17Z
---

# Способы работы с редактором меню читателя

Вот несколько сценариев, которые помогут вам эффективнее работать с [Редактором меню читателя](/articles/manual/redaktor-menyu-chitatelya):

* [Сценарий №1 — Как добавить пункт меню в виде изображения](/articles/manual/sposoby-raboty-s-redaktorom-menu-chitatelya/a/h2_812104109)
* [Сценарий №2 — Как создать кнопку](/articles/manual/sposoby-raboty-s-redaktorom-menu-chitatelya/a/h2__1624311885)
* [Сценарий №3 — Как изменить цвет пунктов меню](/articles/manual/sposoby-raboty-s-redaktorom-menu-chitatelya/a/h2_241415998)
* [Сценарий №4 — Как выровнять пункты меню по центру](/articles/manual/sposoby-raboty-s-redaktorom-menu-chitatelya/a/h2_1075711739)
* [Сценарий №5 — Как выровнять пункты меню по центру между логотипом и другими элементами](/articles/manual/sposoby-raboty-s-redaktorom-menu-chitatelya/a/h2__696236262)

## Сценарий №1 — Как добавить пункт меню в виде изображения

1. Загрузка изображения.
    1. Загрузите нужное изображение в [Хранилище файлов](/articles/manual/hranilishye-faylov) (например, в папку **Branding**).
    2. Скопируйте ссылку на загруженный файл.![Ссылка на загруженное изображение в Хранилище файлов.](/resources/Storage/manual/varianty-ispolzovaniya-redaktora-menyu-chitatelya/copy_image_link.png)
2. Настройка пункта меню в редакторе 
    1. Перейдите в **Настройки → Внешний вид → Меню читателя**.
    2. В редакторе меню выберите пункт, который необходимо визуализировать в виде изображения. ![Пункт меню, который будет заменён на изображение.](/resources/Storage/manual/varianty-ispolzovaniya-redaktora-menyu-chitatelya/reader_menu_item.png)
    3. Удалите текстовое название пункта, оставив поле пустым. ![Пустое поле "Текст" в редакторе меню читателя](/resources/Storage/manual/varianty-ispolzovaniya-redaktora-menyu-chitatelya/empty_menu_item_text.png)
    4. Заполните поле **CSS-класс**. В нашем случае это будет menuItemHome.![CSS-класс пункта меню в редакторе.](/resources/Storage/manual/varianty-ispolzovaniya-redaktora-menyu-chitatelya/menu_item_css_class.png)
    5. Нажмите **Сохранить**.
3. Добавление стилей
    1. Перейдите в **Настройки → Внешний вид → Читательский интерфейс**.
    2. Откройте CSS-файл, который используется для брендинга вашего портала.![Откройте Брендинг CSS-файл вашего портала.](/resources/Storage/manual/varianty-ispolzovaniya-redaktora-menyu-chitatelya/branding_css_file.png)
    3. Добавьте в него следующий код, предварительно заменив /resources/Storage/Branding/home.png на скопированную ранее ссылку: 

```css
.menuItemHome
{
    background-image: url(/resources/Storage/Branding/home.png);
    background-repeat: no-repeat;
    width: 32px;
    background-position: center;
}
```

    4. Сохраните изменения в файле.

После применения стилей текстовый пункт меню будет заменен на заданное изображение:

![Изображение в меню читателя.](/resources/Storage/manual/varianty-ispolzovaniya-redaktora-menyu-chitatelya/home_image_in_readermenu.png)

## Сценарий №2 — Как создать кнопку

1. Перейдите в **Настройки → Внешний вид → Меню читателя**.
2. Выберите пункт меню, который необходимо стилизовать. В данном примере мы будем работать с пунктом **Домашняя**. ![Выбранный для стилизации пункт меню.](/resources/Storage/manual/varianty-ispolzovaniya-redaktora-menyu-chitatelya/home_menu_item.png)
3. Задайте свой CSS-класс. В нашем случае это будет menuItemHome.![Пункт меню с добавленным CSS-классом.](/resources/Storage/manual/varianty-ispolzovaniya-redaktora-menyu-chitatelya/css_class_of_menuitem.png)
4. Нажмите **Сохранить**.
5. Перейдите в **Настройки → Внешний вид → Читательский интерфейс**.
6. Откройте CSS-файл, используемый для брендинга вашего портала.
7. Скопируйте и вставьте следующий код:

```css
.menuItemHome:hover
{
  background: transparent !important;
}

.menuItemHome a
{ 
  background: #ff752d !important;
  color: white !important; 
  transition: background-color .1s !important;
  border-radius: 3px;
  padding: 10px !important;
  display: inline !important;
}

.menuItemHome a:hover
{
  background-color: #FF6D2D !important;
}
```


После применения стилей выбранный пункт меню будет отображаться в виде стилизованной кнопки:

![Результат стилизации пункта меню.](/resources/Storage/manual/varianty-ispolzovaniya-redaktora-menyu-chitatelya/menu_item_button.gif)

## Сценарий №3 — Как изменить цвет пунктов меню

1. Перейдите в **Настройки → Внешний вид → Меню читателя**.
2. Для каждого из пунктов меню задайте уникальный CSS-класс. В нашем примере мы задали класс menuItemHome для пункта **Домашняя**, для остальных - по аналогии. ![Заданный CSS-класс для пункта меню.](/resources/Storage/manual/varianty-ispolzovaniya-redaktora-menyu-chitatelya/menu_items_css_classes.gif)
3. Перейдите в **Настройки → Внешний вид → Читательский интерфейс**.
4. Откройте CSS-файл, используемый для брендинга вашего портала.
5. Скопируйте приведенный ниже код, заменив классы в нем на ваши, и вставьте в файл:

```css
.menuItemHome a
{
  color: #00695c !important;
}

.menuItemHome:hover a
{
  color: white !important;
  background-color: #00695c !important;
}

.menuItemUserManual a
{
  color: #0277bd !important;
}

.menuItemUserManual:hover a
{
  color: white !important;
  background-color: #0277bd !important;
}

.menuItemApiDocs a
{
  color: #283593 !important;
}

.menuItemApiDocs:hover a
{
  color: white !important;
  background-color: #283593 !important;
}

.menuItemKb a
{
  color: #6a1b9a !important;
}

.menuItemKb:hover a
{
  color: white !important;
  background-color: #6a1b9a !important;
}

.menuItemSupport a
{
  color: #bf360c !important;
}

.menuItemSupport:hover a
{
  color: white !important;
  background-color: #bf360c !important;
}
```


Результат после применения стилей:

![Результат стилизации.](/resources/Storage/manual/varianty-ispolzovaniya-redaktora-menyu-chitatelya/colorized_menu_items.gif)

## Сценарий №4 — Как выровнять пункты меню по центру

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

1. Перейдите в **Настройки → Внешний вид → Читательский интерфейс.**
2. Откройте CSS-файл, используемый для брендинга вашего портала и вставьте следующий код:


```css
.BaseMaster_mainMenuContainer
{
  width: 900px;
  margin: 0 auto;
  box-shadow: none !important;
}

@media (max-width: 979px)
{
  .BaseMaster_mainMenuContainer
  {
    width: auto;
    margin: 0;
  }
}
```


Вот результат:

![В результате меню читателя отцентровано. ](/resources/Storage/manual/varianty-ispolzovaniya-redaktora-menyu-chitatelya/center-aligned_reader_menu.png)

## Сценарий №5 — Как выровнять пункты меню по центру между логотипом и другими элементами

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

1. Перейдите в **Настройки → Внешний вид → Читательский интерфейс.**
2. Откройте CSS-файл, используемый для брендинга вашего портала и вставьте следующий код:


```css
.BaseMaster_mainMenuContainer #pnlMainMenuContainer
{
  width: 280px;
  margin: 0 auto;
  float: none !important;
}
```


В этом случае учтите, что вам следует настраивать атрибут width в зависимости от количества и длины пунктов меню.

В результате пункты меню будут выровнены по центру:

![Пункты меню выровнены по центру.](/resources/Storage/manual/varianty-ispolzovaniya-redaktora-menyu-chitatelya/menu_items_in_center.png)