Инструкция Less для изображений в качестве кастомных иконок форумов (категорий), страниц, ссылок

Для изменения иконок Font Awesome у разделов на изображения, достаточно добавить в extra.less такой код.

.fox-nodeImgIcons(@node-id; @unreadImage; @readImage: false; @height: 40px; @width: 40px) {
    .node--id@{node-id} {
        .node-icon i {
            &:before {
                content: none;
            }

            .node--read& {
                & when (@readImage = false) {
                    -webkit-filter: grayscale(100%);
                    filter: grayscale(100%);
                }
            }

            .node--forum&,
            .node--category& {
                & when (isurl(@unreadImage)) {
                    background: @unreadImage no-repeat;
                }
                & when (ispixel(@height)), (ispixel(@width)) {
                    height: @height;
                    width: @width;
                }

                .node--read& when (isurl(@readImage)) {
                    background: @readImage no-repeat;
                }
            }

            .node--page& {
                & when (isurl(@unreadImage)) {
                    background: @unreadImage no-repeat;
                }
                & when (ispixel(@height)), (ispixel(@width)) {
                    height: @height;
                    width: @width;
                }
            }

            .node--link& {
                & when (isurl(@unreadImage)) {
                    background: @unreadImage no-repeat;
                }
                & when (ispixel(@height)), (ispixel(@width)) {
                    height: @height;
                    width: @width;
                }
            }
        }
    }
}

.fox-nodeImgIcons(2; url("styles/basic/xenforo/forum_new.png"); url("styles/basic/xenforo/forum_old.png"); 42px; 42px);

Теперь разберём на примере готового кода, как нам изменить иконку для ещё одного раздела или нескольких.
Всё достаточно просто, нам не нужно дублировать весь это большой участок кода, достаточно просто одной строчки.
.fox-nodeImgIcons(2; url("styles/basic/xenforo/forum_new.png"); url("styles/basic/xenforo/forum_old.png"); 42px; 42px);

.fox-nodeImgIcons(@node-id; @unreadImage; @readImage: false; @height: 40px; @width: 40px)); - это переменная, которая принимает пять параметров, через точку с запятой.

• Ид раздела - @node-id;
• Ссылка на изображение непрочитанных форумов - @unreadImage;
• Ссылка на изображение прочитанных форумов - @readImage;, если не указать, то будет использован фильтр grayscale, со значением 100%
• Высота - @height;, данный параметр имеет значение по умолчанию, но при желании можно изменить на своё
• Ширина - @width;, данный параметр имеет значение по умолчанию, но при желании можно изменить на своё

В нашем примере это.

• Ид раздела - 2
• Ссылка на изображение непрочитанных форумов - url("styles/basic/xenforo/forum_new.png")
• Ссылка на изображение прочитанных форумов - url("styles/basic/xenforo/forum_old.png");, если не указать, то будет использован фильтр grayscale, со значением 100%
• Высота - 42px, данный параметр имеет значение по умолчанию, но при желании можно изменить на своё
• Ширина - 42px, данный параметр имеет значение по умолчанию, но при желании можно изменить на своё

Допустим нам нужно изменить иконку для ещё одного раздела или нескольких.
Просто дублируем данную строчку (столько, сколько нужно): .fox-nodeImgIcons(2; url("styles/basic/xenforo/forum_new.png"); url("styles/basic/xenforo/forum_old.png"); 42px; 42px);
Под уже существующей.
И чуть изменяем для нужного раздел(ов)а:

.fox-nodeImgIcons(2; url("styles/basic/xenforo/forum_new.png"); url("styles/basic/xenforo/forum_old.png"); 42px; 42px);
.fox-nodeImgIcons(3; url("styles/basic/xenforo/forum_two_new.png"); url("styles/basic/xenforo/forum_two_old.png"));
.fox-nodeImgIcons(4; url("styles/basic/xenforo/forum_two_new.png"));

Итоговый код будет такой.​

.fox-nodeImgIcons(@node-id; @unreadImage; @readImage: false; @height: 40px; @width: 40px) {
    .node--id@{node-id} {
        .node-icon i {
            &:before {
                content: none;
            }

            .node--read& {
                & when (@readImage = false) {
                    -webkit-filter: grayscale(100%);
                    filter: grayscale(100%);
                }
            }

            .node--forum&,
            .node--category& {
                & when (isurl(@unreadImage)) {
                    background: @unreadImage no-repeat;
                }
                & when (ispixel(@height)), (ispixel(@width)) {
                    height: @height;
                    width: @width;
                }

                .node--read& when (isurl(@readImage)) {
                    background: @readImage no-repeat;
                }
            }

            .node--page& {
                & when (isurl(@unreadImage)) {
                    background: @unreadImage no-repeat;
                }
                & when (ispixel(@height)), (ispixel(@width)) {
                    height: @height;
                    width: @width;
                }
            }

            .node--link& {
                & when (isurl(@unreadImage)) {
                    background: @unreadImage no-repeat;
                }
                & when (ispixel(@height)), (ispixel(@width)) {
                    height: @height;
                    width: @width;
                }
            }
        }
    }
}

.fox-nodeImgIcons(2; url("styles/basic/xenforo/forum_new.png"); url("styles/basic/xenforo/forum_old.png"); 42px; 42px);
.fox-nodeImgIcons(3; url("styles/basic/xenforo/forum_two_new.png"); url("styles/basic/xenforo/forum_two_old.png"));
.fox-nodeImgIcons(4; url("styles/basic/xenforo/forum_two_new.png"));

Спойлер: ETC

.fox-nodeImgIcons(@node-id; @unreadImage; @readImage: false; @height: 40px; @width: 40px) {
    .node--id@{node-id} {
        .node-icon i {
            width: auto;

            &:before {
                content: none;
            }

            .node--read& {
                & when (@readImage = false) {
                    -webkit-filter: grayscale(100%);
                    filter: grayscale(100%);
                }
            }

            .node--forum&,
            .node--category& {
                .node--unread& {
                    & when (isurl(@unreadImage)) {
                        background: @unreadImage no-repeat;
                    }
                    & when (ispixel(@height)), (ispixel(@width)) {
                        height: @height;
                        width: @width;
                    }
                }

                .node--read& when (isurl(@readImage)) {
                    background: @readImage no-repeat;
                }
            }

            .node.node--page& {
                & when (isurl(@unreadImage)) {
                    background: @unreadImage no-repeat;
                }
                & when (ispixel(@height)), (ispixel(@width)) {
                    height: @height;
                    width: @width;
                }
            }

            .node.node--link& {
                & when (isurl(@unreadImage)) {
                    background: @unreadImage no-repeat;
                  
                }
                & when (ispixel(@height)), (ispixel(@width)) {
                    height: @height;
                    width: @width;
                }
            }
        }
    }
}

.fox-nodeImgIcons(4; url("/forum/img/update.png"); url("/forum/img/51_1.png"); 42px; 42px);

 

Что делать если не получается?