Свои иконки разделов

root · 14 Дек 2017

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

Свои иконки разделов - Свои иконки разделов

Код:
1. Отключаем стандартные иконки

Код:

.node-icon i { display: none; }

2. По номеру добавляем:

Код:

.node--forum.node--id8.node--read .node-icon { background-image: url('../styles/default/xenforo/icons/xenforoinfo.png'); background-repeat: no-repeat; background-position: 10px; } node--forum.node--id8.node--unread .node-icon { background-image: url('../styles/default/xenforo/icons/xenforoinfo.png'); background-repeat: no-repeat; background-position: 10px...

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

Lukilian · 14 Дек 2017

Я бы посоветовал не использовать классы .node--forum, .node--link и .node--page, так как они специфические, для форума, ссылки и страницы, использовать просто .node

Less:

.node {
    &.node--id8 {
        &.node--read {
            .node-icon {
                background: url('styles/default/xenforo/icons/read.png') no-repeat center;
            }
        }
        &.node--unread {
            .node-icon {
                background: url('styles/default/xenforo/icons/unread.png') no-repeat center;
            }      
        }
    }
}

CSS:

.node.node--id8.node--read .node-icon {
  background: url('styles/default/xenforo/icons/read.png') no-repeat center;
}
.node.node--id8.node--unread .node-icon {
  background: url('styles/default/xenforo/icons/unread.png') no-repeat center;
}

Еще, не надо указывать глубину вложенности ../styles

SkyLoKi · 14 Дек 2017

У меня было реализовано на форуме таким образом:

Less:

.node{
&--read .node-icon i{
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
    }
    &--id4 i{
        background: url('/styles/node_icons/rage.png');
        background-size: contain;
        &:before{content:" "!important;}
    }  
   
    &--id42 i{
        background: url('/styles/node_icons/gtmp.png');
        background-size: contain;
        &:before{content:" "!important;}
    }
/*И т.д.*/

}

Где иконка раздела используется цветная (она же и отображается для новых сообщений), а прочитанная становится серой (filter grayscale)

TestingPage · 18 Дек 2017

SkyLoKi написал(а):
У меня было реализовано на форуме таким образом:

...

Спасибо, использую Ваше решение.

Но дело вот в чём. У меня иконки разделов есть как 32х32, так и 70х32. Соответственно те, что 70х32 - налезают на ссылку-название раздела. Может кто посмотреть и подсказать решение для конкретных разделов, у которых эти 70х32 иконки? Как ни крутил паддинги - не получилось. Заранее спасибо, пациент в ЛС.

Mirovinger · 18 Дек 2017

Можно, только можно и здесь было написать, но раз решили так...

В extra.less.

CSS:

.block--category6 .node-icon {
  width: 75px;
}

Где category6, это Ид категории.

SkyLoKi · 18 Дек 2017

TestingPage, так по хорошему у меня используется: background-size: contain;
Это свойство подгоняет картинку так, чтобы она целиком поместилась внутрь блока.

Mirovinger · 18 Дек 2017

Так-то оно так, но те картинки, не желательно, по этому и предложил решение выше.

Soanymore · 5 Янв 2018

SkyLoKi написал(а):
У меня было реализовано на форуме таким образом:

Less:

.node{ &--read .node-icon i{ -webkit-filter: grayscale(100%); filter: grayscale(100%); } &--id4 i{ background: url('/styles/node_icons/rage.png'); background-size: contain; &:before{content:" "!important;} } &--id42 i{ background: url('/styles/node_icons/gtmp.png'); background-size: contain; &:before{content:" "!important;} } /*И т.д.*/ }

Где иконка раздела используется цветная (она же и отображается для новых сообщений), а прочитанная становится серой (filter grayscale)

Делаю по вашему, все получается, ну проблема есть, если делаешь иконку в подраздели, то отображается стандартные:

Skaiman · 5 Янв 2018

algorithm написал(а):
Делаю по вашему, все получается, ну проблема есть, если делаешь иконку в подраздели, то отображается стандартные:

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

Soanymore · 5 Янв 2018

Skaiman написал(а):
А какие они должны быть, что указано, то и отображается, ты же делаешь для определенных разделов.

Если в сам раздел зайти, то отображаются иконки, а вот на скриншоте они стандартные, т.е в одном месте так, в другом так

Badboy · 8 Янв 2018

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

Dead Master · 8 Янв 2018

Badboy написал(а):
По этому у кого достаточно большой проект проще будет установив плагин, благо он уже есть.

я что то пропустил за праздники?
на 2.хх вроде нет еще

Badboy · 8 Янв 2018

Мне попадался, причем на этом форуме. Только как мне помнится там уже заложены иконки и свои не вставить. Но я думаю это решаемый вопрос если уж так сильно надо.

[cv6] NodeIcons
вот оно, хотя возможно чуть чуть не то что искали

Classic · 8 Янв 2018

Dead Master,

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

- xenforo.com или официальная страница расширения

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

Badboy · 8 Янв 2018

Ша полетят просьбы слить плагин :)

Mirovinger · 8 Янв 2018

Да-да, только как купите.

Badboy · 26 Янв 2018

Кто еще не в теме то плагин уже выложен тут [XFA] Nodes Icon Tweak - XF2, спасибо Mirovinger!

Майк09 · 20 Фев 2018

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

Свои иконки разделов - Свои иконки разделов

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

при таком размещение кода
одну показывает иконку вторую нет
стандартный шаблон
в чем может быть проблема

Dialog · 12 Дек 2018

Сделано так, может кому поможет. Все картинки разрешения 36х36, встают отлично по центру.

Less:

.node {
    i {
        height: 34px;
        width: 34px;
    }
    /* ======== ArcheAge ======== */
    &.node--id66 {
        &.node--read {
            .node-icon {
                i:before {
                    content: url('styles/default/xenforo/my_custom_icons/node_aa_read.png');
                }
            }
        }
        &.node--unread {
            .node-icon {
                i:before {
                    content: url('styles/default/xenforo/my_custom_icons/node_aa_unread.png');
                }
            }   
        }
    }
    /* ======== BDO ======== */
    &.node--id67 {
        &.node--read {
            .node-icon {
                i:before {
                    content: url('styles/default/xenforo/my_custom_icons/node_bdo_read.png');
                }
            }
        }
        &.node--unread {
            .node-icon {
                i:before {
                    content: url('styles/default/xenforo/my_custom_icons/node_bdo_unread.png');
                }
            }   
        }
    }
    /* ======== REVELATION ======== */
    &.node--id111 {
        &.node--read {
            .node-icon {
                i:before {
                    content: url('styles/default/xenforo/my_custom_icons/node_rev_read.png');
                }
            }
        }
        &.node--unread {
            .node-icon {
                i:before {
                    content: url('styles/default/xenforo/my_custom_icons/node_rev_unread.png');
                }
            }   
        }
    }   
}

ps: это что-то вроде тегов для поиска по форуму. Свои иконки для узлов, картинка узла, оформление узла, оформление раздела

bigbrain911 · 6 Апр 2019

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

Код:

.node--forum.node--id8.node--read .node-icon

{

    background-image: url('../styles/default/xenforo/icons/xenforoinfo.png');

    background-repeat: no-repeat;

    background-position: 10px;

}

node--forum.node--id8.node--unread .node-icon

{

    background-image: url('../styles/default/xenforo/icons/xenforoinfo.png');

    background-repeat: no-repeat;

    background-position: 10px;

}

Свои иконки разделов

root

Lukilian

SkyLoKi

TestingPage

Mirovinger

SkyLoKi

Mirovinger

Soanymore

Вложения

Skaiman

Soanymore

Badboy

Dead Master

Badboy

Classic

Badboy

Mirovinger

Badboy

Майк09

Dialog

bigbrain911

Похожие темы

Мы ценим вашу конфиденциальность