Страница 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
Вчерашний борщ
Очень напрягает, что мигают красным все слова "Цитата" в списке уведомлений и весь список мигает, а не только непрочитанные, аж глаз дергается.