XenForo - Иконки узлов | Fi4a.ru - Информационный Портал

Улучшаем вид иконок узлов с помощью трех несложных модификаций.
1. Создаем модификацию шаблона node_list_forum:
Шаблон: node_list_forum
Ключ модификации: mod_node_forum_bg
Тип поиска: Простая замена
Найти:

Код:

            <span class="node-icon" aria-hidden="true">
                <xf:fa icon="{{ $node.Data.TypeHandler.getTypeIconClass() ?: 'fa-comments' }}" />
            </span>

Заменить:

Код:

            <span class="node-icon" aria-hidden="true">
                <span class="node-body-bg">
                <xf:fa icon="{{ $node.Data.TypeHandler.getTypeIconClass() ?: 'fa-comments' }}" />
                </span> 
            </span>

Порядок выполнения: 5
2, Создаем модификацию шаблона node_list_page:
Шаблон: node_list_page
Ключ модификации: mod_node_page_bg
Тип поиска: Простая замена
Найти:

Код:

<span class="node-icon" aria-hidden="true"><i></i></span>

Заменить:

Код:

<span class="node-body-bg">
                $0
            </span>

Порядок выполнения: 5
3. Создаем модификацию шаблона extra.less:
Шаблон: extra.less
Ключ модификации: mod_node_bg_less
Тип поиска: Регулярное выражение
Найти:

Код:

/^.*$/s

Заменить:

Код:

@backgroundOne: #19B5FE;
@backgroundTwo: #BF55EC;
@backgroundThree: #36D7B7;
@backgroundFour: #FFB61E;
@backgroundFive: #DB5A6B;

.node {
    .node-body {
        .node-body-bg {
            position: relative;
            width: 2em;
            height: 3em;
            border-radius: 8px;
            display: block;
            top: 0;
            background: linear-gradient(to bottom right, @backgroundOne, darken(@backgroundOne, 25%));
            i:before {
                color: @backgroundOne;
                font-weight: 600;
            }             
            &:before, &:after {
                position: absolute;
                width: inherit;
                height: inherit;
                border-radius: inherit;
                background: inherit;
                content: "";
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
              }
              &:before {
                transform: rotate(60deg);
              }
              &:after {
                transform: rotate(-60deg);
              }             
          
            i  {
                width: 30px;
                height: 30px;
                position: absolute;
                background: #fff;
                z-index: 10;
                border-radius: 50%;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 1.2em;
                line-height: 1;
            }             
        }
    }
    &:nth-child(2n) .node-body .node-body-bg {
        background: linear-gradient(to bottom right, @backgroundTwo, darken(@backgroundTwo, 25%));
        i:before {
            color: @backgroundTwo;
        }
    }
    &:nth-child(3n) .node-body .node-body-bg {
        background: linear-gradient(to bottom right, @backgroundThree, darken(@backgroundThree, 25%));
        i:before {
            color: @backgroundThree;
        }         
    }
    &:nth-child(4n) .node-body .node-body-bg {
        background: linear-gradient(to bottom right, @backgroundFour, darken(@backgroundFour, 25%));
        i:before {
            color: @backgroundFour;
        }         
    }
    &:nth-child(5n) .node-body .node-body-bg {
        background: linear-gradient(to bottom right, @backgroundFive, darken(@backgroundFive, 25%));
        i:before {
            color: @backgroundFive;
        }         
    }
    &.node--page {
        .node-body {
            display: flex;
            .node-body-bg {
                left: 10px;
            }
            .node-title {
                margin-left: 15px;
            }
        }
    }
}
$0

Результат:

XenForo Иконки узлов

Ещё ресурсы от Volshebnik