Страница 1 из 1

Мигающие индикаторы уведомлений и ЛС

Добавлено: 27 сен 2016, 10:06
beholder
Рецепт делает индикаторы количества уведомлений и личных сообщений на форуме яркими и мигающими, таким образом привлекая большее внимание пользователей к этим элементам.

сделано по мотивам расширения Blinking counter, for new pm and new notify

Изображение
итак:
[+] добавляем в overall_header_head_append.html

Код: Выделить всё

<!-- IF S_DISPLAY_PM and PRIVATE_MESSAGE_COUNT <> "0" -->
<style>
@keyframes blink-pm {
	from {color: #FF0000;}
    to {visibility: hidden;}
}

@-webkit-keyframes blink-pm {
	from {color: #FF0000;}
    to {visibility: hidden;}
}

li.icon-pm strong{
	color: #FF0000;
	animation: blink-pm 1s steps(2, start) infinite;
	-webkit-animation: blink-pm 1s steps(2, start) infinite;
}
</style>
<!-- ENDIF -->
<!-- IF S_NOTIFICATIONS_DISPLAY and NOTIFICATIONS_COUNT <> "0" -->
<style>
@keyframes blink-notify {
    from {color: #FF0000;}
    to {visibility: hidden;}
}

@-webkit-keyframes blink-notify {
    from {color: #FF0000;}
    to {visibility: hidden;}
}

li.icon-notification strong{
	color: #FF0000;
	animation: blink-notify 1s steps(2, start) infinite;
	-webkit-animation: blink-notify 1s steps(2, start) infinite;
}
</style>
<!-- ENDIF -->


сделать другой цвет индикатора, можно заменив код цвета FF0000 на любой другой.

Мигающие индикаторы уведомлений и ЛС

Добавлено: 27 сен 2016, 15:37
Dmitry
в стилях: Elegance и Simplicity не моргает, в остальных работает

Мигающие индикаторы уведомлений и ЛС

Добавлено: 27 сен 2016, 17:15
beholder
Dmitry писал(а): стилях: Elegance и Simplicity не моргает, в остальных работает
не очень разбираюсь в css, но наспех взглянул на стили Artodia - там иконки заданы классами pm и notifications (вместо icon-pm и icon-notifications в prosilver'ах).
т.е. я бы попробовал как-то так:
[+] для prosilver и artodia

Код: Выделить всё

<!-- IF S_DISPLAY_PM and PRIVATE_MESSAGE_COUNT <> "0" -->
<style>
@keyframes blink-pm {
   from {color: #FF0000;}
    to {visibility: hidden;}
}

@-webkit-keyframes blink-pm {
   from {color: #FF0000;}
    to {visibility: hidden;}
}

li.icon-pm strong{
   color: #FF0000;
   animation: blink-pm 1s steps(2, start) infinite;
   -webkit-animation: blink-pm 1s steps(2, start) infinite;
}
li.pm strong{
   color: #FF0000;
   animation: blink-notify 1s steps(2, start) infinite;
   -webkit-animation: blink-notify 1s steps(2, start) infinite;
}
</style>
<!-- ENDIF -->
<!-- IF S_NOTIFICATIONS_DISPLAY and NOTIFICATIONS_COUNT <> "0" -->
<style>
@keyframes blink-notify {
    from {color: #FF0000;}
    to {visibility: hidden;}
}

@-webkit-keyframes blink-notify {
    from {color: #FF0000;}
    to {visibility: hidden;}
}

li.icon-notification strong{
   color: #FF0000;
   animation: blink-notify 1s steps(2, start) infinite;
   -webkit-animation: blink-notify 1s steps(2, start) infinite;
}

li.notifications strong{
   color: #FF0000;
   animation: blink-notify 1s steps(2, start) infinite;
   -webkit-animation: blink-notify 1s steps(2, start) infinite;
}

</style>
<!-- ENDIF -->

Мигающие индикаторы уведомлений и ЛС

Добавлено: 27 сен 2016, 21:04
Dmitry
beholder писал(а):
Dmitry писал(а): стилях: Elegance и Simplicity не моргает, в остальных работает
не очень разбираюсь в css, но наспех взглянул на стили Artodia - там иконки заданы классами pm и notifications (вместо icon-pm и icon-notifications в prosilver'ах).
т.е. я бы попробовал как-то так:
[+] для prosilver и artodia

Код: Выделить всё

<!-- IF S_DISPLAY_PM and PRIVATE_MESSAGE_COUNT <> "0" -->
<style>
@keyframes blink-pm {
   from {color: #FF0000;}
    to {visibility: hidden;}
}

@-webkit-keyframes blink-pm {
   from {color: #FF0000;}
    to {visibility: hidden;}
}

li.icon-pm strong{
   color: #FF0000;
   animation: blink-pm 1s steps(2, start) infinite;
   -webkit-animation: blink-pm 1s steps(2, start) infinite;
}
li.pm strong{
   color: #FF0000;
   animation: blink-notify 1s steps(2, start) infinite;
   -webkit-animation: blink-notify 1s steps(2, start) infinite;
}
</style>
<!-- ENDIF -->
<!-- IF S_NOTIFICATIONS_DISPLAY and NOTIFICATIONS_COUNT <> "0" -->
<style>
@keyframes blink-notify {
    from {color: #FF0000;}
    to {visibility: hidden;}
}

@-webkit-keyframes blink-notify {
    from {color: #FF0000;}
    to {visibility: hidden;}
}

li.icon-notification strong{
   color: #FF0000;
   animation: blink-notify 1s steps(2, start) infinite;
   -webkit-animation: blink-notify 1s steps(2, start) infinite;
}

li.notifications strong{
   color: #FF0000;
   animation: blink-notify 1s steps(2, start) infinite;
   -webkit-animation: blink-notify 1s steps(2, start) infinite;
}

</style>
<!-- ENDIF -->
спасибо, все работает
единственное, придется поменять красный цвет, иначе сливается иконка с цифрой, лучший вариант заменить на белый #FFFFFF

Мигающие индикаторы уведомлений и ЛС

Добавлено: 16 окт 2016, 15:02
Вчерашний борщ
Очень напрягает, что мигают красным все слова "Цитата" в списке уведомлений и весь список мигает, а не только непрочитанные, аж глаз дергается. :)