Шаг 12. Определение пользовательских стилей

Созданные компоненты обрабатываются как любые другие компоненты в файлах design.json и design.css из темы, используемой для вашего сайта.

Чтобы добавить собственный стиль для пользовательского компонента, подтвердите значение id, используемое при регистрации компонента. В файле appinfo.json это был "id": "hello-world".

Используя это значение, измените файл design.json темы и добавьте новые стили, которые требуется поддерживать для этого идентификатора id. Например, измените файл /design/default/design.css из своей темы и добавьте этот код:

"hello-world": {
  "styles": [{
    "name": "Plain",
    "class": "hello-world-default-style"
  },
  {
    "name": "Gothic",
    "class": "hello-world-gothic-style"
  }]
},

Если открыть панель "Настройки" для своего компонента, теперь на вкладке "Стиль" должны отображаться два параметра Обычный (по умолчанию) и Готический. Однако при переключении между этими параметрами ничего не происходит без фактического определения классов стилей, перечисленных в файле design.css.

Измените файл design.css темы и добавьте классы каскадной таблицы стилей (CSS) своего стиля. Например, измените файл /design/default/design.css из своей темы и добавьте этот код:

.hello-world-default-style .scs-component-content {
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 24px;
  font-weight: normal; }

.hello-world-gothic-style .scs-component-content {
  font-family: "Century Gothic","CenturyGothic","AppleGothic",sans-serif; 
  font-size: 32px;
  font-weight: bold; }

Сохраните и синхронизируйте файлы Oracle Content Management на сервере экземпляров.