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

[Mirovinger]

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

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

Да инструкции по изменению иконок у форумов (категорий), страниц, ссылок
(в дальнейшем разделов) есть на форуме, но попросили упростить это всё.
По этому для изменения иконок Font Awesome у разделов, достаточно добавить в extra.less такой код.
(Возможно в будущем не только Font Awesome)

.node-icons (@node-id; @fa-uid; @color: false; @fa-size: false) {
    .node--id@{node-id} {
        .node-icon i {
            & when (isnumber(@fa-size)) {
                font-size...

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

 

[puchkov]

Прекрасная систематизация кода, очень удобно, не нужно тащить бессмысленную "простыню" кода для каждого раздела, особенно если разделов 20 штук.
Подскажите, а как модифицировать, чтобы туда background-image: url('

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

ставить, а не Font Awesome иконки? Ну и чтобы для этого не ставить отдельный node--unread, а просто затуманивать при помощи css (opacity/text-shadow) один раз для всех? Проще говоря, заменить Font Awesome - на свои иконки.

 

[Mirovinger]

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

XF2.1.x + FA5

• Совместимость с XenForo 2.1.x
• Добавлена возможность указания типа иконки для FA5
• Рефакторинг

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

 

[.endme]

Попробую нормально теперь оформить.

Интересует вопрос.
Использую такой код:

/*FA для разделов*/
.node-icons (@node-id; @fa-uid; @color: false; @fa-size: false) {
    .node--id@{node-id} {
        .node-icon i {
            & when (isnumber(@fa-size)) {
                font-size: @fa-size;
            }
            &:before {
                color: @xf-nodeIconReadColor;
                text-shadow: 1px 1px 0.5px fade(xf-intensify(@xf-nodeIconReadColor, 50%), 50%);
                .node--unread&    {
                    & when (iscolor(@color)) {
                        opacity: 1;
                        color: @color;
                        text-shadow: 1px 1px 0.5px fade(xf-intensify(@color, 50%), 50%);
                    }
                }

                .node--forum&,
                .node--category& {
                    content:"\@{fa-uid}";
                }
                .node--page& {
                    content:"\@{fa-uid}";
                }
                .node--link& {
                    content:"\@{fa-uid}";
                }
            }
        }
    }
}
.node-icons (4, f1ea, white);
.node-icons (7, f007, white);

Указал данный код в extra.less
Стиль использую Uniform
Версия движка 2.0.12

Скриншот до прочтения:

До

После прочтения:

После

P.S надеюсь оформил нормально...

 

[Mirovinger]

Для стилей XenFocus.

.node-icons (@node-id; @fa-uid; @color: false; @fa-size: false) {
    .node--id@{node-id} {
        .node-icon i {
            & when (isnumber(@fa-size)) {
                font-size: @fa-size;
            }
            &:before {
                color: @xf-nodeIconReadColor;
                text-shadow: 1px 1px 0.5px fade(xf-intensify(@xf-nodeIconReadColor, 50%), 50%);
                .node--unread&    {
                    & when (iscolor(@color)) {
                        opacity: 1;
                        color: @color;
                        text-shadow: 1px 1px 0.5px fade(xf-intensify(@color, 50%), 50%);
                    }
                }

               [data-logged-in="true"] .node--forum&,
               [data-logged-in="true"] .node--category& {
                    content:"\@{fa-uid}";
                }
                .node--page& {
                    content:"\@{fa-uid}";
                }
                .node--link& {
                    content:"\@{fa-uid}";
                }
            }
        }
    }
}
.node-icons (4, f1ea, white);
.node-icons (7, f007, white);

 

[MC_Mike]

.node-icons (20, f470, 28px);

Не применяется размер

 

[Mirovinger]

Обновление перечитать, теперь это пятый параметр.
.node-icons (42, f179, false, false, 28px);

 

[vlakyan]

Подскажите, а как картинку вставить правильно)?

 

[anotcher]

Некоторые иконки не отображаются правильно.

 

[Matew]

Некоторые иконки не отображаются правильно.

Класс. А можно ещё больше конкретики?

 

[anotcher]

Класс. А можно ещё больше конкретики?

Пишу с телефона, постораюсь описать как смогу без скриншота. Установил код из мануала, все как положено, ставлю юникод "корзины" (f1f8) и вместо иконки корзинки белый квадратик, как будто битая картинка, а к примеру f179 "Apple" нормально отображается. Проверял многие варианты, часть иконок почему-то не работает.

OFFTOP

кажется разобрался в чем проблема

Надо подходящий тип иконки ставить, а я на бренды иконку корзины пытался впихнуть))

 

[Lenny]

Подкажите, как поменять иконку страницы таким же образом. f15c. С разделами получилось, но в странице нет id.

 

[Mirovinger]

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

 

[Lenny]

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

Да, точно. Спасибо

 

[Isoff]

Подскажите пожалуйста почему цвет не применяется ?

 

[Mirovinger]

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

 

[Isoff]

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

Полный вставлять не буду вот так у меня стоит.

.node-icons (4; e07e; green; Brands);

На выходе вот что получается:


Хотя цвет указан зелёный

У меня стоит последняя версия движка, может из за этого проблема ?
Код брал тот что под 2.0

.node-icons (@node-id; @fa-uid; @color: false; @fa-size: false) {
    .node--id@{node-id} {
        .node-icon i {
            & when (isnumber(@fa-size)) {
                font-size: @fa-size;
            }
            &:before {
                color: @xf-nodeIconReadColor;
                text-shadow: 1px 1px 0.5px fade(xf-intensify(@xf-nodeIconReadColor, 50%), 50%);
                .node--unread&    {
                    & when (iscolor(@color)) {
                        opacity: 1;
                        color: @color;
                        text-shadow: 1px 1px 0.5px fade(xf-intensify(@color, 50%), 50%);
                    }
                }

                .node--forum&,
                .node--category& {
                    content:"\@{fa-uid}";
                }
                .node--page& {
                    content:"\@{fa-uid}";
                }
                .node--link& {
                    content:"\@{fa-uid}";
                }
            }
        }
    }
}

// Кастомные иконки Font Awesome для разделов
.node-icons (4; e07e; green; Brands);
// Здесь код иконок Font Awesome для разделов, каждый с новой строки

 

[Mirovinger]

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

 

[Isoff]

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

А я то голову сижу ломаю, почему иконка цвет не применяет, а готового кода нету что-бы один цвет был у прочитанных и нет ?

 

[Mirovinger]

.node-icons (@node-id; @fa-uid; @color: false; @fa-type: false; @fa-size: false) {
    .node--id@{node-id} {
        .node-icon i {
            & when (isnumber(@fa-size)) {
                font-size: @fa-size;
            }
            &:before {
                & when (@fa-type = false) {
                    .m-faBase();
                }
                & when (@fa-type = Brands) {
                    .m-faBase('Brands');
                }
                & when (iscolor(@color)) {
                    color: @color;
                }
                text-shadow: 1px 1px 0.5px fade(xf-intensify(@xf-nodeIconReadColor, 50%), 50%);
                .node--unread&    {
                    & when (iscolor(@color)) {
                        opacity: 1;
                        color: @color;
                        text-shadow: 1px 1px 0.5px fade(xf-intensify(@color, 50%), 50%);
                    }
                }

                .node--forum&,
                .node--category& {
                    content:"\@{fa-uid}";
                }
                .node--page& {
                    content:"\@{fa-uid}";
                }
                .node--link& {
                    content:"\@{fa-uid}";
                }
            }
        }
    }
}

// Кастомные иконки Font Awesome для разделов
.node-icons (90; e07e; green; Brands);
// Здесь код иконок Font Awesome для разделов, каждый с новой строки