arrow_upward

Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Rainbow Text/Button on mybb forum | Tutorial by Arsal
#1
Hello guys today i'm gonna show you how to add Rainbow button or text in your CSS. like mybb, phpbb, IPB any software which using CSS script.

i'm using this on my forum but i can't share my forum because now my forum is under contractions.


i'm going to teach you how to use it on mybb forum but you can use it on others software.

1st.
Quote:Goto ACP => Theme & Style => Click (your theme name) => css3.css => Edit Stylesheet: Advanced Mode
Now paste the following script at the top of css3.css
PHP Code: (Select All)
body {
background-size:2em 2em;background-position:0em 1em,1em 0,0em 1em,1em 0,0 0,0 0,0 0,0 0,0 0;background-image:linear-gradient(45deg,#000 8%,transparent 8%,transparent 92%,#000 92%),linear-gradient(-45deg,#000 8%,transparent 8%,transparent 92%,#000 92%),linear-gradient(-45deg,#000 8%,transparent 8%,transparent 92%,#000 92%),linear-gradient(45deg,#000 8%,transparent 8%,transparent 92%,#000 92%),linear-gradient(-45deg,transparent 17%,#000 17%,#000 21%,transparent 21%,transparent 79%,#000 79%,#000 83%,transparent 83%),linear-gradient(45deg,transparent 29%,#000 29%,#000 33%,transparent 33%,transparent 67%,#000 67%,#000 71%,transparent 71%),linear-gradient(-135deg,#202020 10%,#090909 33%,transparent 33%,transparent 67%,#161616 67%,#202020 90%),linear-gradient(135deg,transparent 21%,#161616 21%,#2d2d2d 32.6%,#161616 64.5%,#202020 70.3%,#090909 79%,transparent 79%),linear-gradient(-135deg,transparent 21%,#161616 21%,#202020 40%,#202020 60%,#090909 79%,transparent 79%);
colorwhite;
font-weight700;
font-size29px;
margin4em auto;
text-aligncenter;
cursorcrosshair;
letter-spacing5;
}

/*This is coded CSS rainbow*/

.rainbow:hover {
-
webkit-animation:rainbow 1s infinite;
-
ms-animation:rainbow 1s infinite;
-
o-animation:rainbow 1s infinite;
animation:rainbow 1s infinite;
}
@-
webkit-keyframes rainbow {
0% {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 {
0% {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 {
0% {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 {
0% {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 click "Save Change & Close"

Second step to point your text/button to this script.
Quote:GOTO: ACP => Theme & Style => Click Templates (at left bar) => (Your theme name) => if you want to use this button as register button then Header Template => Header.
but if you want to use this script like for group of administrator then

Quote:GOTO: ACP => Users & Groups => Click Group (at left bar) => Group you want like Administrator => Username Style

At the following script at "Usermane Style"
PHP Code: (Select All)
<span class="rainbow"><strong><em>{username}</em></strong></span


Hope you successfully install this script. if you've any problem/issue please help me know.

Note: Button it just showing a Text in rainbow color but if you want rainbow button let me know i'll share the script.


Thanks, Have a Good Day
-ArSaL


Messages In This Thread
Rainbow Text/Button on mybb forum | Tutorial by Arsal - by arsalahmed786 - 06-30-2017, 01:39 AM

Possibly Related Threads…
Thread
Author
Replies
Views
Last Post
4,974
10-20-2017, 01:26 PM
Last Post: perry

person_pin_circle Users browsing this thread: 1 Guest(s)
Sponsors: VirMach - Host4Fun - CubeData - Evolution-Host - HostDare - Hyper Expert - Shadow Hosting - Bladenode - Hostlease - RackNerd - ReadyDedis - Limitless Hosting