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

[Mirovinger]

Mirovinger добавил(а) новый ресурс:

Less для кастомных иконок подфорумов (категорий, страниц, ссылок) - Кастомные иконки подфорумов (категорий, страниц, ссылок)

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

.fox-subNodeLink-icons(@subNode-id; @readIcons; @unreadIcons: false; @faType: false;) {
    .subNodeLink[href$=".@{subNode-id}/"] {
        &:before {
            & when (@faType = Brands) {
                .m-faBase('Brands');
            }

            .subNodeLink--forum&,
            .subNodeLink--category& {
                content: "\@{readIcons}";

                &...

Узнать больше об этом ресурсе...

 

[Mirovinger]

Ответ, на вопрос из данной темы, пока в тестовом режиме, позже добавлю в сам ресурс.
Что бы использовать и изображения, а не только FA-иконки, код будет выглядеть примерно так.

.fox-subNodeLink-icons(@subNode-id; @readIcons; @unreadIcons: false; @faType: false) {
    .subNodeLink[href$=".@{subNode-id}/"] {
        &:before {
            & when (@faType = Brands) {
                .m-faBase('Brands');
            }

            .subNodeLink--forum&,
            .subNodeLink--category& {
                & when (isurl(@readIcons)) {
                    content: @readIcons;
                    position: relative;
                    top: 3px;
                }
                
                & when not (isurl(@readIcons)) {
                    content: "\@{readIcons}";
                }

                & when not (@unreadIcons = false) {
                    .subNodeLink--unread& {
                        & when (isurl(@unreadIcons)) {
                            content: @unreadIcons;
                            position: relative;
                            top: 3px;
                        }

                        & when not (isurl(@unreadIcons)) {
                            content: "\@{unreadIcons}";
                        }
                    }
                }
            }

            .subNodeLink--page& {
                & when (isurl(@unreadIcons)) {
                    content: @unreadIcons;                           
                    position: relative;
                    top: 3px;
                }
                
                & when not (isurl(@unreadIcons)) {
                    content: "\@{unreadIcons}";
                }
            }

            .subNodeLink--link& {
                & when (isurl(@unreadIcons)) {
                    content: @unreadIcons;
                    position: relative;
                    top: 3px;
                }
                
                & when not (isurl(@unreadIcons)) {
                    content: "\@{unreadIcons}";
                }
            }
        }
    }
}

.fox-subNodeLink-icons(103; f297; f296; Brands);
.fox-subNodeLink-icons(100; url(https://img-fotki.yandex.ru/get/9508/5091629.99/0_7d7df_d244a8e3_orig.png); url(https://img-fotki.yandex.ru/get/9508/5091629.99/0_7d7df_d244a8e3_orig.png); Brands);

Ну и результат.

 

[xilion]

Что бы использовать и изображения, а не только FA-иконки, код будет выглядеть примерно так.

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

 

[Sm1Le]

Mirovinger, Использую UI.X стиль, вид подразделов развернутый(не скрытые как на скрине)
этот код не подходит

 

[Mirovinger]

Попробуйте данный код, у Вас отсутствуют названия в заголовках, по этому слегка другая структура ссылки.

.fox-subNodeLink-icons(@subNode-id; @readIcons; @unreadIcons: false; @faType: false) {
    .subNodeLink[href$="/@{subNode-id}/"] {
        .subNodeLink-icon:before {
            & when (@faType = Brands) {
                .m-faBase('Brands');
            }

            .subNodeLink--forum&,
            .subNodeLink--category& {
                content: "\@{readIcons}";

                & when not (@unreadIcons = false) {
                    .subNodeLink--unread& {
                        content: "\@{unreadIcons}";
                    }
                }
            }

            .subNodeLink--page& {
                content: "\@{unreadIcons}";
            }

            .subNodeLink--link& {
                content: "\@{unreadIcons}";
            }
        }
    }
}

.fox-subNodeLink-icons(63; f297; f296; Brands);

 

[Isoff]

Не подскажите как сделать эти иконки цветными ?

 

[Mirovinger]

Что подразумевается под цветными, хотите разного цвета сделать, в принципе можно скорректировать чуть код миксина и можно будет и цвет передавать, чуть позже посмотрю и добавлю.

 

[Isoff]

Что подразумевается под цветными, хотите разного цвета сделать, в принципе можно скорректировать чуть код миксина и можно будет и цвет передавать, чуть позже посмотрю и добавлю.

Ну да что бы можно было задать цвет иконки, спасибо буду ожидать

 

[Mirovinger]

Mirovinger обновил(а) ресурс Less для кастомных иконок подфорумов (категорий, страниц, ссылок) новой записью:

Add font color

• Добавлена возможность задавать цвет каждой иконке

Узнать больше об этом обновлении...

 

[VGK]

Почему может не примениться?



Стиль Aperture (Dark) 2.2.6

 

[Mirovinger]

В этом стиле может, ссылку в личку на форум, там автор местами делает свои правки, по этому гляну по месту.

Да, вот под этот стиль миксин, по сути ничего не изменилось, просто автор использует свои иконки и мы будем их переопределять как он.

.fox-subNodeLink-icons(@subNode-id; @readIcons; @unreadIcons: false; @faColor: false; @faType: false) {
    .subNodeLink[href$=".@{subNode-id}/"],
    .subNodeLink[href$="/@{subNode-id}/"] {
        &:before {
            & when (@faType = Brands) {
                .m-faBase('Brands');
            }

            .subNodeLink--forum&,
            .subNodeLink--category& {
                content: "\@{readIcons}";
              
                & when (iscolor(@faColor)) {
                    color: @faColor;
                }

                & when not (@unreadIcons = false) {
                    .subNodeLink--unread& {
                        content: "\@{unreadIcons}";
                    }
                }
            }

            .subNodeLink--page& {
                content: "\@{unreadIcons}";

                & when (iscolor(@faColor)) {
                    color: @faColor;
                }
            }

            .subNodeLink--link& {
                content: "\@{unreadIcons}";
              
                & when (iscolor(@faColor)) {
                    color: @faColor;
                }
            }
        }
    }
}

.fox-subNodeLink-icons(103; f297; f296; red; Brands);

 

[VGK]

Mirovinger, если зайти потом в главный форум, то иконок нету этих, отображаються только на главной.

 

[Mirovinger]

Вообще должно и там работать, код там идентичный.

 

[VGK]

Вообще должно и там работать, код там идентичный.

Форум у вас есть, можете проверить не работает.

 

[Mirovinger]

Я написал, что работает, так как проверил, код заточен на подфорумы, что логично и в самих форума работать не будет, это нужно гибрид делать миксина, подумаем, как будет время.

 

[Best_xab]

Mirovinger, Добрый день, а как убрать вообще иконки подфорумов, до обновления 2.2.12 использовал такой код

.subNodeLink.subNodeLink--forum::before, .subNodeLink.subNodeLink--category::before {
    content: '';
    font-weight: 300;
}

 

[pumba560]

Что то я не понял, куда добавлять этот код .fox-subNodeLink-icons(103; f297; f296; red; Brands);

 

[DreamTails]

pumba560,

достаточно добавить в extra.less такой код.

 

[pumba560]

Я добавил, но ничего не изменилось.

 

[DreamTails]

pumba560, а сам код из ресурса то добавлен, чтобы указанная конструкция работала?