Решено Линие на категорию форума.

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

Зарегистрировавшись у нас, вы сможете обсуждать, делиться и отправлять личные сообщения другим участникам нашего сообщества.

Зарегистрироваться!
  • Если Вы желаете помогать развитию проекта, готовы заполнять раздел(-ы) и подсказывать другим пользователям на портале, есть возможность попасть в команду редакторов. Для этого следует обратиться в техническую поддержку
Статус
В этой теме нельзя размещать новые ответы.
Профессионал
Регистрация
26 Окт 2024
Сообщения
1,120
Приветствую, недавно начал заниматься стилем io dark, и встрял такой огромный вопрос, как сделать вот эти линии на категории форума, впервые работаю с данным стилем, и не сильно понимаю че к чему 🤔)
1749145330546.jpg
 
Решение
Less:
.block.block--category
{
    .block-header
    {
        position: relative;

        &:after
        {
            content: '';
            background: url(@xf-uix_imagePath/io/images/swirl.png);
            background-size: cover;
            background-position: center;
            position: absolute;
            height: 100%;
            width: 100%;
            z-index: 1;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            display: block;
            mix-blend-mode: overlay;
            pointer-events: none;
        }
    }
}

@xf-uix_imagePath - настройка стиля, где указан путь путь с папкой картинок. Настройки стиля - Основные настройки - Image path
Команда форума
Модератор
Регистрация
4 Ноя 2024
Сообщения
633
Less:
.block.block--category
{
    .block-header
    {
        position: relative;

        &:after
        {
            content: '';
            background: url(@xf-uix_imagePath/io/images/swirl.png);
            background-size: cover;
            background-position: center;
            position: absolute;
            height: 100%;
            width: 100%;
            z-index: 1;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            display: block;
            mix-blend-mode: overlay;
            pointer-events: none;
        }
    }
}

@xf-uix_imagePath - настройка стиля, где указан путь путь с папкой картинок. Настройки стиля - Основные настройки - Image path
 
Профессионал
Регистрация
26 Окт 2024
Сообщения
1,120
Less:
.block.block--category
{
    .block-header
    {
        position: relative;

        &:after
        {
            content: '';
            background: url(@xf-uix_imagePath/io/images/swirl.png);
            background-size: cover;
            background-position: center;
            position: absolute;
            height: 100%;
            width: 100%;
            z-index: 1;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            display: block;
            mix-blend-mode: overlay;
            pointer-events: none;
        }
    }
}

@xf-uix_imagePath - настройка стиля, где указан путь путь с папкой картинок. Настройки стиля - Основные настройки - Image path
Не поменялось нечего..
 
Команда форума
Модератор
Регистрация
4 Ноя 2024
Сообщения
633
Не поменялось нечего..
Код не сработал, потому что в пути к картинке с линиями используется настройка стиля uix_imagePath. Я всего-лишь показал, как это реализовано в стиле IO. Путь к картинке у вас есть, вы можете скачать её оттуда, либо перенести в нужную папку стиля. Или, если на сервере уже есть файлы стиля IO, просто указать корректный путь: styles/io_dark/io/images/swirl.png
 
Статус
В этой теме нельзя размещать новые ответы.
Сверху