Анимированное уведомление о новой теме в категории

[baltun]

baltun разместил(а) новый ресурс:

Анимированное уведомление о новой теме в категории - Анимированное уведомление о новом сообщении в теме

Добавьте анимированное уведомление о новой теме в свои категории форума.
Посмотреть вложение 38333
Добавьте следующие коды extra.lessв шаблон темы, которую вы используете.

.node.node--forum.node--unread .node-title a:after,
.node.node--link.node--unread .node-title a:after,
.node.node--page.node--unread .node-title a:after,
.node.node--category.node--unread .node-title a:after {
    content: "";
    display: inline-block;
    background: transparent;
    border: 2px solid...

Посмотреть страницу этого ресурса...

 

[lesni1]

А для версии 2.2 можно сделать код?

 

[hacker]

А для версии 2.2 можно сделать код?

Для 2.2 работает

 

[elooney]

Еще можно устанавливать иконки:



Для XenForo 2.2.x, 2.3.х

.node.node--forum.node--unread .node-title a:after, .node.node--link.node--unread .node-title a:after, .node.node--page.node--unread .node-title a:after, .node.node--category.node--unread .node-title a:after {
    .m-faBase();
    .m-faContent(@fa-var-bells); /* Иконка FontAwesome */
    color: @xf-borderColorAccentContent; /* Цвет */
    font-size: 20px; /* Размер */
    margin: 0 0 -1px 10px; /* Отступы */
    animation: newIndicator 2s ease-out infinite; /* Анимация */
    transition: .3s all linear; /* переход*/
}

@-webkit-keyframes newIndicator {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    10% {
        -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
        transform: scale3d(.9, .9, .9) rotate(-3deg)
    }

    20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
        transform: scale3d(.9, .9, .9) rotate(-3deg)
    }

    30% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
    }

    50% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
    }

    70% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
    }

    90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
    }

    40% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
    }

    60% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
    }

    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
    }

    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}