Виджет статистики форума

Версия XenForo

Простенькая модификация шаблона статистики форума.
Что получаем в итоге?

Есть два варианта реализации.

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

Шаг 1.
Включаем режим разработчика, если не умеем скачиваем плагин и включаем его в панели форума

[TG] Debug (and Development mode)

Дополнение для XenForo 2.* позволяющая включать и выключать режим отладки, и разработчика из ACP. Так же позволяет правами пользователя скрыть отладочную информацию (в том числе и страницу отладки!). Русификация внутри релиза!

pawno-help.ru

Шаг 2.
Идём в модификации шаблонов
/admin.php?template-modifications/

Нажимаем кнопку добавить модификацию и вводим.
Шаблон: widget_forum_statistics
Ключ модификации: да любой на ваш вкус
Описание: любое на ваш вкус

Тип поиска: простая замена

Найти вставляем полностью тот код что вам выдаст при вводе шаблона.
Заменить вставляем код из архива widget_forum_statistics

Сохраняем.

Вариант второй. Без модификации шаблона на прямую тупые замены прямо в шаблон.
Из минусов, по кнопке отключить в исходное состояние не получится. Придётся делать резервную копию или смотреть историю изменений в шаблоне что бы откатить изменения.

Шаг 1.
В поиске по админ панели вводим в поиск шаблон widget_forum_statistics

Шаг 2.
Удаляем всё там в 0 и вставляем код из архива widget_forum_statistics

Сохраняем.

Далее. Открываем extra.less и вставляем туда следующий код (он так же есть в архиве)

CSS:

.forum-stats-widget-fox {
  background: @xf-contentBg;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 0;

  .forum-stats-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
  }

  .forum-stats-card {
    flex: 1 1 22%;
    min-width: 120px;
    background: darken(@xf-contentBg, 4%);
    border-radius: @xf-borderRadiusMedium;
    overflow: hidden;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 2px 5px fade(@xf-borderColor, 15%);
    transition: transform 0.2s ease, box-shadow 0.2s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px fade(@xf-borderColor, 25%);
    }

    .forum-stats-icon-wrapper {
      background: @xf-paletteAccent1;
      width: 100%;
      display: flex;
      margin-left: 10px;
      margin-right: 10px;
      align-items: center;
      justify-content: center;
      padding: 10px;

      i {
        color: contrast(@xf-paletteAccent1);
        font-size: 18px;
      }
    }

    .forum-stats-number {
      color: @xf-textColorEmphasized;
      font-size: @xf-fontSizeLarger;
      font-weight: 700;
      line-height: 1.3;
      margin-top: @xf-paddingSmall;
    }

    .forum-stats-label {
      color: @xf-textColorMuted;
      font-size: @xf-fontSizeSmall;
      margin: 4px 0 @xf-paddingSmall 0;
    }
  }

  // Мобильная адаптация
  @media (max-width: 600px) {
    padding: 8px;

    .forum-stats-cards {
      gap: 8px;
    }

    .forum-stats-card {
      flex: 1 1 48%;
      min-width: auto;
      margin-bottom: 10px;

      .forum-stats-icon-wrapper {
        margin-left: 5px;
        margin-right: 5px;
        padding: 8px;

        i {
          font-size: 16px;
        }
      }

      .forum-stats-number {
        font-size: @xf-fontSizeLarge;
      }

      .forum-stats-label {
        font-size: @xf-fontSizeSmall;
      }
    }
  }

  @media (max-width: 380px) {
    .forum-stats-card {
      flex: 1 1 100%;
      min-width: auto;
    }
  }
}

Самое главное. После всего этого идём в "Виджеты", там ищем статистику форума, тыкаем на неё и устанавливаем ей положение галочкой "Ниже списка узлов". Все остальные убираем.

Сохраняем

На выходе получем то что показано в самом начале.
Код учитывает текущую палитру цветов стиля (именно палитру цветов, а не основные цвета), а так же адаптивность для мобильных устройств.

Реакции: olimpic_kaz и Kolpak

LIVE SAMP

Виджет статистики форума 01

Добро пожаловать!

[TG] Debug (and Development mode)

Другие ресурсы пользователя KeoFox

Поделиться ресурсом