XF 2.2 Своё оформление виджета

[ФАКЕР]

Всем привет.

Хочу сделать виджет что бы был полностью оформлен как я хочу, а не стандартный как в теме.

1 создал виджет, ключ виджета: banner_index_page

2 в extra.less вставил:

/* extra.less в активном стиле iO */

/* 1) Сбросить «хром» блоков виджета */
.block[data-widget-key="banner_index_page"] {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 2) Стереть контейнеры и заголовки темы */
.block[data-widget-key="banner_index_page"] > .block-container,
.block[data-widget-key="banner_index_page"] .block-body {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.block[data-widget-key="banner_index_page"] .block-header,
.block[data-widget-key="banner_index_page"] .uix_widget__header {
  display: none !important;
}

/* 3) На всякий — отключить декоративные псевдоэлементы */
.block[data-widget-key="banner_index_page"]::before,
.block[data-widget-key="banner_index_page"]::after,
.block[data-widget-key="banner_index_page"] *::before,
.block[data-widget-key="banner_index_page"] *::after {
  content: none !important;
}

/* 4) Ваши собственные стили внутри */
.block[data-widget-key="banner_index_page"] .myBanner {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #0b1220;
  color: #fff;
  border-radius: 14px;
  padding: 28px;
}

Шаблон виджета:

<div class="myBanner">
  <!-- ваш контент -->
    asdasdasdsadasd asd as da sda sd asd a
</div>

И ничего не происходит.

 

[Roudezz_Makenzi]

Всем привет.

Хочу сделать виджет что бы был полностью оформлен как я хочу, а не стандартный как в теме.

1 создал виджет, ключ виджета: banner_index_page

2 в extra.less вставил:

/* extra.less в активном стиле iO */

/* 1) Сбросить «хром» блоков виджета */
.block[data-widget-key="banner_index_page"] {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 2) Стереть контейнеры и заголовки темы */
.block[data-widget-key="banner_index_page"] > .block-container,
.block[data-widget-key="banner_index_page"] .block-body {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.block[data-widget-key="banner_index_page"] .block-header,
.block[data-widget-key="banner_index_page"] .uix_widget__header {
  display: none !important;
}

/* 3) На всякий — отключить декоративные псевдоэлементы */
.block[data-widget-key="banner_index_page"]::before,
.block[data-widget-key="banner_index_page"]::after,
.block[data-widget-key="banner_index_page"] *::before,
.block[data-widget-key="banner_index_page"] *::after {
  content: none !important;
}

/* 4) Ваши собственные стили внутри */
.block[data-widget-key="banner_index_page"] .myBanner {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #0b1220;
  color: #fff;
  border-radius: 14px;
  padding: 28px;
}

Шаблон виджета:

<div class="myBanner">
  <!-- ваш контент -->
    asdasdasdsadasd asd as da sda sd asd a
</div>

И ничего не происходит.

Сделай стиль и html в коде виджета сразу, без обращений из extra.less
Я проверил твой код, он работает:

<style>
.myBanner {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #0b1220;
  color: #fff;
  border-radius: 14px;
  padding: 28px;
}
</style>
<div class="myBanner">
  <!-- ваш контент -->
    asdasdasdsadasd asd as da sda sd asd a
</div>