Иконки форумов  в стиле flat, с hover-эффектом

Иконки форумов в стиле flat, с hover-эффектом 2014-08-18

Нет прав для скачивания
Совместимость с XenForo
  1. 1.2
  2. 1.3
  3. 1.4
Скачиваем архив, распаковываем, закидываем картинку на сайт, /styles/ВАШ СТИЛЬ/xenforo/.
Открываем шаблон node_list.css, ищем:
Код:
.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";
    }
Может немного отличаться, в зависимости от стиля, но классы будут те же.
Меняем на:
Код:
.node .nodeIcon
{
    @property "nodeIcon";
    margin: 10px 0 10px 10px;
    float: left;
    width: 44px;
    height: 44px;
    @property "/nodeIcon";   
}

.node .forumNodeInfo .nodeIcon,
.node .categoryForumNodeInfo .nodeIcon
{
    @property "nodeIconForum";
    background-image: url('@imagePath/xenforo/node-sprite-flat.png');
    background-repeat: no-repeat;
    background-position: 0 -44px;
    @property "/nodeIconForum";
}
.node .forumNodeInfo:hover .nodeIcon,
.node .categoryForumNodeInfo:hover .nodeIcon
{
    background-image: url('@imagePath/xenforo/node-sprite-flat.png');
    background-repeat: no-repeat;
    background-position: -44px -44px;
}       

.node .forumNodeInfo.unread .nodeIcon,
.node .categoryForumNodeInfo.unread .nodeIcon
{
    @property "nodeIconForumUnread";
    background-image: url('@imagePath/xenforo/node-sprite-flat.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    @property "/nodeIconForumUnread";
}
.node .forumNodeInfo.unread:hover .nodeIcon,
.node .categoryForumNodeInfo.unread:hover .nodeIcon
{
    background-image: url('@imagePath/xenforo/node-sprite-flat.png');
    background-repeat: no-repeat;
    background-position: -44px 0;
}       

.node .pageNodeInfo .nodeIcon
{
    @property "nodeIconPage";
    background-image: url('@imagePath/xenforo/node-sprite-flat.png');
    background-repeat: no-repeat;
    background-position: 0 -88px;
    @property "/nodeIconPage";
}
.node .pageNodeInfo:hover .nodeIcon
{
    background-image: url('@imagePath/xenforo/node-sprite-flat.png');
    background-repeat: no-repeat;
    background-position: -44px -88px;
}

.node .linkNodeInfo .nodeIcon
{
    @property "nodeIconLink";
    background-image: url('@imagePath/xenforo/node-sprite-flat.png');
    background-repeat: no-repeat;
    background-position: 0 -132px;
    @property "/nodeIconLink";
}
.node .linkNodeInfo:hover .nodeIcon
{
    background-image: url('@imagePath/xenforo/node-sprite-flat.png');
    background-repeat: no-repeat;
    background-position: -44px -132px;
}
И радуемся :)
  • 2014-08-18_15-50-21.gif
    2014-08-18_15-50-21.gif
    22.2 KB · Просмотры: 674
  • Мне нравится
Реакции: lezgin
Автор
Skaiman
Скачивания
18
Просмотры
458
Первый выпуск
Обновление
Оценка
0.00 звёзд 0 оценок

Другие ресурсы пользователя Skaiman

Поделиться ресурсом

Назад
Сверху Снизу