Post4VPS Forum | Free VPS Provider
Rainbow Text/Button on mybb forum | Tutorial by Arsal - Printable Version

+- Post4VPS Forum | Free VPS Provider (https://post4vps.com)
+-- Forum: VPS Discussion (https://post4vps.com/Forum-VPS-Discussion)
+--- Forum: Tutorials (https://post4vps.com/Forum-Tutorials)
+--- Thread: Rainbow Text/Button on mybb forum | Tutorial by Arsal (/Thread-Rainbow-Text-Button-on-mybb-forum-Tutorial-by-Arsal)

Pages: 1 2

Rainbow Text/Button on mybb forum | Tutorial by Arsal - arsalahmed786 - 06-30-2017

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:
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%);
color: white;
font-weight: 700;
font-size: 29px;
margin: 4em auto;
text-align: center;
cursor: crosshair;
letter-spacing: 5;
}

/*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:
<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

RE: Rainbow Text/Button on mybb forum | Tutorial by Arsal - OldMeister - 07-08-2017

thats a good tutorial. can you make tutorial about how to use mybb

RE: Rainbow Text/Button on mybb forum | Tutorial by Arsal - arsalahmed786 - 07-08-2017

(07-08-2017, 08:22 AM)OldMeister Wrote: thats a good tutorial. can you make tutorial about how to use mybb

what you mean by how to use mybb. you're looking for installation or create category's and themes.

for installation you can install it in 1 click. on your Website's Cpanel. then create it by your own mind.

RE: Rainbow Text/Button on mybb forum | Tutorial by Arsal - OldMeister - 07-08-2017

mybb is used for making websites no? because i want make website and idk where to start

RE: Rainbow Text/Button on mybb forum | Tutorial by Arsal - perry - 07-08-2017

mind leaving an example link?

RE: Rainbow Text/Button on mybb forum | Tutorial by Arsal - arsalahmed786 - 07-08-2017

(07-08-2017, 04:01 PM)OldMeister Wrote: mybb is used for making websites no? because i want make website and idk where to start

Mybb is a Board. and board means forum. you can install it for free if you want a forum. and create theme or buy or use free theme and make your custom forum. my forum is ready but i can't show. in few days i'll announce my forum everywhere. it for Free Game Servers.

RE: Rainbow Text/Button on mybb forum | Tutorial by Arsal - YOuNeS_Dz - 07-09-2017

any screenshots ? show us an example Smile
and is it like (Founder group name) Here(P4V)
and between @Dynamo
send me your group text code..

RE: Rainbow Text/Button on mybb forum | Tutorial by Arsal - arsalahmed786 - 07-09-2017

(07-09-2017, 08:27 PM)YOuNeS_Dz Wrote: any screenshots ? show us an example Smile
and is it like (Founder group name) Here(P4V)
and between @Dynamo
send me your group text code..
well as i already said i can't show my forum now. it completed but wait for domain name.

for button you need some little bit CSS scripting.

you can use it as Text anywhere just use class="rainbow"

check it out attached images. i take 2 pictures well pictures can't how moving gif image.


if you know anybody who can install cpanel and game server on VPS then let us know.

RE: Rainbow Text/Button on mybb forum | Tutorial by Arsal - OldMeister - 07-10-2017

(07-08-2017, 05:58 PM)arsalahmed786 Wrote: Mybb is a Board. and board means forum. you can install it for free if you want a forum. and create theme or buy or use free theme and make your custom forum. my forum is ready but i can't show. in few days i'll announce my forum everywhere. it for Free Game Servers.

then what about making tutorial about mybb

RE: Rainbow Text/Button on mybb forum | Tutorial by Arsal - arsalahmed786 - 07-10-2017

(07-10-2017, 10:48 AM)OldMeister Wrote: then what about making tutorial about mybb

Bro it easier then you think. just goto your Cpanel. => Softaculous => Mybb. Click install add details and click installation. that's all