IP.Board Tutorials

Rainbow Username

Submitted by Mr_Joker, , Thread ID: 1302

Thread Closed
15-02-2015, 04:31 AM
#1
Hello,

Today I will be posting to show you how you can make usernames on your forum flash in a "Rainbow" fashion. This does not require "advanced" knowledge, just access to the Look & Feel section of your community's ACP.

Let's begin.
Firstly, you are going to navigate to ACP > Look & Feel > Your Skin > globalTemplate
This piece of code is to be inserted towards the bottom of the script. For example, you could place it just above where you see something relevant to <!-- ::: Footer ::: -->

Code:
<script>
var speed=80
var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")
var r=1
var g=1
var b=1
var seq=1
function changetext(){
for(i=0;i<document.getElementsByName("Rainbow").length;i++){
var storetext=document.getElementById? document.getElementsByName("Rainbow")[i] : document.all.highlight
rainbow="#"+hex[r]+hex[g]+hex[b]
storetext.style.color=rainbow
}
}
function change(){
if (seq==6){
b--
if (b==0)
seq=1
}
if (seq==5){
r++
if (r==12)
seq=6
}
if (seq==4){
g--
if (g==0)
seq=5
}
if (seq==3){
b++
if (b==12)
seq=4
}
if (seq==2){
r--
if (r==0)
seq=3
}
if (seq==1){
g++
if (g==12)
seq=2
}
changetext()
}
function starteffect(){
if (document.all||document.getElementById)
flash=setInterval("change()",speed)
}
starteffect()
</script>

After you have inserted the code, you may save your changes.
Now, we will navigate from within the ACP to Members > Member Groups > Manage Member Groups > Click on the group you wish to have the rainbow effect

For the group prefix, you are going to enter the following code
Code:
<span name="Rainbow">

As for the group suffix, you are going to enter
Code:
</span>

Once you are done, press Complete Edit and you should be good to go.

Things to note:
*This will only work on groups that you add the prefix & suffix to
*The rainbow will only show on skins that you add the script to
*It does not matter exactly where you place the script, as long as it is there and does not interrupt other code.

RE: Rainbow Username

#2
For everyone: This can be done using CSS3 only.

RE: Rainbow Username

#3
16-06-2016, 02:02 AM
Kill Wrote:
For everyone: This can be done using CSS3 only.

How can you do this with css3?
we are all supposed to think of reasons to live

RE: Rainbow Username

#4
17-06-2016, 10:49 AM
Carb0n Wrote:
16-06-2016, 02:02 AM
Kill Wrote:
For everyone: This can be done using CSS3 only.

How can you do this with css3?

With keyframes, will post code later

RE: Rainbow Username

#5
awesome thing, tnx for it!

RE: Rainbow Username

Warned
#6
Hahahaha this is awesome!

RE: Rainbow Username

#7
I am really new to this site but this Is pretty cool! How can you do this with css3?

RE: Rainbow Username

#8
Looks cute, thanks a lot. Would also appreciate the CSS3 code if possible.

RE: Rainbow Username

#9
any chance of sharing the CSS3 code ?

RE: Rainbow Username

#10
I see rainbow usernames I want this hmm.
[Image: wsUuw16j6oyxLLRnnK.gif]

Users browsing this thread: 3 Guest(s)