MyBB Community Forums

Note, the rainbow does not need to be animated. It's completely up to you how you use the javascript provided by this tutorial.

After seeing countless rainbow "username tutorials". I thought I would step it up a notch.

If you get offended by me bashing rainbow text, please, do yourself a favor, skip to the "Actual Tutorial" part...

After my whole 2 second search on google, I found this (http://xoxco.com/projects/code/rainbow/) and in-turn found this (https://github.com/xoxco/rainbow-text).

No matter how annoying that animated rainbow may be to me, and how much harm I am probably going to be doing to my eyes when I have to look at someone's website using this, I figured someone might find it helpful (whether for a joke, or for real (scary))

If you want to be cruel to your pet forum. Do this. If you want to be cruel to your forum about rainbows, no need. You have already been cruel enough.

Jokes aside, This might actually be useful for someone, so I thought I'd show people how.

JSFIDDLE provided by developers

Actual Tutorial...

add anywhere required. headerinclude or the footer would be best. Javascript has been minified, because I don't know if people want to include a js file. js file is here non-minified(https://github.com/xoxco/Rainbow-Text/bl...rainbow.js) and here (http://xoxco.com/projects/code/rainbow/rainbow.js)

If you don't have jQuery installed, install it by including this above the code below...

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script>
(function(e){e.fn.rainbow=function(t){this.each(function(){t.originalText=e(this).html();t.iterations=0;if(!t.pauseLength){t.pauseLength=t.animateInterval}e(this).data("options",t);if(t.pad){for(x=0;x<t.originalText.length;x++){t.colors.unshift(t.colors[t.colors.length-1])}}e.fn.rainbow.render(this)})};e.fn.pauseRainbow=function(){this.each(function(){var t=e(this).data("options");if(t){t.animate=false;e(this).data("options",t)}})};e.fn.resumeRainbow=function(){this.each(function(){var t=e(this).data("options");if(t){t.animate=true;e(this).data("options",t);e.fn.rainbow.render(this)}})};e.fn.rainbow.render=function(t){var n=e(t).data("options");var r=n.originalText.split("");n.iterations++;var i="";var s=0;for(var o in r){if(r[o]!=" "){i=i+'<span style="color: '+n.colors[s]+';">'+r[o]+"</span>";s++}else{i=i+" "}if(s>=n.colors.length){s=0}}e(t).html(i);var u=n.iterations%n.colors.length==0;if(n.animate){(function(t,n){var r=e(t).data("options");var i=setTimeout(function(){e.fn.rainbow.shift(t)},n);r.interval=i;e(t).data("options",r)})(t,u?n.pauseLength:n.animateInterval)}};e.fn.rainbow.shift=function(t){var n=e(t).data("options");var r=n.colors.pop();n.colors.unshift(r);e.fn.rainbow.render(t)}})(jQuery)
</script>
<script>
// Change options here!
$('.rainbow').rainbow({
    colors: [
        '#FF0000',
        '#f26522',
        '#fff200',
        '#00a651',
        '#28abe2',
        '#2e3192',
        '#6868ff'
    ],
    animate: true,
    animateInterval: 100,
    pad: false,
    pauseLength: 100
});
// End change options
</script>

Then set the username style in the usergroups section for the group you want to have the rainbow style username to:

<span class="rainbow">{username}</span>