XenForo Расположение сетки для XFRM без дополнений

  • Дорогие пользователи, мы приняли решение размещать на нашем телеграмм канале все ресурсы, бесплатно! https://t.me/mcmdigitalru

Andre

Moderator
Команда форума
Модератор
16.10.2024
36
22
8
Чтобы в макете ресурсов была сетка, как у нас в макете с [TH] узлом и двумя столбцами.
Вот простой CSS, который вам нужно поместить в Extra.less,

CSS:
@media (min-width: 650px) {
  @supports (display: grid) {
    .block[data-type="resource"] .structItemContainer {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
      grid-gap: 10px;
      padding: 10px;
      background-color: #353941;
    }
    .structItem--resource {
      background-color: #2d3037;
      border-radius: 3px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      border-width: 0px;
      display: grid;
      grid-template-columns: 108px 1fr;
      grid-template-areas: "icon text" "stats stats";
    }
    .structItem--resource .structItem-cell--icon.structItem-cell--iconExpanded {
      width: auto;
      grid-area: icon;
    }
    .structItem--resource .structItem-cell--main {
      grid-area: text;
    }
    .structItem--resource .structItem-cell--resourceMeta {
      grid-area: stats;
      width: auto;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
    }
    .structItem--resource
      .structItem-cell--iconExpanded
      .structItem-iconContainer
      .avatar {
      width: 100%;
      height: auto;
      font-size: 56px;
    }
    .structItem--resource .structItem-secondaryIcon {
      display: none;
    }
    .structItem--resource .structItem-metaItem--rating {
      flex: 1 0 100%;
    }
    .structItem--resource .structItem-metaItem--downloads,
    .structItem--resource .structItem-metaItem--lastUpdate {
      flex: 0 1 auto;
    }
    .structItem--resource .ratingStarsRow--justified {
      border-bottom: 1px solid #424650;
      margin-bottom: 4px;
      padding-bottom: 4px;
    }
  }
}
 
  • Like
Реакции: Kluni

Kluni

Новый участник
Участник
16.10.2024
5
2
3
Код написан под темную тему, цвета меняете на свои.