Изменение внешнего вида сайта с помощью тем

Можно изменить внешний вид веб-приложения IBM® Rational Asset Manager, создав каскадные таблицы стилей и предоставив пользовательские изображения.

Прежде чем начать

Если вы изменили стандартные файлы для настройки темы предыдущего выпуска Rational Asset Manager, то перед обновлением версии 7.5.2.3 загрузите текущую тему. В процессе обновления текущая тема заменяется на стандартную тему этой версии. После завершения обновления Rational Asset Manager на сервере повторно примените тему, чтобы протестировать установку и обнаружить неполадки предыдущих версий.

Об этой задаче

Администратор хранилища может загрузить архив, который содержит изображения и каскадные таблицы стилей, управляющие внешним видом веб-приложения. После настройки этих файлов администратор хранилища может выгрузить их, чтобы реализовать изменение.

Процедура

  1. Войдите в веб-клиент как администратор хранилища.
  2. Нажмите Администрирование.
  3. В боковой панели "Управление хранилищем" нажмите Инструменты.
  4. На странице Сервис найдите раздел Управление темами.
  5. Нажмите Загрузить текущую тему.
  6. Сохраните архив currentTheme.zip в локальной системе. Этот файл архива содержит CSS, JavaServer Pages (JSP) и файлы изображений.
  7. Извлеките архив. Сохраните структуру папок.
  8. Создайте файлы CSS и сохраните в каталоге theme/custom/css.
  9. Просмотрите таблицы стилей по умолчанию, которые были установлены вместе с Rational Asset Manager. Для всех стилей, которые требуется изменить, скопируйте правила стилей в свой файл CSS и измените стили. Изменения, внесенные в новые файлы CSS, переопределяют правила в таблицах стилей по умолчанию.
    Важное замечание: Не изменяйте таблицы стилей по умолчанию в файле архива темы. Эти таблицы стилей меняются от выпуска к выпуску и заменяются во время обновления Rational Asset Manager.
  10. Добавьте ссылки на собственные таблицы стилей в файл theme/custom/cssIncludes.jspf. Пример:

    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/${applicationScope.themePath}/custom/css/jkeEnterprises.css" />

  11. Создайте папку images в каталоге custom и скопируйте в нее файлы изображений своей темы. Пример: theme/custom/images-jke-enterprises
  12. Создайте архив, который содержит обновленные файлы. Архиву можно присвоить любое имя, но папка по имени "theme" должна быть корневой в архиве. Эти файлы должны быть включены в архив темы в дополнение к созданным вами пользовательским файлам CSS, даже если не было внесено никаких изменений:
    • theme/custom/header.jspf: содержит изображение логотипа, имя текущего пользователя, а также ссылки Вход, Выход, Справка и Расширения
    • theme/custom/cssIncludes.jspf: содержит теги <link> для пользовательских файлов CSS.
    • theme/custom/homeContent.jspf: содержит область материалов домашней страницы
    • theme/custom/jspHeader.jspf: содержит дополнительные сведения об информационной строке
    • theme/custom/requestAccess.jspf: этот файл отображается под формой входа в систему на странице входа в систему. В теме по умолчанию это пустой фрагмент; при необходимости в него можно добавить часто применяемые в веб-приложениях ссылки, такие как "Забыли пароль" или "Регистрация".
    • theme/custom/requestAccessForm.jspf: этот файл отображается под формы регистрации на домашней странице. В теме по умолчанию это пустой фрагмент; при необходимости в него можно добавить часто применяемые в веб-приложениях ссылки, такие как "Забыли пароль" или "Регистрация".
    • theme/custom/css/advanced.css: дополнительные CSS для управления размерами и размещением
    • theme/custom/css/basic.css: основная CSS для изображений, фона и шрифтов
    • theme/custom/css/hideRightColumn.css: CSS для страниц без правого столбца
    • theme/custom/css/pageLayout.css: CSS для общего макета страницы
    • theme/custom/css/showLeftColumn.css: CSS для страниц, содержащих левый столбец
  13. В разделе Управление темой на странице Сервис нажмите кнопку Обзор.
  14. Найдите обновленный архив.
  15. Нажмите кнопку Выгрузить.

Результаты

Применена новая тема. Если изменения не отображаются, нажмите кнопку Обновить или Перегрузить в браузере. Кроме того, может потребоваться очистить кэш веб-браузера. Перезапуск веб-приложения не требуется. Для того чтобы проверить правильность примененной темы, просмотрите несколько страниц в веб-приложении. Если будут получены непредвиденные результаты, измените пользовательские файлы CSS и загрузите тему снова.

Дальнейшие действия

Сохраните копию архива темы. Если необходимо восстановить первоначальную тему, перейдите по ссылке Восстановить тему по умолчанию.

При повторном развертывании или обновлении веб-приложения применяется тема по умолчанию и необходимо загрузить пользовательскую тему.


Комментарии