XF 2.2 Как изменить фон?

Версия XenForo
2.2.0

Jason_Catrel

Участники
Сообщения
13
Реакции
-3
Баллы
8
Доброго времени суток, как изменить данную категорию? (Скрин в низу), а именно фон краску и т.д, чтобы вставить свою или изменить на другую.
Screenshot_2024-05-02-13-56-52-39_40deb401b9ffe8e1df2f1cc5ba480b12.jpg
 
Доброго времени суток, как изменить данную категорию? (Скрин в низу), а именно фон краску и т.д, чтобы вставить свою или изменить на другую.
Посмотреть вложение 152986
Less:
.block.block--category.block--category150 {
    border: 2px solid orange!important;
    padding: 3px !important;
    border-radius: 2px !important;
    box-shadow: 0 3px 2px rgba(0,0,0,.1)!important;
}
.block.block--category.block--category150 .block-header {
    background: orange!important;
    border-bottom: 3px solid orange!important;
    border-left: 1px solid orange!important;
    border-right: 1px solid orange!important;
    border-top: 1px solid orange!important;
}

150 - это ID категории.
 
Последнее редактирование:
Less:
.block.block--category.block--category150 {
    border: 2px solid orange!important;
    padding: 3px !important;
    border-radius: 2px !important;
    box-shadow: 0 3px 2px rgba(0,0,0,.1)!important;
}
.block.block--category.block--category150 .block-header {
    background: orange!important;
    border-bottom: 3px solid orange!important;
    border-left: 1px solid orange!important;
    border-right: 1px solid orange!important;
    border-top: 1px solid orange!important;
}

150 - это ID категории.
Это водить в extra?
 
LUX-MEBEL, потом из-за таких "помощников" приходится переделывать.
Чтобы extra.less не был полотном трудночитаемого нечто.

---
Сначала прописываем этот код в extra.less вашего стиля.
Less:
.customCategoryBackground(@categoryId, @color, @background)
{
    .block--category@{categoryId}
    {
        .block-header
        {
            color: @color;
            background: @background;
        }
    }
}

Затем, используем написанную функцию.
Где первый параметр - id категории, второй - цвет текста, третий - цвет фона.
Функцию можно модифицировать на своё усмотрение, добавляя border и т.п.

Код:
.customCategoryBackground(1, #bcdef5, #185886);
.customCategoryBackground(78, white, fade(#185886, 25%));
.customCategoryBackground(88, red, linear-gradient(90deg, rgb(64,57,194) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%));

1715591714422.png
 
LUX-MEBEL, потом из-за таких "помощников" приходится переделывать.
Чтобы extra.less не был полотном трудночитаемого нечто.

---
Сначала прописываем этот код в extra.less вашего стиля.
Less:
.customCategoryBackground(@categoryId, @color, @background)
{
    .block--category@{categoryId}
    {
        .block-header
        {
            color: @color;
            background: @background;
        }
    }
}

Затем, используем написанную функцию.
Где первый параметр - id категории, второй - цвет текста, третий - цвет фона.
Функцию можно модифицировать на своё усмотрение, добавляя border и т.п.

Код:
.customCategoryBackground(1, #bcdef5, #185886);
.customCategoryBackground(78, white, fade(#185886, 25%));
.customCategoryBackground(88, red, linear-gradient(90deg, rgb(64,57,194) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%));

Посмотреть вложение 153102
Я задаю глупый вопрос, но куда ввести 2 код, чутка не понятно
 
Jason_Catrel, Тоже в extra.less

Всё это будет выглядеть, так:

Less:
.customCategoryBackground(1, #bcdef5, #185886);
.customCategoryBackground(78, white, fade(#185886, 25%));
.customCategoryBackground(88, red, linear-gradient(90deg, rgb(64,57,194) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%));

.customCategoryBackground(@categoryId, @color, @background)
{
    .block--category@{categoryId}
    {
        .block-header
        {
            color: @color;
            background: @background;
        }
    }
}
 
Последнее редактирование:
Jason_Catrel, Тоже в exnre.less

Всё это будет выглядеть, так:

Less:
.customCategoryBackground(1, #bcdef5, #185886);
.customCategoryBackground(78, white, fade(#185886, 25%));
.customCategoryBackground(88, red, linear-gradient(90deg, rgb(64,57,194) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%));

.customCategoryBackground(@categoryId, @color, @background)
{
    .block--category@{categoryId}
    {
        .block-header
        {
            color: @color;
            background: @background;
        }
    }
}
Спасибо всем большое за помощь, сейчас протестирую
 
Ничего не поменялось
Jason_Catrel, Тоже в exnre.less

Всё это будет выглядеть, так:

Less:
.customCategoryBackground(1, #bcdef5, #185886);
.customCategoryBackground(78, white, fade(#185886, 25%));
.customCategoryBackground(88, red, linear-gradient(90deg, rgb(64,57,194) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%));

.customCategoryBackground(@categoryId, @color, @background)
{
    .block--category@{categoryId}
    {
        .block-header
        {
            color: @color;
            background: @background;
        }
    }
}
 
Современный облачный хостинг провайдер | Aéza
Назад
Сверху Снизу