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

Иконки форумов.

Для иконок форумов используются спрайты.

За свое еще недолгое знакомство с XenForo, я встретил два вида картинок:

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

В первом случае используется код:

Код:

.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, если у Вас второй вид иконок меняем на первый. Надо соблюдать размеры и центрирование (при рисовании) в каждом из двух секторах, что бы картинки не прыгали.

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



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

 

Для любителей классического стиля, пак иконок от FatCow Web Hosting

3926 иконок 16х16 и 32х32 пикселей, в цветном и сером исполнении.

 

Это куда такие иконки можно добавлять?

 

Название темы вообще читали? Или просто так написать зашли?

 

А где скачать можно готовые иконки?