1. Приветствуем Вас на неофициальном форуме технической поддержки XenForo на русском языке. XenForo - новый и перспективный форумный движок от бывших создателей vBulletin.

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

Тема в разделе "Модификации шаблонов", создана пользователем Romchik®, 24 янв 2011.

Загрузка
  1. Tetatet

    Tetatet Активный пользователь

    Регистрация:
    14.12.11
    Сообщения:
    25
    Симпатии:
    3
    Версия XF:
    1.1.0 Final
    Такая же проблема - для раздела-ссылки не отображает иконку, она просто исчезает... версия 1.2.0 лицензия
    и к слову - стоит ли обновляться до 1.3 !?
    Используемый код
    Код:
    .node .node_20 .linkNodeInfo .nodeIcon {
      background-image:url("@imagePath/xenforo/widgets/forum-read-20.png") !important;
    }
    .node .node_20 .linkNodeInfo.unread .nodeIcon {
      background-image:url("@imagePath/xenforo/widgets/forum-unread-20.png") !important;
    }
    разрешение сделал 36х36, (и возможно ли другие разрешения, как 81х31 ?)
     
  2. shaman480

    shaman480 Местный

    Регистрация:
    22.12.10
    Сообщения:
    640
    Симпатии:
    477
    Версия XF:
    1.4.3
    Вот ответ на Ваш вопрос. Там же используются спрайты, и Вы забыли что идет смещение по файлу спрайта.
    Добавляем нестандартные, собственные иконки для разделов
     
    Tetatet нравится это.
  3. Tetatet

    Tetatet Активный пользователь

    Регистрация:
    14.12.11
    Сообщения:
    25
    Симпатии:
    3
    Версия XF:
    1.1.0 Final
    Огромное вам спасибо! Действительно достаточно было добавить
    background-position: 0px 0px к коду первого поста этой ветки, что бы заменить иконки для раздела-ссылки, как и для других разделов форума XenForo 1.2. и выше.
     
  4. Vitala

    Vitala Активный пользователь

    Регистрация:
    23.04.13
    Сообщения:
    124
    Симпатии:
    4
    Версия XF:
    1.1.4
    К сожалению не работает ни в категориях, ни в разделах, форум просто никак не реагирует, стиль аврора, версия движка 1.2.4. Пример кода:

    .node .node_1 .nodeIcon {background: url('@imagePath/styles/aurora/xenforo/icons/1.png');}
    .node .node_1 .unread .nodeIcon {background: url('@imagePath/styles/aurora/xenforo/icons/1.png');}

    Подскажете как вылечить?
     
  5. AvCrash

    AvCrash Местный

    Регистрация:
    09.07.12
    Сообщения:
    121
    Симпатии:
    17
    Версия XF:
    1.3.2
    .node .node_3 .forumNodeInfo .nodeIcon, .node .node_3 .categoryForumNodeInfo .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-read-3.png");
    }
    .node .node_3 .forumNodeInfo.unread .nodeIcon, .node .node_3 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-unread-3.png"); background-position: 0px 0px !important;
    }
     
    Mirovinger и Vitala нравится это.
  6. Vitala

    Vitala Активный пользователь

    Регистрация:
    23.04.13
    Сообщения:
    124
    Симпатии:
    4
    Версия XF:
    1.1.4
    Спасибо.
     
  7. resonansER

    resonansER Местный

    Регистрация:
    19.08.11
    Сообщения:
    460
    Симпатии:
    290
    Версия XF:
    1.5.6
    Ковырялся целую ночь. НЕ ХОЧЕТ видеть спрайты хоть ты тресни! Позицию 0px 0px видит без проблем. Хоть с !important;, хоть без. Но дальше всё пофиг. :mad:
    Код:
    /**** NODE_2 ICON ****/
    .node.node_2 .forumNodeInfo .nodeIcon, .node .node_2 .categoryForumNodeInfo .nodeIcon {
    background-image: url("styles/srites.png");
    background-position: 64px 128px !important;
    background-repeat: no-repeat;
    height: 64px;
    width: 64px;
    opacity: 0.5;
    }
    
    .node .node_2 .forumNodeInfo.unread .nodeIcon, .node .node_2 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("styles/sprites.png");
    background-position: 64px 128px !important;
    background-repeat: no-repeat;
    height: 64px;
    width: 64px;
    opacity: 1.0;
    }
    /**** NODE_2 ICON ****/
     
  8. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    221
    Версия XF:
    1.4.0
    А можно Вашу картинку посмотреть? Там как бы позиция 0 0 - это крайняя левая/верхняя, а другие идут с значением минус.
     
    Последнее редактирование: 11 июл 2014
  9. Romchik®

    Romchik® The Power of Dreams Команда форума

    Регистрация:
    26.09.10
    Сообщения:
    5.736
    Симпатии:
    5.263
    Версия XF:
    1.5.10
    Без примера для проверки в браузере трудно сказать, в чем проблема. Если еще актуально конечно.
     
  10. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    221
    Версия XF:
    1.4.0
    1. Пример. Имеем картинку шириной 64px высотой 192px:

    sprait_01.png

    Получается у нас три иконки 64х64 пикселей.
    • Красная background-position: 0 0;
    • Синяя background-position: 0 -64px;
    • Зеленая background-position: 0 -128px;
    2. Пример. Картинка шириной 128px высотой 192px:

    sprait_02.png

    Шесть иконок 64х64 пикселей
    • Зеленая background-position: 0 0;
    • Синяя background-position: 0 -64px;
    • Красная background-position: 0 -128px;
    • Оранжевая background-position: -64px 0;
    • Розовая background-position: -64px -64px;
    • Желтая background-position: -64px -128px;
    Да еще надо сделать картинки как блочный элемент display: block;
    Получиться типа так:
    Код:
    /**** NODE_2 ICON ****/
    .node.node_2 .forumNodeInfo .nodeIcon, .node .node_2 .categoryForumNodeInfo .nodeIcon {
    background-image: url("styles/srites.png");
    display: block;
    background-position: 0 0;
    background-repeat: no-repeat;
    height: 64px;
    width: 64px;
    opacity: 0.5;
    }
    
    .node .node_2 .forumNodeInfo.unread .nodeIcon, .node .node_2 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("styles/sprites.png");
    display: block;
    background-position: -64px -128px;
    background-repeat: no-repeat;
    height: 64px;
    width: 64px;
    opacity: 1.0;
    }
    /**** NODE_2 ICON ****/
    А !important, можно присвоить только самой картинке, ей будет задан приоритет:
    Код:
    background-image: url("styles/sprites.png")!important;
    значить приоритет для ее позиции уже не важен.
     
    Последнее редактирование: 13 июл 2014
    sTepa4ka, AvCrash, Romchik® и 2 другим нравится это.
  11. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    221
    Версия XF:
    1.4.0
    Решил немного продолжить с утра :)

    Если для нескольких классов используется одна картинка спрайтов, то можно их объединить, а отдельно указать только позиционирование и другие стили применяемые именно только для этой позиции спрайта (в данном случае прозрачность):
    Код:
    .class_1, .class_2, .class_3, .class_4, #id_5, #id_6 {
        background-image: url("styles/srites.png");
        display: block;
        background-repeat: no-repeat;
        height: 64px;
        width: 64px;
    }
    .class_1 {
        background-position: 0 0;
        opacity: 0.5;
    }
    .class_2 {
        background-position: 0 -64px;
        opacity: 0.6;
    }
    .class_3 {
        background-position: 0 -128px;
        opacity: 0.7;
    }
    .class_4 {
        background-position: -64px 0;
        opacity: 0.8;
    }
    #id_5 {
        background-position: -64px -64px;
    }
    #id_6 {
        background-position: -64px -128px;
    }
    
     
    Последнее редактирование: 13 июл 2014
    sTepa4ka, AvCrash, Romchik® и 2 другим нравится это.
  12. resonansER

    resonansER Местный

    Регистрация:
    19.08.11
    Сообщения:
    460
    Симпатии:
    290
    Версия XF:
    1.5.6
    Я уже установил иконки, но не спрайтами. В этом случае всё работает как часы.
    Но для меня актуально именно в этом случае использовать спрайты. Поэтому, я попробую варианты, предложенные @Skaiman и после отпишу. Возможно, что не было установлено значение display: block;
     
  13. Денис12345

    Денис12345 Новичок

    Регистрация:
    31.07.14
    Сообщения:
    1
    Симпатии:
    0
    Версия XF:
    1.3.4
  14. AvCrash

    AvCrash Местный

    Регистрация:
    09.07.12
    Сообщения:
    121
    Симпатии:
    17
    Версия XF:
    1.3.2
    Наверное, как бы, настройки плагина в студию? Никто ж не обладает знаниями что у вас не работает и почему
     
  15. Dassuk

    Dassuk Пользователь

    Регистрация:
    28.08.14
    Сообщения:
    10
    Симпатии:
    0
    Версия XF:
    1.4.0
    [​IMG]
    Делаю как в первом посте, вставляю код в шаблон EXTRA.css. Почему-то некоторые иконки нормально, а некоторые не полностью отображаются. Проблема не в самой иконке, пробовал одну и туже иконку, в одном случае отображается, в другом нет или не полностью. В чем проблема?
     
    Последнее редактирование: 5 сен 2014
  16. Romchik®

    Romchik® The Power of Dreams Команда форума

    Регистрация:
    26.09.10
    Сообщения:
    5.736
    Симпатии:
    5.263
    Версия XF:
    1.5.10
    Да в чем угодно.
    И кстати, размер иконок должен быть одинаковым для всех.
     
  17. Dassuk

    Dassuk Пользователь

    Регистрация:
    28.08.14
    Сообщения:
    10
    Симпатии:
    0
    Версия XF:
    1.4.0
    Код:
    /* custom status icons */
    .node .node_2 .forumNodeInfo .nodeIcon,
    .node .node_2 .categoryForumNodeInfo .nodeIcon {
      background-image:url("@imagePath/xenforo/widgets/forum-read-2.png");
    }
    .node .node_2 .forumNodeInfo.unread .nodeIcon,
    .node .node_2 .categoryForumNodeInfo.unread .nodeIcon {
      background-image:url("@imagePath/xenforo/widgets/forum-unread-2.png");
    }
    
    .node .node_18 .forumNodeInfo .nodeIcon,
    .node .node_18 .categoryForumNodeInfo .nodeIcon {
      background-image:url("@imagePath/xenforo/widgets/forum-read-18.png");
    }
    .node .node_18 .forumNodeInfo.unread .nodeIcon,
    .node .node_18 .categoryForumNodeInfo.unread .nodeIcon {
      background-image:url("@imagePath/xenforo/widgets/forum-unread-18.png");
    }
    
    .node .node_5 .forumNodeInfo .nodeIcon,
    .node .node_5 .categoryForumNodeInfo .nodeIcon {
      background-image:url("@imagePath/xenforo/widgets/forum-read-5.png");
    }
    .node .node_5 .forumNodeInfo.unread .nodeIcon,
    .node .node_5 .categoryForumNodeInfo.unread .nodeIcon {
      background-image:url("@imagePath/xenforo/widgets/forum-unread-5.png");
    }
     
    .node .node_6 .forumNodeInfo .nodeIcon,
    .node .node_6 .categoryForumNodeInfo .nodeIcon {
      background-image:url("@imagePath/xenforo/widgets/forum-read-6.png");
    }
    .node .node_6 .forumNodeInfo.unread .nodeIcon,
    .node .node_6 .categoryForumNodeInfo.unread .nodeIcon {
      background-image:url("@imagePath/xenforo/widgets/forum-unread-6.png");
    }
    
    Взял стандартную иконку forum-read.png и в нее в фотошопе вставлял другие картинки. Все файлы 40х40 пикселей, 72 пикселя на дюйм. Добавлял на форум по одной картинке. Четверная иконка на форуме не появилась (forum-read-6.png). Проверял в гугхроме. Если открыть форум в IE11, то также не отображается первая картинка, и отображается только краешек третьей картинки:
    [​IMG]
    Ссылка на иконки: https://yadi.sk/d/2ZHHunbob86g7
    Ссылка на форум: http://bazaznaniy.net/
     
  18. Dassuk

    Dassuk Пользователь

    Регистрация:
    28.08.14
    Сообщения:
    10
    Симпатии:
    0
    Версия XF:
    1.4.0
    Нашел закономерность. В IE11 картинки отображаются по другому, потому что там я заходил на форум как гость. Почему так, под админом видны одни картинки, под гостем другие, под пользователем опять по другому?
     
  19. Dassuk

    Dassuk Пользователь

    Регистрация:
    28.08.14
    Сообщения:
    10
    Симпатии:
    0
    Версия XF:
    1.4.0
    Подскажите, в каком направлении искать ошибку.
     
  20. Romchik®

    Romchik® The Power of Dreams Команда форума

    Регистрация:
    26.09.10
    Сообщения:
    5.736
    Симпатии:
    5.263
    Версия XF:
    1.5.10
    Во-первых, у вас иконки 40x40, хотя в стилях указано все еще старое значение - 36x36.
    Во-вторых, иконки не отображаются от того, что в CSS все еще есть части от стандартного стиля, где используются спрайты. Поэтому у разделов с прочитанными сообщениями отображается иконка боле-менее нормально, а для непрочитанных там используется смещения для спрайта. А так как спрайта нет, то смещается иконка и в итоге получается пустое место.

    Чтобы поправить это, нужно зайти в Настройки стиля и поменять CSS в секции Иконки узлов.
    Придется убрать позицию для спрайтов у непрочитанных/страниц и ссылок и вместо спрайта использовать отдельные иконки.
    Там же можно изменить и размер иконок.

    Короче говоря, либо делаете то, что я описал выше и отказываетесь от спрайтов, либо все свои иконки переводите в спрайт.

    Второй вариант более правилен с технической точки зрения, но с ним намного больше геморроя.

    Обновил инструкцию в первом сообщении.
     
    Последнее редактирование: 9 сен 2014
    FractalizeR, Mirovinger и Dassuk нравится это.

Поделиться этой страницей