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

Вот несколько сценариев, которые помогут вам эффективнее работать с Редактором меню читателя: 

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

  1. Загрузка изображения.
    1. Загрузите нужное изображение в Хранилище файлов (например, в папку Branding).
    2. Скопируйте ссылку на загруженный файл.Ссылка на загруженное изображение в Хранилище файлов.
  2. Настройка пункта меню в редакторе 
    1. Перейдите в Настройки → Внешний вид → Меню читателя.
    2. В редакторе меню выберите пункт, который необходимо визуализировать в виде изображения. Пункт меню, который будет заменён на изображение.
    3. Удалите текстовое название пункта, оставив поле пустым. Пустое поле "Текст" в редакторе меню читателя
    4. Заполните поле CSS-класс. В нашем случае это будет menuItemHome.CSS-класс пункта меню в редакторе.
    5. Нажмите Сохранить.
  3. Добавление стилей
    1. Перейдите в Настройки → Внешний вид → Читательский интерфейс.
    2. Откройте CSS-файл, который используется для брендинга вашего портала.Откройте Брендинг CSS-файл вашего портала.
    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. Сохраните изменения в файле. 

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

Изображение в меню читателя.

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

  1. Перейдите в Настройки → Внешний вид → Меню читателя.
  2. Выберите пункт меню, который необходимо стилизовать. В данном примере мы будем работать с пунктом Домашняя. Выбранный для стилизации пункт меню.
  3. Задайте свой CSS-класс. В нашем случае это будет menuItemHome.Пункт меню с добавленным CSS-классом.
  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;
}

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

Результат стилизации пункта меню.

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

  1. Перейдите в Настройки → Внешний вид → Меню читателя.
  2. Для каждого из пунктов меню задайте уникальный CSS-класс. В нашем примере мы задали класс menuItemHome для пункта Домашняя, для остальных - по аналогии. Заданный CSS-класс для пункта меню.
  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;
}

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

Результат стилизации.

Сценарий №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;
  }
}

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

В результате меню читателя отцентровано.

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

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

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

Скопировать код
CSS
.BaseMaster_mainMenuContainer #pnlMainMenuContainer
{
  width: 280px;
  margin: 0 auto;
  float: none !important;
}

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

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

Пункты меню выровнены по центру.