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

1.3.x Иконки форумов node-sprite

Тема в разделе "Графика для XenForo", создана пользователем Skaiman, 28 июн 2014.

Загрузка
  1. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    221
    Версия XF:
    1.4.0
    Иконки форумов.

    Для иконок форумов используются спрайты.
    За свое еще недолгое знакомство с XenForo, я встретил два вида картинок:
    • Просто картинка с четырмя видами иконок
    • Первые две иконки (есть новые сообщения/нет новых сообщений) выполнены в виде маски, фон с вырезанной из него иконкой.

    node-sprite.png node-sprite.png

    В первом случае используется код:
    Код:
    .node .nodeIcon
    {
      @property "nodeIcon";
      margin: 10px 0 10px 10px;
      float: left;
      width: 36px;
      height: 36px;
      @property "/nodeIcon";
    }
    
      .node .forumNodeInfo .nodeIcon,
      .node .categoryForumNodeInfo .nodeIcon
      {
      @property "nodeIconForum";
      background-image: url('@imagePath/xenforo/node-sprite.png');
      background-repeat: no-repeat;
      background-position: 0 0;
      @property "/nodeIconForum";
      }
    
      .node .forumNodeInfo.unread .nodeIcon,
      .node .categoryForumNodeInfo.unread .nodeIcon
      {
      @property "nodeIconForumUnread";
      background-image: url('@imagePath/xenforo/node-sprite.png');
      background-repeat: no-repeat;
      background-position: -36px 0;
      @property "/nodeIconForumUnread";
      }
    
      .node .pageNodeInfo .nodeIcon
      {
      @property "nodeIconPage";
      background-image: url('@imagePath/xenforo/node-sprite.png');
      background-repeat: no-repeat;
      background-position: -72px 0;
      @property "/nodeIconPage";
      }
    
      .node .linkNodeInfo .nodeIcon
      {
      @property "nodeIconLink";
      background-image: url('@imagePath/xenforo/node-sprite.png');
      background-repeat: no-repeat;
      background-position: -108px 0;
      @property "/nodeIconLink";
      }
    Где замена картинки происходит путем смены позиции изображения background-position и все.
    Во втором, тоже меняется позиция самой картинки и меняется фон под картинкой:
    Код:
    .node .nodeIcon
    {
      @property "nodeIcon";
      margin: 10px 0 10px 10px;
      float: left;
      width: 44px;
      height: 36px;
      @property "/nodeIcon";
    }
    
      .node .forumNodeInfo .nodeIcon,
      .node .categoryForumNodeInfo .nodeIcon
      {
      @property "nodeIconForum";
      background: @primaryLightish url('@imagePath/xenforo/node-sprite.png') no-repeat 0 0;
      @property "/nodeIconForum";
      }
    
      .node .forumNodeInfo.unread .nodeIcon,
      .node .categoryForumNodeInfo.unread .nodeIcon
      {
      @property "nodeIconForumUnread";
      background: @primaryMedium url('@imagePath/xenforo/node-sprite.png') no-repeat -44px 0;
      @property "/nodeIconForumUnread";
      }
    
      .node .pageNodeInfo .nodeIcon
      {
      @property "nodeIconPage";
      background-image: url('@imagePath/xenforo/node-sprite.png');
      background-repeat: no-repeat;
      background-position: -88px 0;
      @property "/nodeIconPage";
      }
    
      .node .linkNodeInfo .nodeIcon
      {
      @property "nodeIconLink";
      background-image: url('@imagePath/xenforo/node-sprite.png');
      background-repeat: no-repeat;
      background-position: -132px 0;
      @property "/nodeIconLink";
      }
    Первый способ проще для рисования своих иконок, ну в принципе и второй не сложен.
    Картинка делается размером 144х36 (во втором случае 176х36) пикселей. Делим в фотошопе напрвляющими по 36 (44) пикселей и добавляем нужные иконки, потом в node_list.css, если у Вас второй вид иконок меняем на первый. Надо соблюдать размеры и центрирование (при рисовании) в каждом из двух секторах, что бы картинки не прыгали.

    Пример моих иконок:

    node-sprite2.png

    Посмотреть видео по изготовлению иконок/Скачать набор используемых иконок:

    [​IMG] [​IMG]
     
    Последнее редактирование: 28 июн 2014
    step-83, geodezer и Mirovinger нравится это.
  2. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    221
    Версия XF:
    1.4.0
    Для любителей классического стиля, пак иконок от FatCow Web Hosting
    animated-fatcow-icons.gif
    3926 иконок 16х16 и 32х32 пикселей, в цветном и сером исполнении.

    [​IMG]
     
    Rexto и Mirovinger нравится это.
  3. melti25

    melti25 Read only

    Регистрация:
    24.09.14
    Сообщения:
    11
    Симпатии:
    0
    Версия XF:
    1.4.0
    Это куда такие иконки можно добавлять?
     
  4. Exile

    Exile Местный

    Регистрация:
    27.06.11
    Сообщения:
    999
    Симпатии:
    543
    Версия XF:
    1.4.4
    Название темы вообще читали? Или просто так написать зашли?
     
  5. cell1983

    cell1983 Новичок

    Регистрация:
    12.04.15
    Сообщения:
    1
    Симпатии:
    0
    Версия XF:
    1.0.3
    А где скачать можно готовые иконки?
     

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