MyBB Community Forums

Full Version: How do I add this type of rainbow effect?
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
I want to add this type of rainbow effect to my respective username.. how do I make it? Please help. 

Preview : http://forum.iplayog.com/index.php?s=910...&filter=59
No permission to view.
Sir it's not the right thing.. You may check the link given by me : http://forum.iplayog.com Check for the username "Kendrick" I want that type of effect sir.

And that's the code they added for that effect.

.rainbow {
      animation: colorchange 60s; /* animation-name followed by duration in seconds*/
         /* you could also use milliseconds (ms) or something like 2.5s */
      -webkit-animation: colorchange 60s; /* Chrome and Safari */
      -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
      animation-iteration-count: infinite;
    }

    @keyframes colorchange
    {
      0%   {COLOR: silver;}
      10%  {COLOR: red;}
      20%  {COLOR: orange;}
      30%  {COLOR: yellow;}
      40%  {COLOR: lime;}
      50%   {COLOR: green;}
      60%  {COLOR: aqua;}
      70%  {COLOR: royalblue;}
      80%  {COLOR: violet;}
      90%  {COLOR: purple;}
      100%   {COLOR: silver;}
    }

    @-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
    {
      0%   {COLOR: silver;}
      10%  {COLOR: red;}
      20%  {COLOR: orange;}
      30%  {COLOR: yellow;}
      40%  {COLOR: lime;}
      50%   {COLOR: green;}
      60%  {COLOR: aqua;}
      70%  {COLOR: royalblue;}
      80%  {COLOR: violet;}
      90%  {COLOR: purple;}
      100%   {COLOR: silver;}
    }
}
And I want to add the same effect to my forums too. But I don't know how. Please someone help me out. : Sad
Add a class to the usergroup username style like...

(without sparkle)
<span class="rainbow" style="font-weight:bold;">{username}</span>

(with sparkle)
<span class="rainbow" style="font-weight:bold;background: url(http://i.gyazo.com/d69e4db4b78ad043e6eefb2521e6b181.gif)">{username}</span>


...and add the following css rules to theme global.css

.rainbow {
      animation: colorchange 60s; /* animation-name followed by duration in seconds*/
         /* you could also use milliseconds (ms) or something like 2.5s */
      -webkit-animation: colorchange 60s; /* Chrome and Safari */
      -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
      animation-iteration-count: infinite;
    }

    @keyframes colorchange
    {
      0%   {COLOR: silver;}
      10%  {COLOR: red;}
      20%  {COLOR: orange;}
      30%  {COLOR: yellow;}
      40%  {COLOR: lime;}
      50%   {COLOR: green;}
      60%  {COLOR: aqua;}
      70%  {COLOR: royalblue;}
      80%  {COLOR: violet;}
      90%  {COLOR: purple;}
      100%   {COLOR: silver;}
    }

    @-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
    {
      0%   {COLOR: silver;}
      10%  {COLOR: red;}
      20%  {COLOR: orange;}
      30%  {COLOR: yellow;}
      40%  {COLOR: lime;}
      50%   {COLOR: green;}
      60%  {COLOR: aqua;}
      70%  {COLOR: royalblue;}
      80%  {COLOR: violet;}
      90%  {COLOR: purple;}
      100%   {COLOR: silver;}
    }
}
mmadhankumar
(09-07-2015, 07:48 AM)mmadhankumar Wrote: [ -> ]check if this helps: http://community.mybb.com/thread-119359.html

http://community.mybb.com/thread-148279.html

(09-07-2015, 12:52 PM)SvePu Wrote: [ -> ]Add a class to the usergroup username style like...

(without sparkle)
<span class="rainbow" style="font-weight:bold;">{username}</span>

(with sparkle)
<span class="rainbow" style="font-weight:bold;background: url(http://i.gyazo.com/d69e4db4b78ad043e6eefb2521e6b181.gif)">{username}</span>


...and add the following css rules to theme global.css

.rainbow {
      animation: colorchange 60s; /* animation-name followed by duration in seconds*/
         /* you could also use milliseconds (ms) or something like 2.5s */
      -webkit-animation: colorchange 60s; /* Chrome and Safari */
      -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
      animation-iteration-count: infinite;
    }

    @keyframes colorchange
    {
      0%   {COLOR: silver;}
      10%  {COLOR: red;}
      20%  {COLOR: orange;}
      30%  {COLOR: yellow;}
      40%  {COLOR: lime;}
      50%   {COLOR: green;}
      60%  {COLOR: aqua;}
      70%  {COLOR: royalblue;}
      80%  {COLOR: violet;}
      90%  {COLOR: purple;}
      100%   {COLOR: silver;}
    }

    @-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
    {
      0%   {COLOR: silver;}
      10%  {COLOR: red;}
      20%  {COLOR: orange;}
      30%  {COLOR: yellow;}
      40%  {COLOR: lime;}
      50%   {COLOR: green;}
      60%  {COLOR: aqua;}
      70%  {COLOR: royalblue;}
      80%  {COLOR: violet;}
      90%  {COLOR: purple;}
      100%   {COLOR: silver;}
    }
}


It didn't worked brother !.. I gave a try on it but it didn't work.. I wasn't able to see rainbow effects on my respective username.. I tried both ! With sparkle and without sparkle. Both didn't worked. Sad