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

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

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

Загрузка
  1. Romchik®

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

    Регистрация:
    26.09.10
    Сообщения:
    5.740
    Симпатии:
    5.269
    Версия XF:
    1.5.11
    Инструкция обновлена 09.09.14 и 100% актуальна для версии 1.4.0.

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

    Способ 1 (с использованием спрайтов)

    Данный способ является правильным с технической точки зрения, но он значительно сложнее, особенно, если спрайтов будет уж очень много. Здесь также нужен какой-либо графический редактор для редактирования спрайтов.
    1. Стандартный спрайт с иконками разделов node-sprite.png находится в папке styles/default/xenforo. Открываем его в графическом редакторе и добавляем свои иконки справа (размер изображения по ширине при этом, понятное дело нужно будет увеличить).
      Вот так выглядит спрайт по умолчанию:
      node-sprite.png
      И сразу дельный совет. Сохраняйте свой собственный спрайт под новым именем, чтобы при обновлении форума не бояться перезаписать файл.
      К примеру, я добавил в спрайт всего одну иконку в двух состояниях - прочитано и непрочитано. Выглядит мой спрайт теперь вот так:
      node-sprite-my.png
    2. Теперь, если вы последовали моему совету и переименовали спрайт с иконками, то идем в Настройки стиля в секцию Иконки узлов и меняем в четырех местах для иконки узла (раздел, непрочитано, ссылка, страница) путь к нашему новому изображению.
    3. Теперь нам нужно узнать ID раздела, для которого мы хотим изменить иконку. Сделать это просто. Наводим курсор на имя раздела и смотрим URL. В конце стоит цифра, которая и есть ID раздела. Например здесь Новости XenForo имеет ID 21.
    4. Открываем шаблон EXTRA.css и дописываем стиль.
      Для разделов:
      Код:
      /* custom status icons */
      .node .node_21 .forumNodeInfo .nodeIcon,
      .node .node_21 .categoryForumNodeInfo .nodeIcon {
         background-position:-144px 0;
      }
      .node .node_21 .forumNodeInfo.unread .nodeIcon,
      .node .node_21 .categoryForumNodeInfo.unread .nodeIcon {
         background-position:-180px 0;
      }
      Тут важно понимать, откуда берутся цифры 144 и 180. Это расстояние в спрайте от левого края до начала области нужной нам иконки. То есть, чем дальше находится иконка от правого края, тем выше будет число. Так как спрайт смещается влево, то число имеет отрицательное значение. Если размер иконок у вас остался без изменений (36px), то каждое следующее число будет больше на 36 пикселей.
      node-sprite-ps.png
      И, естественно, если ID раздела у вас другой, то и номер в стилях должен отличаться. Например, если хотим добавить иконки для еще одного раздела и он имеет ID 4, то необходимо просто дописать ниже еще CSS:
      Код:
      .node .node_4 .forumNodeInfo .nodeIcon,
      .node .node_4 .categoryForumNodeInfo .nodeIcon {
         background-position:-216px 0 !important;
      }
      .node .node_4 .forumNodeInfo.unread .nodeIcon,
      .node .node_4 .categoryForumNodeInfo.unread .nodeIcon {
         background-position:-252px 0 !important;
      }
      Для подразделов:
      Код:
      .node_21 .forumNodeInfo .nodeIcon,
      .node_21 .categoryForumNodeInfo .nodeIcon {
         background-position:-216px 0 !important;
      }
      .node_21 .forumNodeInfo.unread .nodeIcon,
      .node_21 .categoryForumNodeInfo.unread .nodeIcon {
         background-position:-252px 0 !important;
      }
      Для разделов-ссылок:
      Код:
      .node .node_21 .linkNodeInfo .nodeIcon {
         background-position:-216px 0 !important;
      }
      .node .node_21 .linkNodeInfo.unread .nodeIcon {
         background-position:-252px 0 !important;
      }
      Для разделов-страниц:
      Код:
      .node .node_21 .pageNodeInfo .nodeIcon {
         background-position:-216px 0 !important;
      }
      .node .node_21 .pageNodeInfo.unread .nodeIcon {
         background-position:-252px 0 !important;
      }
      Не забываем про расстояние в пикселях. Для каждой новой иконки оно будет отличаться.

    Способ 2 (без использования спрайтов)

    Минус данного подхода в том, что для каждой иконки будет посылаться HTTP-запрос. Это не сильно страшно, но если вы маньяк оптимизации, то луче использовать все же первый способ.
    1. Для начала нам нужно узнать ID раздела, для которого мы хотим изменить иконку. Сделать это просто. Наводим курсор на имя раздела и смотрим URL. В конце стоит цифра, которая и есть ID раздела. Например здесь Новости XenForo имеет ID 21.
    2. Создаем 2 иконки с именами:
      • forum-unread-21.png - есть непрочитанные сообщения в разделе.
      • forum-read-21.png - нет непрочитанных сообщений.
      Заливаем их в папку styles/default/xenforo/widgets/
    3. Теперь идем в Настройки стиля в секцию Иконки узлов и меняем пути со спрайта на отдельные иконки в четырех местах:
      • Поле Позиция должно быть пустым у всех четырех!
      • Иконка узла: раздел
        @imagePath/xenforo/widgets/forum-read.png
      • Иконка узла: непрочитано
        @imagePath/xenforo/widgets/forum-unread.png
      • Иконка узла: страница
        @imagePath/xenforo/widgets/page.png
      • Иконка узла: ссылка
        @imagePath/xenforo/widgets/link.png
    4. Открываем шаблон EXTRA.css и дописываем стиль.
      Для разделов:
      Код:
      /* custom status icons */
      .node .node_21 .forumNodeInfo .nodeIcon,
      .node .node_21 .categoryForumNodeInfo .nodeIcon {
        background-image:url("@imagePath/xenforo/widgets/forum-read-21.png");
      }
      .node .node_21 .forumNodeInfo.unread .nodeIcon,
      .node .node_21 .categoryForumNodeInfo.unread .nodeIcon {
        background-image:url("@imagePath/xenforo/widgets/forum-unread-21.png");
      }
      Естественно, если ID раздела у вас другое, то и номер в стилях должен отличаться. Например, если хотим добавить иконки для еще одного раздела и он имеет ID 4, то необходимо просто дописать ниже еще CSS:
      Код:
      .node .node_4 .forumNodeInfo .nodeIcon,
      .node .node_4 .categoryForumNodeInfo .nodeIcon {
        background-image:url("@imagePath/xenforo/widgets/forum-read-4.png");
      }
      .node .node_4 .forumNodeInfo.unread .nodeIcon,
      .node .node_4 .categoryForumNodeInfo.unread .nodeIcon {
        background-image: url("@imagePath/xenforo/widgets/forum-unread-4.png");
      }
      Для подразделов:
      Код:
      .node_21 .forumNodeInfo .nodeIcon,
      .node_21 .categoryForumNodeInfo .nodeIcon {
        background-image:url("styles/default/xenforo/widgets/forum-read-21.png") !important;
      }
      .node_21 .forumNodeInfo.unread .nodeIcon,
      .node_21 .categoryForumNodeInfo.unread .nodeIcon {
        background-image:url("styles/default/xenforo/widgets/forum-unread-21.png") !important;
      }
      Для разделов-ссылок:
      Код:
      .node .node_21 .linkNodeInfo .nodeIcon {
        background-image:url("@imagePath/xenforo/widgets/forum-read-21.png") !important;
      }
      .node .node_21 .linkNodeInfo.unread .nodeIcon {
        background-image:url("@imagePath/xenforo/widgets/forum-unread-21.png") !important;
      }
      Для разделов-страниц:
      Код:
      .node .node_21 .pageNodeInfo .nodeIcon {
        background-image:url("@imagePath/xenforo/widgets/forum-read-21.png") !important;
      }
      .node .node_21 .pageNodeInfo.unread .nodeIcon {
        background-image:url("@imagePath/xenforo/widgets/forum-unread-21.png") !important;
      }
    Пути могут отличаться от вышеприведенных. Если вы хотите залить иконки в другую папку, не забудьте исправить пути в CSS.

    Размер иконок лучше всего оставлять стандартный - 36px или же чуть меньше - 32px.
     
    Последнее редактирование: 9 сен 2014
    Blc, Svetlana, Adomb и 25 другим нравится это.
  2. CyberAP

    CyberAP Местный

    Регистрация:
    05.10.10
    Сообщения:
    2.577
    Симпатии:
    1.614
    Версия XF:
    1.5.10
    Можно ещё проще. Метод работает для любого элемента в листинге форума (не важно категория это, форум, страница или ссылка), нужно лишь знать его id.

    .node .node_1 .nodeIcon {background: url('@imagePath/mystyle/widgets/page.png');}
    Для непрочитанных форумов\категорий:
    .node .node_1 .unread .nodeIcon {background: url('@imagePath/mystyle/widgets/page-unread.png');}

    .node можно в принципе вообще выбросить, но для логики оставим.
     
    Blc, Alex Gludo, TAIFUN и ещё 1-му нравится это.
  3. Nolik

    Nolik Местный

    Регистрация:
    13.10.10
    Сообщения:
    169
    Симпатии:
    56
    Версия XF:
    1.1.3
    Ага на офф сайте была инфа =) А тут уже иконки прикрутили :) очень и очень красиво получилось!

    А не подскажите как наборчик называется? Кажется видел иконки.. чет потыкал не нашел :)

    P.S. Может еще и смайлики поменяете (например от Shelley BBSmile)? Тогда вообще будет супер! А то дефолтные смайлы ну никакие просто..
     
    Romchik® нравится это.
  4. Nolik

    Nolik Местный

    Регистрация:
    13.10.10
    Сообщения:
    169
    Симпатии:
    56
    Версия XF:
    1.1.3
    Иконки Farm-Fresh Web Icons распространяются от FatCow по лицензии CC-BY: требуется упоминание авторства использованной работы способом, указанным автором или, при отсутствии такового, предусмотренным лицензией. При отсутствии других элементов результат может распространяться под другой лицензией, например, более закрытой.

    Не фига не понятно нужно указывать автора или нет? Вроде нигде не указано что нужно указывать.. Хотя это и не сложно... не подскажите как вывести рядом с Перевод: XF-Russia.ru Иконки: Fatcow?
     
  5. Romchik®

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

    Регистрация:
    26.09.10
    Сообщения:
    5.740
    Симпатии:
    5.269
    Версия XF:
    1.5.11
    Какие именно? Их много.
    Есть одни неплохие, но там пару смайлов в ужасными глазами :) Вы про них?
     
  6. Nolik

    Nolik Местный

    Регистрация:
    13.10.10
    Сообщения:
    169
    Симпатии:
    56
    Версия XF:
    1.1.3
    Не знаю какие там ))) Мне больше всего понравились из этой темы. ))
     
    Romchik® нравится это.
  7. Romchik®

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

    Регистрация:
    26.09.10
    Сообщения:
    5.740
    Симпатии:
    5.269
    Версия XF:
    1.5.11
    Вот про первый смайл я и говорил...
     
  8. Yoskaldyr

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

    Регистрация:
    27.09.10
    Сообщения:
    1.921
    Симпатии:
    1.160
    Версия XF:
    1.0.4
    Если честно, то с отдельными иконками для разделов главная даже как-то рябит.
    Конечно это субъективно, но все же...
     
    R.J. и CyberAP нравится это.
  9. CyberAP

    CyberAP Местный

    Регистрация:
    05.10.10
    Сообщения:
    2.577
    Симпатии:
    1.614
    Версия XF:
    1.5.10
    Наверное стоит сделать иконки только для самых важных разделов, типа Плагинов, Основных вопросов и т.д.
     
    R.J. нравится это.
  10. Nolik

    Nolik Местный

    Регистрация:
    13.10.10
    Сообщения:
    169
    Симпатии:
    56
    Версия XF:
    1.1.3
    Да, неее... наоборот очень и очень нарядно ;) Мне очень нравится :)
     
  11. Romchik®

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

    Регистрация:
    26.09.10
    Сообщения:
    5.740
    Симпатии:
    5.269
    Версия XF:
    1.5.11
    Всем не угодишь, как всегда. Я на vB никогда не ставил, ибо на самом деле пестрит и толку не много.
    Возможно на новом стиле их и не будет
     
    Yoskaldyr нравится это.
  12. Nolik

    Nolik Местный

    Регистрация:
    13.10.10
    Сообщения:
    169
    Симпатии:
    56
    Версия XF:
    1.1.3
  13. Romchik®

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

    Регистрация:
    26.09.10
    Сообщения:
    5.740
    Симпатии:
    5.269
    Версия XF:
    1.5.11
    Не, пока эти будут. А там видно будет. Когда определимся со стилем новым, посмотрим, стоит ли их оставлять. Скорей всего нет. Это больше для демонстрации было :)
     
  14. exarh

    exarh Местный

    Регистрация:
    05.11.10
    Сообщения:
    364
    Симпатии:
    78
    Версия XF:
    1.1.3
    Есть ли какие нибудь ограничения , по весу иконок со стороны двига?
     
  15. Romchik®

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

    Регистрация:
    26.09.10
    Сообщения:
    5.740
    Симпатии:
    5.269
    Версия XF:
    1.5.11
    Нет. Это обычные картинки. Но в любом случае, чем меньше, тем лучше.
     
  16. Андрей Ланговой

    Андрей Ланговой Активный пользователь

    Регистрация:
    09.02.11
    Сообщения:
    41
    Симпатии:
    11
    А где находится этот файл EXTRA.css?
     
  17. TAIFUN

    TAIFUN Человек

    Регистрация:
    27.09.10
    Сообщения:
    2.121
    Симпатии:
    1.560
    Версия XF:
    1.5.9
    1. Это не файл, а шаблон с таким названием.
    2. домен.ru/forum/admin.php?templates/search
     
    Андрей Ланговой нравится это.
  18. Андрей Ланговой

    Андрей Ланговой Активный пользователь

    Регистрация:
    09.02.11
    Сообщения:
    41
    Симпатии:
    11
    А где его надо создать? Извиняюсь за тупые вопросы, но инфы нигде не нашёл по этому поводу.
     
  19. TAIFUN

    TAIFUN Человек

    Регистрация:
    27.09.10
    Сообщения:
    2.121
    Симпатии:
    1.560
    Версия XF:
    1.5.9
    Сорри, я исправил предыдущее сообщение. Этот шаблон является стандартным. У вас какая версия форума?

    Если нужно будет создать шаблон:
    Админка > Внешний вид > Шаблоны > Создать шаблон (кнопка сверху)
     
  20. Андрей Ланговой

    Андрей Ланговой Активный пользователь

    Регистрация:
    09.02.11
    Сообщения:
    41
    Симпатии:
    11
    RC2, спасибо большое, всё получилось, только иконка на синем фоне почему-то отображается.
     

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