Как настроить тему (оригинальная версия)

Вы просматриваете документацию по Apigee Edge.
Перейдите к документации по Apigee X. Информация

Тема – это глобальная каскадная таблица стилей (CSS), которая обеспечивает единообразный внешний вид всех страниц портала. Тема позволяет изменить внешний вид всех страниц портала одновременно.

Большинство стилей по умолчанию, представленных в образце портала, основаны на Bootstrap. Вы можете настроить, посмотреть и опубликовать тему, как описано в следующих разделах.

Посмотрите видео о том, как настроить тему портала.

Как открыть редактор тем

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

Как показано на рисунке выше, редактор тем позволяет:

• Добавьте собственные стили, чтобы настроить тему с помощью панели редактора стилей.
• Чтобы посмотреть, как тема будет выглядеть после публикации, нажмите Обновить.
• Как настроить логотип
• Как настроить фоновое изображение
• Опубликуйте тему на портале трансляций

Как добавить собственные стили

Настройте тему, добавив собственный код CSS в области редактора стилей. Поддерживаются все элементы стиля CSS.

Чтобы настроить тему:

1. На панели навигации вверху страницы выберите Тема в раскрывающемся меню.
2. Добавьте собственный код CSS в редактор стилей в правой части страницы.
3. Чтобы посмотреть, как будут выглядеть изменения, нажмите Обновить в области предварительного просмотра.
   > Примечание. Чтобы посмотреть контент на всех страницах, используйте навигацию по порталу.
4. Нажмите Опубликовать, чтобы изменения темы вступили в силу.
5. Нажмите Опубликовать, чтобы подтвердить обновление.

Как настроить логотип

Замените изображение "Ваш логотип" на логотип своей компании. Для этого в файловом менеджере загрузите логотип, используя те же названия и относительные размеры файлов:

• logo.png (140 x 40 пикселей)
• mobile-logo.png (140 x 40 пикселей)

Кроме того, при необходимости измените в таблице стилей CSS следующие элементы:

/* ==== Header Menu ==== */
...
body .navbar-brand {
  padding: 5px 15px;
}


.navbar-brand img {
  max-height: 50px;
  margin: 0;
  padding: 0;
}

Подробнее о том, как управлять объектами…

Как настроить фоновое изображение на главной странице

Чтобы изменить фоновое изображение на главной странице, отредактируйте следующий контент в таблице стилей CSS.

• Изменить файл фонового изображения и его расположение.
  Вы можете загрузить собственную версию изображения portal-hero.jpg в менеджер файлов, используя то же название и относительный размер файла (1440 x 540 пикселей). Если вы хотите использовать другое название файла, измените значение background-image в приведенном ниже коде CSS.

  /* ==== Jumbotron ====
  a billboard for drawing attention, from Bootstrap  */
  
  home-page-jumbotron-bg {
      background-image: url('/files/portal-hero.jpg');
  }

• Изменить формат текста, наложенного на фоновое изображение.

  .jumbotron {
   text-align: center;
   height: 500px;
   background-size: cover;
   margin: -50px -30px 0 -30px;
   border-radius: 0;
  }
  
  .jumbotron h1 {
   font-size: 40px;
   font-weight: 400;
  }
  
  .jumbotron h2 {
   font-size: 25px;
   font-weight: 400;
  }
  
  .jumbotron a, .jumbotron a:hover {
   font-size: 18px;
  }
  
  .jumbotron p {
   max-width: none;
  }

Правила определения приоритета CSS

Специфичность CSS – это метод, который браузер использует для определения приоритета объявлений элементов стиля CSS при возникновении конфликтов. При расчете специфичности CSS каждому элементу стиля CSS присваивается вес в зависимости от типа селектора. Чем точнее селектор CSS, тем выше его вес. Например, атрибут ID будет иметь больший вес, чем селектор типа.

Например, если вы определите следующие элементы стиля в коде CSS, элемент абзаца будет окрашен в красный цвет, поскольку объявление элемента стиля p внутри элемента div более специфично, чем объявление элемента стиля p.

div p { color: red }  ← More specific  
p { color: blue }

Аналогично, если в коде CSS вы определите следующие объявления элементов стиля, то любой текст, заключенный в теги <div class="test"></div>, будет синим, поскольку объявление стиля атрибута id в элементе div более специфично, чем объявление элемента стиля div.

div#test { background-color: blue; }  ← More specific  
div { background-color: red; }

Если у объявлений элементов стиля одинаковая точность, приоритет будет иметь последнее объявление. Например, если объявления элементов стиля расположены в следующем порядке, элемент абзаца будет синим.

p { color: red }  
p { color: blue }  ← Last specified

Как опубликовать тему

Чтобы опубликовать в портале Live добавленные вами настройки темы и стиля:

1. В раскрывающемся меню в верхнем меню навигации выберите Тема.
2. Нажмите Опубликовать.

Чтобы посмотреть опубликованный контент на портале, нажмите Портал трансляций на панели навигации вверху страницы.