IP.Board Tutorials

Rainbow Username

Submitted by Mr_Joker, , Thread ID: 1302

Thread Closed
Mr_Joker
YouR JuSt G4Y
Level:
0
Reputation:
3
Posts:
795
Likes:
51
Credits:
493
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

Coin
Level:
0
Reputation:
59
Posts:
1.13K
Likes:
54
Credits:
243
16-06-2016, 02:02 AM
#2
For everyone: This can be done using CSS3 only.

RE: Rainbow Username

Carb0n
Active Member
Level:
0
Reputation:
3
Posts:
236
Likes:
19
Credits:
119
17-06-2016, 10:49 AM
#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

Coin
Level:
0
Reputation:
59
Posts:
1.13K
Likes:
54
Credits:
243
17-06-2016, 01:53 PM
#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

oTo
Newbie
Level:
0
Reputation:
0
Posts:
15
Likes:
0
Credits:
7
04-12-2016, 01:02 PM
#5
awesome thing, tnx for it!

RE: Rainbow Username

mcoll
Newbie
Level:
0
Reputation:
0
Posts:
15
Likes:
0
Credits:
7
11-12-2016, 09:33 AM
Warned
#6
Hahahaha this is awesome!

RE: Rainbow Username

NightPotato
Newbie
Level:
0
Reputation:
0
Posts:
17
Likes:
1
Credits:
28
05-01-2017, 05:57 AM
#7
I am really new to this site but this Is pretty cool! How can you do this with css3?

RE: Rainbow Username

11-02-2017, 06:09 PM
#8
Looks cute, thanks a lot. Would also appreciate the CSS3 code if possible.

RE: Rainbow Username

shoki
Closed Account
Level:
0
Reputation:
0
Posts:
9
Likes:
0
Credits:
0
02-06-2017, 07:56 PM
#9
any chance of sharing the CSS3 code ?

RE: Rainbow Username

Yondu
Marry Poppins Y'all
Administrators
Level:
34
Reputation:
190
Posts:
1.48K
Likes:
324
Credits:
3.49K
02-06-2017, 07:58 PM
#10
I see rainbow usernames I want this hmm.
[Image: wsUuw16j6oyxLLRnnK.gif]

Users browsing this thread: 1 Guest(s)