MyBB Community Forums

Full Version: Pm alert İcons ringing bell animation
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
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>
superb!

good Job sir , thanks
Great! Thank you! Keep good work!
awesome bro working well
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.
(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
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
UP

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