Как изменить иконки разделов xenforo

Статус: В этой теме нельзя размещать новые ответы.

#1

Всем привет!

подскажите, а как в XenForo 2 … поменять иконки данных разделов (форумов)

Что-то нужно подобное плагину: Custom Node Icon

Спасибо!

West14

Меценат
#2

#3

Нужны цветные, т.е установленные картинки, но за этот способ тоже спасибо!

#4

Нужны цветные, т.е установленные картинки, но за этот способ тоже спасибо!

Если нужны иные иконки, то никто не мешает это сделать, у каждого блока-форума есть свой класс

, берём его, добираемся до блока с картинкой и вставляем свою. (Все через extra.less)

Статус: В этой теме нельзя размещать новые ответы.

Контакты

ООО «АЕЗА ГРУПП»
ИНН 2312304914
ОГРН 1212300056430
г. Краснодар, ул. Маяковского 160, офис 2.4

Источник

Hope

#1

Пользователь Hope разместил новый ресурс:

Заменяем стандартные иконки форумов на свои — Замена стандартных иконок форумов на собственные.

Что получится:
Посмотреть вложение 67934 Посмотреть вложение 67935

В шаблон extra.less добавляем:
Код:
.node--forum.node--id2.node--read .node-icon i:before
{content: "f179";
color:silver
}
.node--forum.node--id2.node--unread .node-icon i:before
{content: "f179";
color:green
}
На примере заменены иконки для форума с ID3. Цвета для прочитанных и непрочитанных иконок уже подберёте сами, ну и так же не забудьте заменить ID на свои.
Можно вставить картинку вместо…

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

viper

#2

хм… сделал так

HTML:

.node--forum.node--id2.node--read .node-icon i:before
{background-image: url(/styles/default/xenia/icon_read.png);
}

получаю такое

накладывается стандартная иконка на заданную в extra.less

Hope

#3

Конечно. Стандартные нужно скрыть сначала же.

Скрываем иконки:

Код:

.node-icon i {
    display: none;
}

Свои вставляем таким образом:

Код:

.node--forum.node--id2.node--read .node-icon
{background-image: url(http://icons.iconarchive.com/icons/itzikgur/my-seven/32/Girls-Blue-Dress-icon.png);
}

Даже с картинками я бы лучше сделал так:

Код:

.node--forum.node--id2.node--read .node-icon
{
    background-image: url('http://icons.iconarchive.com/icons/itzikgur/my-seven/32/Girls-Blue-Dress-icon.png');
    background-repeat: no-repeat;
    background-position: 10px;
}

viper

#4

Конечно. Стандартные нужно скрыть сначала же.

Скрываем иконки:
Код:
.node-icon i {
    display: none;
}
Свои вставляем таким образом:
Код:
.node--forum.node--id2.node--read .node-icon
{background-image: url(http://icons.iconarchive.com/icons/itzikgur/my-seven/32/Girls-Blue-Dress-icon.png);
}
Даже с картинками я бы лучше сделал так:
Код:
.node--forum.node--id2.node--read .node-icon
{
    background-image: url('http://icons.iconarchive.com/icons/itzikgur/my-seven/32/Girls-Blue-Dress-icon.png');
    background-repeat: no-repeat;
    background-position: 10px;
}

спасибо

Skaiman

#5

Можно вставить картинку вместо Font Awesome.

Можно и другой иконочный шрифт использовать, так же сделать свой.

Да еще, надо уже учится использовать less и новый синтаксис для font awesome

CSS:

.node--forum {
    &.node--id2 {
        &.node--read {
            .node-icon {
                i {
                    &:before {
                        .m-faContent(@fa-var-apple);
                        color: silver;
                    }
                }
            }
        }
        &.node--unread {
            .node-icon {
                i {
                    &:before {
                        .m-faContent(@fa-var-apple);
                        color: green;
                    }
                }
            }
        }
    }
}

Hope

#6

Значения по сути не имеет. Такая простыня здесь не оправдана. less удобен при использовании большого кода, чтобы упростить процесс. Для мелкого — он не обязателен.

Skaiman

#7

Hope, не прав, даже в малом есть упрощение, если посмотреть нет там простыни, да лан не важен конкретный случай, а важно, что надо переходить на less

Hope

#8

Да, согласен, надо потихоньку как-то.

Да, кстати код в мануале был взят из примера Криса.

Hope

#10

Конечно. Там иконки и так меняются через настройки стиля. Зайдите туда уже и начните разбираться.

#11

Hope, там нельзя выставить определённую иконку для определённого форума, там одна ко всем идёт

DeG

#12

а для ссылок как сделать?

#13

А теперь на скрине, я возможно и понял, но всегда наглядно показать лучше.

DeG

#14

А теперь на скрине, я возможно и понял, но всегда наглядно показать лучше.

вот это на свою иконку как заменить, да бы под каждый линк разную иконку делать?

Последнее редактирование: 10 Дек 2017

#15

CSS:

.node--link {
    &.node--id9 {
        .node-icon {
            i:before {
                content: "f179";
                color: silver;
            }
        }
    }
}

DeG

#16

CSS:

.node--link {
    &.node--id9 {
        .node-icon {
            i:before {
                content: "f179";
                color: silver;
            }
        }
    }
}

а если через

HTML:

{
    background-image: url('');
    background-repeat: no-repeat;
    background-position: 10px;
}

будет работать?

решил вопрос

HTML:

.node--link.node--id12 .node-icon
{
    background-image: url('ссылка к иконке размер 36х36');
    background-repeat: no-repeat;
    background-position: 10px;
}

#17

Будет, но всё это обычно записывается одной строчкой.

DeG

#18

Будет, но всё это обычно записывается одной строчкой.

ок, спасибо за подсказку

#19

как сделать:
под каждый раздел свою иконку ?
не под общею, а под каждую.

#20

как сделать:
под каждый раздел свою иконку ?
не под общею, а под каждую.

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

Источник

#1

При обновлении на версию 2.1 — иконки разделов перестали работать, ранее делали модификацию шаблона вот таким методом:

В админке идём по такому пути.
Внешний вид > Модификации шаблонов
Модификацию так-то можно создать только в режиме отладки, но так же находясь в разделе модификаций шаблона, можно просто дописать — add в адресной строке и создать без включения отладки.
Или можно сразу перейти по адресу — /admin.php?template-modifications/add.
Заполняем поля.
Шаблон: node_list_forum
Ключ модификации: node_list_forum_forumicons
Описание: Любое, это как заметка, что делалось.
Тип поиска: Простая замена
Найти: arg-bonusInfo="">
Заменить:

Код:

$0
<xf:css>
.node.node--id{$node.node_id}.node--read .node-icon i {
    background: url("/styles/forumicons/ID{$node.node_id}_old.png") repeat scroll 0 0 / contain ;
}
.node.node--id{$node.node_id} .node-icon i {
    background: url("/styles/forumicons/ID{$node.node_id}_new.png") repeat scroll 0 0 / contain ;
}
.node i:before {
    content: "" !important;
}
</xf:css>

Для того, что бы установить иконку на нужный раздел, нужно создать в каталоге — styles, папку — forumicons.
В forumicons, мы будем загружать иконки для разделов по такому принципу.
ID{$node.node_id}_old.png — иконка прочитанного раздела.
ID{$node.node_id}_new.png — иконка не прочитанного раздела.
Где — {$node.node_id}, это ид нужного раздела, можно посмотреть зайдя в сам раздел в адресной строке, цифры в конце.

Что не так? Где ошибка?

J

Jumuro
31.01.2019

CSS:

$0
<xf:css>
.node.node--id{$node.node_id}.node--forum.node--read .node-icon {
    background-image: url("/styles/forumicons/ID{$node.node_id}_old.png");
}
.node.node--id{$node.node_id}.node--forum.node--unread .node-icon {
    background-image: url("/styles/forumicons/ID{$node.node_id}_new.png");
}
.node-icon {
    background-size: 36px;
    background-repeat: no-repeat;
    background-position: 10px center;
}
.node.node--forum i:before {
    content: none !important;
}
</xf:css>

#2

CSS:

$0
<xf:css>
.node.node--id{$node.node_id}.node--forum.node--read .node-icon {
    background-image: url("/styles/forumicons/ID{$node.node_id}_old.png");
}
.node.node--id{$node.node_id}.node--forum.node--unread .node-icon {
    background-image: url("/styles/forumicons/ID{$node.node_id}_new.png");
}
.node-icon {
    background-size: 36px;
    background-repeat: no-repeat;
    background-position: 10px center;
}
.node.node--forum i:before {
    content: none !important;
}
</xf:css>

#3

Отлично! Спасибо! Все работает 👍

Источник

Читайте также: