- Совместимость с XenForo
- 2.0
- 2.1
- 2.2
В продолжении данного ресурса (да и вроде как оптимизации кодовой базы) - Снег на категориях 2 и не только.
Набросал небольшую функцию (миксин), которая позволит простым указанием нужной цифры, установить снежные сугробы на категориях, на данный момент их четыре.
Нумерацию и скрин не делал, благо при желании сами выберите нужный использовав код.
Что бы всё это заработало, достаточно добавить в
Где в миксине
Пару примеров на скрине ниже.
Набросал небольшую функцию (миксин), которая позволит простым указанием нужной цифры, установить снежные сугробы на категориях, на данный момент их четыре.
Нумерацию и скрин не делал, благо при желании сами выберите нужный использовав код.
Что бы всё это заработало, достаточно добавить в
extra.less, такой код и загрузить содержимое из каталога upload.
Less:
// xf2 Snow Category ===================================================================================
.fox-snowCategory(@snowNum: false) {
@fox-snowCategoryPath: "/styles/xfi/snowCategory";
.p-body-pageContent {
.block--category {
&:before {
& when not (@snowNum = false) and (@snowNum <= 2) {
background:
url('@{fox-snowCategoryPath}/snow_l_@{snowNum}.png') no-repeat 0% 0%,
url('@{fox-snowCategoryPath}/snow_c_@{snowNum}.png') no-repeat 50% 0%,
url('@{fox-snowCategoryPath}/snow_r_@{snowNum}.png') no-repeat 100% 0%;
}
& when not (@snowNum = false) and (@snowNum >= 3) and (@snowNum <= 4) {
background:
url('@{fox-snowCategoryPath}/snow_l_@{snowNum}.png') no-repeat 0% 0%,
url('@{fox-snowCategoryPath}/snow_c_@{snowNum}.png') no-repeat 50% 0%,
url('@{fox-snowCategoryPath}/snow_r_@{snowNum}.png') no-repeat 100% 0%;
left: -5px;
padding: 0 5px;
top: 13px;
}
content: "";
display: block;
position: relative;
height: 30px;
width: 100%;
margin-top: -20px;
@media (max-width: @xf-responsiveMedium) {
background: url('@{fox-snowCategoryPath}/snow_c_@{snowNum}.png') no-repeat 50% 0%;
}
}
}
}
}
.fox-snowCategory(1);Где в миксине
.fox-snowCategory(3);, цифра 3, это порядковый номер картинки сугробов, который как раз и можно изменить от одного до четырёх.Пару примеров на скрине ниже.
