Rainbow username!?

[?e?a Morte]

Is there away to change specific user/groups username to rainbow?

Like this == 

[Smangii]

You can try something like this? I haven't used it myself but could work.

www.proboards.com/library/plugins/item/114

There is a CSS way I know of, however it currently only works in Chrome/Safari, not in Firefox or Internet explorer. If the above plugin doesn't work for you, let me know and I can share the CSS Snippet.

[?e?a Morte]

This plugin is good, but it's not what I'm looking for, sorry. I want each letter a different colour

[Smangii]

How well do you know JS? I can translate the following into a PB code that you can copy/paste if you want, but this is what you'll have to do

rainbowcoding.com/how-to-create-rainbow-text-in-html-css-javascript/

[?e?a Morte]

mmm I am not very good with Java scripting, I know a little CSS, but I'm good at instructions

[Smangii]

Jan 8, 2014 18:16:30 GMT -8 ?e?a Morte said:

mmm I am not very good with Java scripting, I know a little CSS, but I'm good at instructions

Haha no problem!

Using the code from the site I could get this work in Global Footers, which means it will work on all themes. If you want this to change, let me know and I think putting in Layout Templates would work too, but I can try it first if it doesn't work.


<script type="text/javascript">
/* Rainbow usernames for groups or users, code found from
http://rainbowcoding.com/how-to-create-rainbow-text-in-html-css-javascript */

function color_from_hue(hue)
{
 var h = hue/60;
 var c = 255;
 var x = (1 - Math.abs(h%2 - 1))*255;
 var color;

 var i = Math.floor(h);
 if (i == 0) color = rgb_to_hex(c, x, 0);
 else if (i == 1) color = rgb_to_hex(x, c, 0);
 else if (i == 2) color = rgb_to_hex(0, c, x);
 else if (i == 3) color = rgb_to_hex(0, x, c);
 else if (i == 4) color = rgb_to_hex(x, 0, c);
 else color = rgb_to_hex(c, 0, x);

 return color;
}

function rgb_to_hex(red, green, blue)
{
 var h = ((red << 16) | (green << 8) | (blue)).toString(16);
 // add the beginning zeros
 while (h.length < 6) h = '0' + h;
 return '#' + h;
}

(function( $ ) {

 $.fn.rainbowize = function() {
   return this.each(function() {
     var rainbowtext = '';
     var hue=0;
     var step=0;

     // get the current text inside element
     var text = $(this).text();

     // hue is 360 degrees
     if (text.length > 0)
       step = 360 / (text.length);

     // iterate the whole 360 degrees
     for (var i = 0; i < text.length; i++)
     {
       rainbowtext = rainbowtext + '<span style="color:' + color_from_hue(hue) + '">' + text.charAt(i) + '</span>';
       hue += step;
     }

     $(this).html(rainbowtext);
   });
 };
})( jQuery );

$(".group-1").rainbowize();
$(".user-2").rainbowize();

</script>

The only part you have to edit are the last lines:

$(".group-1").rainbowize();

$(".user-2").rainbowize();


You can remove or add more groups or users, by changing the #. Mouse-over someone's user name to figure out what # they are by looking at the URL: (http://yourforum.proboards.com/user/2) or when clicking on a group check the URL to see the group # (http://yourforum.proboards.com/members?group=1&view=group)

[?e?a Morte]

Thank you!! Works Great! except this --
It makes users custom title rainbow aswell

[Smangii]

Whoops, didn't think about that...

Try changing it to:

$(".user-link.group-1").rainbowize();
$(".user-link.user-2").rainbowize();

[?e?a Morte]

Jan 8, 2014 18:51:21 GMT -8 Smangii said:

Whoops, didn't think about that...

Try changing it to:

$(".user-link.group-1").rainbowize();
$(".user-link.user-2").rainbowize();

Works Like a Charm

[Smangii]

Sweet! You are very welcome Enjoy the colors!

[?e?a Morte]

Thanks man! Hey, maybe this should be in the frequently asked questions thing, it's really handy