MyBB Community Forums
[For 1.8] Pm alert İcons ringing bell animation - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Resources (https://community.mybb.com/forum-8.html)
+--- Forum: Tutorials (https://community.mybb.com/forum-38.html)
+--- Thread: [For 1.8] Pm alert İcons ringing bell animation (/thread-220647.html)



Pm alert İcons ringing bell animation - Anka06 - 2018-11-12

Global.css Add

.ring {
  animation: ring 4s 1s ease infinite;
}	

@keyframes ring {
  0% { transform: rotate(0); }
  1% { transform: rotate(25deg); }
  3% { transform: rotate(-23deg); }
  5% { transform: rotate(29deg); }
  7% { transform: rotate(-27deg); }
  9% { transform: rotate(25deg); }
  11% { transform: rotate(-23deg); }
  13% { transform: rotate(21deg); }
  15% { transform: rotate(-19deg); }
  17% { transform: rotate(17deg); }
  19% { transform: rotate(-15deg); }
  21% { transform: rotate(13deg); }
  23% { transform: rotate(-11deg); }
  25% { transform: rotate(9deg); }
  27% { transform: rotate(-7deg); }
  29% { transform: rotate(5deg); }
  31% { transform: rotate(-3deg); }
  33% { transform: rotate(1deg); }
  35% { transform: rotate(0deg); }
  100% { transform: rotate(0); }
}

global_pm_alert Find

<img src="{$theme['imgdir']}/dismiss_notice.png" alt="{$lang->dismiss_notice}" title="{$lang->dismiss_notice}" />


Replace with


<i class="ring fas fa-bell fa-lg" title="{$lang->dismiss_notice}" /></i>



RE: Pm alert İcons ringing bell animation - mujeebdgk - 2018-11-13

superb!

good Job sir , thanks


RE: Pm alert İcons ringing bell animation - Eldenroot - 2018-11-19

Great! Thank you! Keep good work!


RE: Pm alert İcons ringing bell animation - kuttysoft - 2019-11-26

awesome bro working well


RE: Pm alert İcons ringing bell animation - Skyon Archer - 2019-11-28

Shouldn't this . . .
<i class="ring fas fa-bell fa-lg" title="{$lang->dismiss_notice}" /></i>
. . . be this . . .
<i class="ring fa fa-bell fa-lg"></i>

Fontawesome does not have a class of "fas", but does have a class "fa". Also, the <i> (italics) tag is not self closing, thus the extra space and slash are not warranted.

As well, the <a> tag before this <i> tag already has a "title" so repeating it is redundant.


RE: Pm alert İcons ringing bell animation - kuttysoft - 2019-11-29

(2019-11-28, 09:11 PM)Skyon Archer Wrote: Shouldn't this . . .
<i class="ring fas fa-bell fa-lg" title="{$lang->dismiss_notice}" /></i>
. . . be this . . .
<i class="ring fa fa-bell fa-lg"></i>

Fontawesome does not have a class of "fas", but does have a class "fa".  Also, the <i> (italics) tag is not self closing, thus the extra space and slash are not warranted. 

As well, the <a> tag before this <i> tag already has a "title" so repeating it is redundant.
font awesome 5 having bro


RE: Pm alert İcons ringing bell animation - blongso - 2020-03-04

Hello Anka06!
I love this tutorial, thanks for that! So the forum looks more alive. Is it possible to animate the small envelope from the PMs when a PM has arrived?
Sometimes I click the PM alarm to read the PM later and then forget it. I would like it if the envelope "wobbles" until the PM is read. I found the enveloppe ;-)
faa-shake animated

Is it possible for you to create a tutorial for us?

THX in advance!
blongso


RE: Pm alert İcons ringing bell animation - blongso - 2020-03-06

UP

Thank you in advance for the one who created a tutorial for my wish ;-)