Elena-Viorica Posted April 13, 2016 Share Posted April 13, 2016 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 ? Link to comment Share on other sites More sharing options...
Tom Irons Posted April 14, 2016 Share Posted April 14, 2016 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> Link to comment Share on other sites More sharing options...
Elena-Viorica Posted April 18, 2016 Author Share Posted April 18, 2016 Where should I add that? Link to comment Share on other sites More sharing options...
Tom Irons Posted April 18, 2016 Share Posted April 18, 2016 In your custom.css in the template editor. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.