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!

[dai-kun]

Originally Posted by 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 -->

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

Does not work ... I did your edits.



You forgot to include

function getElementsByClassName(classname, node) {

	if(!node) node = document.getElementsByTagName("body")[0];
		var a = [];
		var re = new RegExp('\\b' + classname + '\\b');
		var els = node.getElementsByTagName("*");
		for(var i=0,j=els.length; i<j; i++)
			if(re.test(els[i].className)) a.push(els[i]);
	return a;
}

in your js file.

The rainbow color does not appear until everything on the page has been loaded..

[bodaudinh]

Originally Posted by dai-kun

Does not work ... I did your edits.

You forgot to include

function getElementsByClassName(classname, node) {

	if(!node) node = document.getElementsByTagName("body")[0];
		var a = [];
		var re = new RegExp('\\b' + classname + '\\b');
		var els = node.getElementsByTagName("*");
		for(var i=0,j=els.length; i<j; i++)
			if(re.test(els[i].className)) a.push(els[i]);
	return a;
}

in your js file.

The rainbow color does not appear until everything on the page has been loaded..

vbb using YUI, this function has been included.
http://yui.yahooapis.com/2.6.0/build...event.js?v=381

[n.sinha.p]

Originally Posted by DsmNikki

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

Is your name showing otherwise? What is the markup for your usergroup? Can you post screenshots?

[y2krazy]

Ok, installed, but the names for the specific usergroup I'm applying this to shows up as "undefined" for each letter in the usergroup name and the actual member's name. The colors show up fine, so what would cause the letters to show up as "undefined"? Example:

"Administrators" turns into....

"undefinedundefinedundefinedundefinedundefinedunde finedundefinedundefinedundefinedundefinedundefined undefinedundefinedundefined"

Very frustrating! Any help? Thanks.

EDIT: I think it might be clashing with this addon:

https://vborg.vbsupport.ru/showthread.php?t=201385

~ Sean

[n.sinha.p]

Originally Posted by y2krazy

Ok, installed, but the names for the specific usergroup I'm applying this to shows up as "undefined" for each letter in the usergroup name and the actual member's name. The colors show up fine, so what would cause the letters to show up as "undefined"? Example:

"Administrators" turns into....

"undefinedundefinedundefinedundefinedundefinedunde finedundefinedundefinedundefinedundefinedundefined undefinedundefinedundefined"

Very frustrating! Any help? Thanks.

EDIT: I think it might be clashing with this addon:

https://vborg.vbsupport.ru/showthread.php?t=201385

~ Sean

Ok! This means the mod is not able to handle the names when embedded by multiple random span tags. Let me install the mod and see if I can come up with an enhancement to overcome this.

Thanks for letting me know.

[SuperTaz]

I have the undefined problem too.

[Mecho]

nice , is it possible to have certain colors in this random things as some of the colors would be not really readable in some styles ( dark / white ones ) ?

thanks

[michi123]

sumbody on my site got undefindet (in colors) aswell, and sumbody not! so i think it depense on their java version!

[n.sinha.p]

Originally Posted by Mecho

nice , is it possible to have certain colors in this random things as some of the colors would be not really readable in some styles ( dark / white ones ) ?

thanks

Thanks for your feedback.

It is quite possible and very soon I will be uploading the enhancement.

[aakhan136]

thanks