Forum Display Enhancements - Rainbow (Multicolour) Username for Usergroups

Info:

• Rainbow effect (Multicolour) for Usernames

This simple hack enables to display usernames for any usergroup in random multicolour (rainbow) effect.

Having searched for the same effect for my board unsuccessfully where most of the modifications were for BBCodes, I came up with my own and though of sharing.

Please note that since it is based on pure HTML and JavaScript and in no way uses any BBcode of VB function/hooks, this is compatible with all versions of vBulletin.

Installation:
Time Required: 2 minutes

1. FTP rainbow.js to clientscript directory on your server in ASCII mode

2. Open headinclude template and add the following code at any reasonable place:

<script type="text/javascript" src="$vboptions[bburl]/clientscript/rainbow.js"></script>

3. Open footer template and add the following code at the bottom:

<!-- rainbow text initialize -->
<script type="text/javascript"> 
<!--
rain();
//  End -->
</script>
<!-- rainbow text end -->

4. Open the Usergroup Manager throug ACP and edit the desired user group.

5. Put start tag as:

<span class="rainbow">

6. Change the end tag to be:

</span>

You're Done! Enjoy!!

Versions:
v1.0 - 10 February 2009
- Rainbow text effect for usernames

I may think of creating a plugin for this if I get time and people ask for it. But for now it is pretty simple and I would prefer having a hack rather than going for a plugin which would increase the load on your board's performance.

A Note: If you are using vbshout.. the effect will not show in the AJAX area. However, it will still display the usernames in the AJAX area and the rainbow effect will be available in shoutbox archive.

:up:Added & hidden bonus is that you can use this hack anywhere where you can use HTML code.. in almost any area you can think of!

[DobieGillis?]

are people enjoying this mod? Do the users have a choice if they want to use color or not?

[bodaudinh]

Replace this code for rainbow.js. ^^ It'll be cool...

/**
Rainbow Text
**/
function RGB2Color(r,g,b)
{
  return '#' + byte2Hex(r) + byte2Hex(g) + byte2Hex(b);
}

function byte2Hex(n)
{
  var nybHexString = "0123456789ABCDEF";
  return String(nybHexString.substr((n >> 4) & 0x0F,1)) + nybHexString.substr(n & 0x0F,1);
}


function colorText(str,phase)
{
	var result="";
  if (phase == undefined)
    phase = 0;
  center = 128;
  width = 127;
  frequency = Math.PI*2/str.length;
  for (var i = 0; i < str.length; ++i)
  {
     red   = Math.sin(frequency*i+2+phase) * width + center;
     green = Math.sin(frequency*i+0+phase) * width + center;
     blue  = Math.sin(frequency*i+4+phase) * width + center;
     result += ( '<font color="' + RGB2Color(red,green,blue) + '">' + str.substr(i,1) + '</font>');
  }
  return result;
}

function nickmausac(classname){
var txtValue = "";
	var b = getElementsByClassName(classname);

    for ( var i = 0; i < b.length; i++ ) {
		txtValue = colorText(b[i].innerHTML,1);
        b[i].innerHTML = txtValue;
    }
}

Use same as this mod...

<span class="rainbow">

add to footer//

<!-- rainbow text initialize -->
<script type="text/javascript"> 
<!--
nickmausac('rainbow');
//  End -->
</script>
<!-- rainbow text end -->

>> http://mytam.info/forum/member.php?u=50973


I have same as ideas by my sister, she asked me take her nickname has rainbow color... ^^

[n.sinha.p]

Originally Posted by michi123

nice mod dude! how can i change the colors to my liking?

Originally Posted by DobieGillis?

are people enjoying this mod? Do the users have a choice if they want to use color or not?

Well! In essence this generates random colours.. however you can obviously change the colour selection if you are a pro in javascript. Otherwise if enough people request this, I will come up with a version where you can set your own desired colour!

As for whether people are enjoying this or not, it has been just second day that I posted the hack and now it has got 12 installations. Is that bad??

[n.sinha.p]

Originally Posted by bodaudinh

Replace this code for rainbow.js. ^^ It'll be cool...

I have same as ideas by my sister, she asked me take her nickname has rainbow color... ^^

Hi,

Thanks for this and this is equally good. However, if you talk about performance, which is really a concern for boards, it is about executing 1 function against 4, and in total 27 lines of code against 35. Which one do you think would be faster?

[bodaudinh]

In my code, I FIND by Classname (with the key=rainbow), it'll run ONCE time.

var b = getElementsByClassName(classname);

But in your code, you search by FOR LOOP by TagName with span. How long for ??? Do u thinking abt that ?

var aspans = document.getElementsByTagName('span');
	for (var i = 0; i < aspans.length; i++)
	{

have 4 functions, It does not run slowly... U can check it again . Faster ???

[DobieGillis?]

installed, very nice. Let's see what the users think

[DobieGillis?]

uninstalled...it widened the screen for some users, they were not happy.

[n.sinha.p]

Originally Posted by DobieGillis?

uninstalled...it widened the screen for some users, they were not happy.

Can you upload screenshot so that I can check and try to amend the functionality?

[Nadeemjp]

both codes are very fine. will do them over the week end.

[DsmNikki]

i installed it but its showing my name as undefined??? y is that? what am i doing wrong?