Rainbow (Multicolour) Username for Usergroups

[n.sinha.p]

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/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:[B]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!

[kellyandmark04]

Nice first installed!!

[n.sinha.p]

Many Thanks! If it is working for you.. would you mind posting your board's URL so that other's can see also?

[dreads]

Thats very unique and cool, thanks

you can use this also for forum categories

[dai-kun]

Hm... it would be cooler if it has a gradient animation effect :)

I like it but it looks too bright on my white background so can hardly see... :(

[n.sinha.p]

Thats very unique and cool, thanks

you can use this also for forum categories

You can use it anywhere if you can use HTML code. It's just about enclosing the required text into span! :)

Hm... it would be cooler if it has a gradient animation effect :)

I like it but it looks too bright on my white background so can hardly see... :(

No worries! I'll come up with the hack that you require shortly. :up:

[dai-kun]

^ Thanks, that'll be so awesome :)

[RobbieZ]

Looks pretty kewl :)

[n.sinha.p]

Looks pretty kewl :)

Ah! Thank you! It's just that I came up for my board and thought of sharing! :D

[michi123]

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

[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
https://vborg.vbsupport.ru/external/2009/02/22.jpg

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

[n.sinha.p]

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

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]

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? :D

[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]

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?

[dai-kun]

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]

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/yahoo-dom-event/yahoo-dom-event.js?v=381

[n.sinha.p]

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....

"undefinedundefinedundefinedundefinedundefinedundef inedundefinedundefinedundefinedundefinedundefinedu ndefinedundefinedundefined"

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]

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....

"undefinedundefinedundefinedundefinedundefinedundef inedundefinedundefinedundefinedundefinedundefinedu ndefinedundefinedundefined"

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]

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

[Mellymonster]

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
https://vborg.vbsupport.ru/external/2009/02/22.jpg

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

I would love to use this, but its not working correctly.

[Mellymonster]

Ok I got the above to work, but now I'm having a problem with some of my members names does not catch it... Any idea what can be causing this?

[n.sinha.p]

Ok I got the above to work, but now I'm having a problem with some of my members names does not catch it... Any idea what can be causing this?

Did you use the js file I supplied or the one supplied by bodaudinh? If it is the code given by Bodaudinh, then sorry I do not own the code and hence would not be able to support. Try sending a PM to him. If it is about the code that I've posted, let me know the exact problem and I'll try to resolve it.

[celikforum]

my problemm

[DannyC55]

Users using IE are saying it doesn't work for them. It comes up undefined....
Please sort this.

[Neptun]

i have a problem with this hack

i installed everything like in the description ... but aber i change the tag in the usergroup

-> instead of the username is there "undefinedundefinedundefinedundefinedundefined"

what is going wrong or where is the probleme ?!


in IE i have the big problem - in firefox it works fine - what i have done wrong ?! :((((

[DobieGillis?]

Users using IE are saying it doesn't work for them. It comes up undefined....
Please sort this.

it's an IE killer....

[DobieGillis?]

i have a problem with this hack

i installed everything like in the description ... but aber i change the tag in the usergroup

-> instead of the username is there "undefinedundefinedundefinedundefinedundefined"

what is going wrong or where is the probleme ?!


in IE i have the big problem - in firefox it works fine - what i have done wrong ?! :((((

nothing, it just doesn't work with IE...I uninstalled it

[Neptun]

has the coder no idea to fix the problem ?!

[n.sinha.p]

This is not compatible with usergroup legend hack.. I am working on making it a full blown mod so that it would change all the required templates.

[newtsys]

n.sinha.p very nice work cant wait to see a full blown version with use can select color fade....keep up the great work.

[eTiKeT?]

:D İnstalled Thanks Nice

[DobieGillis?]

would love to see this work in IE...

[Neptun]

i will hope that the new version of the hack will come soon ..... which one works with ie

[n.sinha.p]

would love to see this work in IE...

i will hope that the new version of the hack will come soon ..... which one works with ie

This one does works with IE.. FF users have reported problems with Usergroup Legend mod compatibility and I am working on it.

[Neptun]

this one works with IE ?! do you have made an update with the hack ?! because i have installed this one and then i will get a lot of problems in IE and in firefox not ?!

-> instead of the username is there "undefinedundefinedundefinedundefinedundefined"


whats going wrong then ?! i dont understand

[bodaudinh]

Someone ask me about my edited mod.

Please download attach file, I have been edited. (Thanks n.sinha.p)
Do step by step as instruction of this mod.

Good luck,
If u got problem, plz pm with link your forum. I'll be check it for u.

[Xencored]

Thanks installed :)

[SliceofLife]

I installed this, and I get the 'undefined' problem. Can anyone tell me what is going on? Or, is there another version of this that actually works?

[torrentrockerz]

Thank You........

[SpaceStar]

Uninstalled.

The same problem as many others. Undefined in IE

[bodaudinh]

Ok, I fixed it for u.
Open file rainbow.js:
Find:
rainText+="<strong><font color=\"#"+colourscheme[c1]+colourscheme[c2]+colourscheme[c3]+colourscheme[c4]+colourscheme[c5]+colourscheme[c6]+"\">"+words[ch]+"</font></strong>";
Replace with:
rainText+="<strong><font color=\"#"+colourscheme[c1]+colourscheme[c2]+colourscheme[c3]+colourscheme[c4]+colourscheme[c5]+colourscheme[c6]+"\">"+words.charAt(ch)+"</font></strong>";


words[ch] ==> words.charAt(ch)

Tested, work for IE. :)

[SpaceStar]

Ok, I fixed it for u.
Open file rainbow.js:
Find:
rainText+="<strong><font color=\"#"+colourscheme[c1]+colourscheme[c2]+colourscheme[c3]+colourscheme[c4]+colourscheme[c5]+colourscheme[c6]+"\">"+words[ch]+"</font></strong>";
Replace with:
rainText+="<strong><font color=\"#"+colourscheme[c1]+colourscheme[c2]+colourscheme[c3]+colourscheme[c4]+colourscheme[c5]+colourscheme[c6]+"\">"+words.charAt(ch)+"</font></strong>";


words[ch] ==> words.charAt(ch)

Tested, work for IE. :)


Thanks worked fine :up:

[Xencored]

Anyway to get the rainbow text Bold too?

Thanks

[SCSCSC]

Is there any way to make this rainbow text come in the text of the post also..
Or some userfriendly mod that will allow us to specify colors for each group accordingly ?
Thanks

[djvj]

Same problem as rest, this DOES NOT work in IE8. It works fine in FF and even FF 3.5 beta.

Thanks bodaudinh, your edits make it a real rainbow effect and it works in both IE and FF.

Note: I do not have the UGL mod installed, so it's a problem in the code, not just from an addon incompatibility.

[GoTTi]

im getting the following error when i changed the admin usergroup html markup.

[GoTTi]

nevermind i saw the fix.

[aakhan136]

can i use this for Version 3.8.2??

[tunedtech]

right now i already have my user name group color changed but i want the color user group to show under the current active users like what you have. can you help me how can i do this?

[kent_lkc]

good MOD, but top 5 stats display my name in black & white color. Why ??

site link, gsm.motoxtreme.info

[SliceofLife]

I've done the changes you suggested on page 4, but now I'm bold?

Is there any way to make sure that if I use the rainbow username it WONT show up as bold?

[SCSCSC]

hey a Request for you,,

Can you make it like we can put colors for each usergroup in usergroup settings
and it wil display accordingly...

Also we can make the posts like with faded effect...

Would be great if you did that...

[Sp32]

Is there a way to implement this in cyb chatbox??

[DiageoLiam]

Yeah, I second this... how do I get it to work in my Cyb Chatbox?!

[Sp32]

it works like as soon as the page loads but then the username turns white :(

[Snug]

Is there a way to implement this in cyb chatbox??

yes, please.. anything?

[Vackrick]

i got this

&nbsp;&nbsp; at the usergroup name...

[meissenation]

Someone ask me about my edited mod.

Please download attach file, I have been edited. (Thanks n.sinha.p)
Do step by step as instruction of this mod.

Good luck,
If u got problem, plz pm with link your forum. I'll be check it for u.

Thank you. This works in Internet Explorer - the zip file that is attached to the modification DOES NOT WORK in INTERNET EXPLORER.

[choccyclaire]

When you post, you have to reload the page and come in and out of thread to see the rainbow colour in name? Or is this just me.

EDIT: I downloaded the version on the previous page.

[GodMaster]

I will be moving to this color is?

[roaddevils]

Has anyone gotten this to work in Cyb Chatbox yet?

[malipl]

guys what is the rainbow color here look please in user group (fortress finest) muonline.biz/fortress

[Samish]

Works fine for me, Thanks xx

[sonixax]

you can use it on VB4 too , just replace :

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

with :

<script type="text/javascript" src="{vb:raw vboptions.bburl}/clientscript/rainbow.js"></script>

[orangefive]

Cool - installed on 4.0.7 including post above - ta!

[RoG Aftermath]

Hello, im using this on vbulletin 4 and it works, but the rainbow color isnt showing up on the top 10 stats and its also not showing up as bold, anyway to fix this?

[RoG Aftermath]

im using the Vsa - advanced forums statistics

[M.Iftikhar]

please some one make this for vbulletin 4.1.10.......thanks

[1005467401]

this wont work on vb 4.1.9

[elteejay]

If you want to choose your own specific colors to go through it here is a quick mod. replace the array colors with either color names or #hexcodes.

<!--
// ################################################## ##
// ######## RainBow Text Effect for UserNames #########
// ################# By Neeraj Sinha ##################
// ### Please leave these comments if you are using ###
// ##### http://apnigang.com/forums/index.php #####
// ################################################## ##

function rain()
{
var aspans = document.getElementsByTagName('span');
for (var i = 0; i < aspans.length; i++)
{
if (aspans[i].className =='rainbow')
{
var words=aspans[i].innerHTML;
var spacer="";
var rainText="";
var colourscheme=new Array("magenta","gold","white","blue","red","green","yellow","orange","gray","purple","pink","lime","cyan","teal","indigo","lightblue")
for(var ch=0;ch<=(words.length-1);ch++){
var c1=Math.round(Math.random()*(colourscheme.length-1));
rainText+="<strong><font color=\""+colourscheme[c1]+"\">"+words[ch]+"</font></strong>";
}
aspans[i].innerHTML=rainText;
}
}
}
// End -->

[irfan72]

Thanks dude, awesome sharing :)

[CoffeeLovesYou]

How would I make this just be green and red? Instead of all of the other colours?

[XGC Paravain]

Will this work with vb 4.2.0?

[OUTL4W]

Will this work with vb 4.2.0?

look at post 75 in this thread

sorry to bump such an old thread....but how to show the specific colors and not in random sequence when page is loaded?....would like to use specific gradient colors.