Rainbow usernames color

[Elena-Viorica]

On IPB 3.4, there was this code that could be added to the themes to make the usernames for certain groups animated rainbow-colored.

http://designscore.blogspot.com/2013/08/how-to-easily-cycle-rainbow-username-on.html

Is there any way this could be adapted to work for IPB 4.1 ?

[Tom Irons]

I found something that only requires CSS...

.rainbow-glow {
-webkit-animation:rainbow 5s infinite;
-ms-animation:rainbow 5s infinite;
-o-animation:rainbow 5s infinite;
animation:rainbow 5s infinite;
}
@-webkit-keyframes rainbow {
% {color: #ff0000;}
10% {color: #ff8000;}
20% {color: #ffff00;}
30% {color: #80ff00;}
40% {color: #00ff00;}
50% {color: #00ff80;}
60% {color: #00ffff;}
70% {color: #0080ff;}
80% {color: #0000ff;}
90% {color: #8000ff;}
100% {color: #ff0080;}
}
@-ms-keyframes rainbow {
% {color: #ff0000;}
10% {color: #ff8000;}
20% {color: #ffff00;}
30% {color: #80ff00;}
40% {color: #00ff00;}
50% {color: #00ff80;}
60% {color: #00ffff;}
70% {color: #0080ff;}
80% {color: #0000ff;}
90% {color: #8000ff;}
100% {color: #ff0080;}
}
@-o-keyframes rainbow {
% {color: #ff0000;}
10% {color: #ff8000;}
20% {color: #ffff00;}
30% {color: #80ff00;}
40% {color: #00ff00;}
50% {color: #00ff80;}
60% {color: #00ffff;}
70% {color: #0080ff;}
80% {color: #0000ff;}
90% {color: #8000ff;}
100% {color: #ff0080;}
}
@keyframes rainbow {
% {color: #ff0000;}
10% {color: #ff8000;}
20% {color: #ffff00;}
30% {color: #80ff00;}
40% {color: #00ff00;}
50% {color: #00ff80;}
60% {color: #00ffff;}
70% {color: #0080ff;}
80% {color: #0000ff;}
90% {color: #8000ff;}
100% {color: #ff0080;}
}

Then for the group prefix do <span class="rainbow-glow"> and for the suffix do </span>

[Elena-Viorica]

Where should I add that?

[Tom Irons]

In your custom.css in the template editor.