Иконка ресурса

Статистика форума снизу, как на IPB

.
Совместимость с XenForo 2
2.0.x, 2.1.x
https://***/attachments/x6yranr-1-png.108259/

https://***/attachments/bemcref-1-png.108252/

Ненавидите длинные ники, которые ломают статистику в сайдбаре? Выход есть! расположите виджет внизу форума, как на IPB

1. Идем в /admin.php?widgets/ находим виджет Статистика форума (forum_overview_forum_statistics)

Меняем расположение на Список форумов ниже списка узлов (переводы могут отличаться)
С боковой панели чекбокс снимаем.

https://***/attachments/id33efu-1-png.108253/

Идем в Extra.less и делаем красиво:

Светлый:

CSS:Скопировать в буфер обмена
/* статистика форума */
.block[data-widget-key="forum_overview_forum_statistics"] .pairs {
display: inline-block;
line-height: 1.8em;
}

.block[data-widget-key="forum_overview_forum_statistics"] .pairs.pairs--justified > dd {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset, 0 1px 0 #FFFFFF;
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1);
color: #222222;
display: inline-block;
font-weight: bold;
margin-right: 3px;
padding: 3px 14px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.block[data-widget-key="forum_overview_forum_statistics"] .pairs>dt {
font-weight: 500;
}
/* статистика форума */
Темный:

CSS:Скопировать в буфер обмена
/* статистика форума */
.block[data-widget-key="forum_overview_forum_statistics"] .pairs {
display: inline-block;
line-height: 1.8em;
}

.block[data-widget-key="forum_overview_forum_statistics"] .pairs.pairs--justified > dd {
box-shadow: 0 1px 2px rgba(0,0,0,0.3) inset, 0 2px 0 #cc73d1;
display: inline-block;
font-weight: 500;
margin-right: 3px;
padding: 3px 14px;

}

.block[data-widget-key="forum_overview_forum_statistics"] .pairs>dt {
padding: 5px;
color:#c8c8c8;
font-weight: 500;
}
/* статистика форума */
dt слова , dd цифры

line-height: 1.8em; - вот это регулирует выше или ниже
padding: 3px 14px; - регулирует ширину, высоту и подчеркивание от тени
остальное все по стилю смотрите

При расположении в строчку на мой взгляд иконки уже лишние, но если хотите то можно добавить и их:

CSS:Скопировать в буфер обмена
/* иконки для статистики форума */
.block[data-widget-key="forum_overview_forum_statistics"] .pairs {

dt:before {
font: normal normal normal 17px/1.5 Material Design Icons;
padding-right: 5px;
}

&:nth-child(1) dt:before {
content: "\f255";
}

&:nth-child(2) dt:before {
content: "\f1f0";
}

&:nth-child(3) dt:before {
content: "\f848";
}

&:nth-child(4) dt:before {
content: "\f010";
}

}

/* иконки для статистики форума */
Хотите скрыть заголовок статистика форума? Добавляем в extra.less вот это:

CSS:Скопировать в буфер обмена
.block[data-widget-key="forum_overview_forum_statistics"] .block-minorHeader {
display:none;
}
Добавив туда где dd значение бордер радиус вы станете крутым UX/UI дизайнером в глазах ваших пользователей!

border-radius: 20px 20px;

https://***/attachments/rmin0vy-1-png.108260/

UPD

Для мобильных устройств убираем расположение в линию

CSS:Скопировать в буфер обмена
@media screen and (max-width:480px) {
.block[data-widget-key="forum_overview_forum_statistics"] .pairs {
display:block;
}
}
Автор
Bik
Первый выпуск
Обновление
Оценка
0.00 звёзд 0 оценок