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

Интересные скрипты, хитрости, трюки с оформлением, "недокументированные" возможности, всяческие "довески" к форумам. HTML, CSS, JavaScript и т.п. (только готовые рецепты)
Правила форума
В этой теме выкладываем только готовые "рецепты", если у вас есть чем поделиться.
Пожалуйста, не нужно создавать темы с запросами на тот или иной скрипт
Ответить
Аватара пользователя
beholder
Администратор
Сообщения: 1164
Зарегистрирован: 02 янв 2015, 08:15
Откуда: Владивосток
Пол:
Контактная информация:

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

Сообщение beholder » 27 сен 2016, 10:06

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

сделано по мотивам расширения 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 на любой другой.
Поддержка GetBB.Ru
Бесплатный хостинг форумов PHPBB3

Ваши собственные домены с привязкой к форуму:
.ru - 200 руб./год , .рф - 250 руб./год. (кирилический домен)
in.ua - 7$/год. , .com,org,net - 12$/год.

Dmitry
Сообщения: 63
Зарегистрирован: 07 авг 2015, 11:44
Пол:
Контактная информация:

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

Сообщение Dmitry » 27 сен 2016, 15:37

в стилях: Elegance и Simplicity не моргает, в остальных работает

Аватара пользователя
beholder
Администратор
Сообщения: 1164
Зарегистрирован: 02 янв 2015, 08:15
Откуда: Владивосток
Пол:
Контактная информация:

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

Сообщение beholder » 27 сен 2016, 17:15

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 -->
Поддержка GetBB.Ru
Бесплатный хостинг форумов PHPBB3

Ваши собственные домены с привязкой к форуму:
.ru - 200 руб./год , .рф - 250 руб./год. (кирилический домен)
in.ua - 7$/год. , .com,org,net - 12$/год.

Dmitry
Сообщения: 63
Зарегистрирован: 07 авг 2015, 11:44
Пол:
Контактная информация:

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

Сообщение Dmitry » 27 сен 2016, 21:04

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

Аватара пользователя
Вчерашний борщ
Сообщения: 291
Зарегистрирован: 19 сен 2015, 17:25
Контактная информация:

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

Сообщение Вчерашний борщ » 16 окт 2016, 15:02

Очень напрягает, что мигают красным все слова "Цитата" в списке уведомлений и весь список мигает, а не только непрочитанные, аж глаз дергается. :)
"Хочется сделать форум поддержки информативным и удобным :) " ©

Ответить

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость