Настройте свою тему (исходная версия)

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

Тема оформления представляет собой глобальную каскадную таблицу стилей (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

Опубликуйте свою тему

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

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

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