Найти на сайте
  2. Форумы
  3. МАСТЕРСКАЯ
  4. HTML / CSS / PHP / JS / RegExp
  5. Зеленая иконка ОНЛАЙН

Зеленая иконка ОНЛАЙН

ЕСТЬ РЕШЕНИЕ ЗАКРЫТО
#16 22 февраля 2014 в 00:48


skotskiy, тоже можно, но это лежит глубже (это в смарти шаблонах вроде, а может и вообще где-то внутри..)… Тем более можно фон сделать мигающим, а надпись оставить как есть.) Тоже не плохо. :)

Azura

Что то не получается. Просто сделать бы этот зеленый фон мигающим. А как именно не соображу
0
#17 22 февраля 2014 в 00:51
Фёдор, а вы картинку в формате гиф нарисовали мигающую?
Люблю эту CMS! Я немного художествую тут: http://virelart.ru :) Пока по большей части выкладываюсь тут vk.com/virelart. p.s.: пасибки можно в карму :3
0
#18 22 февраля 2014 в 00:53


Фёдор, а вы картинку в формате гиф нарисовали мигающую?

Azura


Есть готовая картинка в gif формате zst
0
#19 22 февраля 2014 в 01:08
Фёдор, ну в том коде, что я вам привела, прописываете путь. Но код не вставляете в файл, а ищете сам класс! .online. У вас могло не сработать, потому что первый код стоит ниже, а значит в приоритете, либо вы в путях намудрили. Либо опечатка в свойствах)
Люблю эту CMS! Я немного художествую тут: http://virelart.ru :) Пока по большей части выкладываюсь тут vk.com/virelart. p.s.: пасибки можно в карму :3
0
#20 22 февраля 2014 в 01:12


Фёдор, ну в том коде, что я вам привела, прописываете путь. Но код не вставляете в файл, а ищете сам класс! .online. У вас могло не сработать, потому что первый код стоит ниже, а значит в приоритете, либо вы в путях намудрили. Либо опечатка в свойствах)

Azura

Хорошо сейчас попробую!!!
0
#21 22 февраля 2014 в 14:40

Фёдор, а вы картинку в формате гиф нарисовали мигающую?

Azura

Не пойму, зачем делать это гиф картинкой, когда это можно сделать .css?

Делается это просто.

Ищем примерно такой кусок кода в styles.css вашего шаблона.

  1.  
  2. .online{
  3.     padding:1px 5px;
  4.     background-color:#00CC00;
  5.     color:#FFF;
  6.     border-radius:4px;
  7.     -moz-border-radius:4px;
  8.     font-size:11px;
  9. }
  10.  
Он меняется на такой вот кусок кода.

  1.  
  2. .online{
  3.     padding:1px 5px;
  4.     background-color:rgba(46, 204, 113,1);
  5.     color:#fff;
  6.     border-radius:4px;
  7.     -moz-border-radius:4px;
  8.     font-size:11px;
  9.     -webkit-animation: ping 1.5s linear infinite;
  10.     -moz-animation: ping 1.5s linear infinite;
  11.     -o-animation: ping 1.5s linear infinite;
  12.     -ms-animation: ping 1.5s linear infinite;
  13.     animation: ping 1.5s linear infinite;
  14. }
  15.  
  16. @-moz-keyframes ping {
  17. 0% {
  18.     background-color:rgba(46, 204, 113,1);
  19. }
  20.  
  21. 50% {
  22.     background-color:rgba(46, 204, 113,0.4);
  23. }
  24.  
  25. 100% {
  26.     background-color:rgba(46, 204, 113,1);
  27. }
  28.  
  29. }
  30. @-webkit-keyframes ping {
  31. 0% {
  32.     background-color:rgba(46, 204, 113,1);
  33. }
  34.  
  35. 50% {
  36.     background-color:rgba(46, 204, 113,0.4);
  37. }
  38.  
  39. 100% {
  40.     background-color:rgba(46, 204, 113,1);
  41. }
  42. }
  43. @-o-keyframes ping {
  44. 0% {
  45.     background-color:rgba(46, 204, 113,1);
  46. }
  47.  
  48. 50% {
  49.     background-color:rgba(46, 204, 113,0.4);
  50. }
  51.  
  52. 100% {
  53.     background-color:rgba(46, 204, 113,1);
  54. }
  55. }
  56. @-ms-keyframes ping {
  57. 0% {
  58.     background-color:rgba(46, 204, 113,1);
  59. }
  60.  
  61. 50% {
  62.     background-color:rgba(46, 204, 113,0.4);
  63. }
  64.  
  65. 100% {
  66.     background-color:rgba(46, 204, 113,1);
  67. }
  68. }
  69. @keyframes ping {
  70. 0% {
  71.     background-color:rgba(46, 204, 113,1);
  72. }
  73.  
  74. 50% {
  75.     background-color:rgba(46, 204, 113,0.4);
  76. }
  77.  
  78. 100% {
  79.     background-color:rgba(46, 204, 113,1);
  80. }
  81. }
  82.  
В показанном вам куске кода, можно переписать вот эту строчку.

  1.  
  2. table.users_list div.status .online{
  3. padding:1px 5px; background-color:#00CC00; color:#FFF; font-size:11px;
  4. border-radius:4px;
  5. -moz-border-radius:4px;
  6. }
  7. [code]
  8.  

  1.  
  2. table.users_list div.status .online{
  3. padding:1px 5px; background-color:#00CC00; color:#FFF; font-size:11px;
  4. border-radius:4px;
  5. -moz-border-radius:4px;
  6. -webkit-animation: ping 1.5s linear infinite;
  7. -moz-animation: ping 1.5s linear infinite;
  8. -o-animation: ping 1.5s linear infinite;
  9. -ms-animation: ping 1.5s linear infinite;
  10. animation: ping 1.5s linear infinite;
  11. }
  12.  
  13. @-moz-keyframes ping {
  14. 0% {
  15.     background-color:rgba(0,204,0,1);
  16. }
  17.  
  18. 50% {
  19.     background-color:rgba(0,204,0,0.4);
  20. }
  21.  
  22. 100% {
  23.     background-color:rgba(0,204,0,1);
  24. }
  25.  
  26. }
  27. @-webkit-keyframes ping {
  28. 0% {
  29.     background-color:rgba(0,204,0,1);
  30. }
  31.  
  32. 50% {
  33.     background-color:rgba(0,204,0,0.4);
  34. }
  35.  
  36. 100% {
  37.     background-color:rgba(0,204,0,1);
  38. }
  39. }
  40. @-o-keyframes ping {
  41. 0% {
  42.     background-color:rgba(0,204,0,1);
  43. }
  44.  
  45. 50% {
  46.     background-color:rgba(0,204,0,0.4);
  47. }
  48.  
  49. 100% {
  50.     background-color:rgba(0,204,113,1);
  51. }
  52. }
  53. @-ms-keyframes ping {
  54. 0% {
  55.     background-color:rgba(0,204,0,1);
  56. }
  57.  
  58. 50% {
  59.     background-color:rgba(0,204,0,0.4);
  60. }
  61.  
  62. 100% {
  63.     background-color:rgba(0,204,0,1);
  64. }
  65. }
  66. @keyframes ping {
  67. 0% {
  68.     background-color:rgba(0,204,0,1);
  69. }
  70.  
  71. 50% {
  72.     background-color:rgba(0,204,0,0.4);
  73. }
  74.  
  75. 100% {
  76.     background-color:rgba(0, 204, 0,1);
  77. }
  78. }
  79. [code]
  80.  
build the new world
0
#22 22 февраля 2014 в 14:57
wormcop, Прописал предложенный Вами код, все заработало! Теперь статус Онлайн мигает зеленым цветом! Спасибо за помощь!
0
Какие CSS фреймворки вы предпо
Что означает сей php код?

Похожие темы

Не отображаются иконки.

Компоненты Создана 4 года назад 40 сообщений

Modern иконки шаблонов списка типов контента

Шаблоны, графика, стили Создана 3 года назад 7 сообщений

Пропали иконки fa fa из меню

Компоненты Создана 2 года назад 2 сообщения

[ЕСТЬ РЕШЕНИЕ] Как добавить иконки в виджет Кнопка 1.0.0

Шаблоны, графика, стили Создана 1 год назад 5 сообщений

[ЕСТЬ РЕШЕНИЕ] Иконка в странице как изменить размер

Типы контента / статьи / страницы Создана 1 год назад 5 сообщений

Онлайн бронирование

Критика и оценка работ Создана 3 года назад 27 сообщений

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.