Multi coloured usernames

[HobbsVT]

Is it possible to have multi coloured usernames on Xenforo, like rainbow? or custom multi coloured usernames?

If so how?

Thanks!

 

[Lukas W.]

Generally spoken you want to colourize a single usernames letters in different colors? The spontaneously easiest way I could imagine to do that would be a custom javascript working on your page, but if you'd want that to work with only some specific users, that would be a bit more of an effort than it already would be to implement the script itself.

 

[HobbsVT]

Yes thats what I mean.
For example we have a $200 donor - Rainbow (this would be a usergroup) and I want it so all people associated with this usergroup would have the rainbow color?
it seems like this is too much work as I don't have any idea is it possible

 

[Lukas W.]

As said it is possible, but you won't be able to do it without the knowledge on how to. There would be an easy way but it currently only works with Webkit-Browsers, which are effectively Google Chrome and Safari, but not with Firefox, Opera or Internet Explorer, so it is in neither way a sufficient solution. Writing a Javascript is a bit of work, especially if you don't know how to do it, but you could search the web for a tutorial on how to.

But beside that, I don't think it is a good idea to implement it in rainbow colors. Some people find it hard to read that or even disturbing, which would probably make them a little dissatisfied when visiting your site. Does it really require to use a multicolored name? A single color would be much easier, less disturbing for some people and probably overall more satisfying, but that is just my little opinion.

 

[TPerry]

Instead of a rainbow name, just make a user banner with a rainbow color selection (a graphic file) and for the Title something like Rainbow Supporter or use an image before and after the Rainbow Supporter if you just want to have a solid color banner.

 

[Iversia]

Here's the CSS solution:

background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;

You can see which browsers currently support gradients here: http://caniuse.com/css-gradients

 

[desperado195]

thanks bro @lversia

 

[Justauser]

Here's the CSS solution:

background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;

You can see which browsers currently support gradients here: http://caniuse.com/css-gradients

Where to put that code exectly?