MyBB Community Forums

Welcome to another one of my tutorials!
Today we will be adding file sharing upload links to a few different areas so there's several different templates you'll be editing today including the global.css. You'll want to do this to the theme you're using for your forum so it's best to test this on the default theme. That way if something messes up you can revert the templates and global.css.

So the templates we'll be editing are:
editpost, newreply, newthread, private_send & showthread_quickreply.

So you'll need to find this line of code in all these templates:

<textarea name="message" id="message" rows="20" cols="70" tabindex="3">{$message}</textarea>

You want to add this below that line:

<br/><span class="mediafire"><a href="#" onClick="javascript:window.open('https://mediafire.com','','location=0,status=0,scrollbars=1,width=760,height=660');"><i class="fa fa-upload fa-2x" aria-hidden="true"></i>MediaFire It</a></span><span class="filedropper"><a href="#" onClick="javascript:window.open('http://filedropper.com','','location=0,status=0,scrollbars=1,width=760,height=660');"><i class="fa fa-upload fa-2x" aria-hidden="true"></i>FileDropper It</a></span><span class="tinyupload"><a href="#" onClick="javascript:window.open('http://www.tinyupload.com/','','location=0,status=0,scrollbars=1,width=760,height=660');"><i class="fa fa-upload fa-2x" aria-hidden="true"></i>TinyUpload It</a></span>

Now once you finished doing that with your templates you want to add the options to open your global.css and scroll to the very bottom.

Add the following code:

/** Uploaders **/
 .mediafire a:link, .mediafire a:visited {
       font-size: 12px;
       color: #49ACF2;
       opacity: 0.65;
       transition: all 0.5s ease;
     margin-right: 12px;
 }
 
 .mediafire a:hover, .mediafire a:active {
       opacity: 1;
       transition: all 0.5s ease;
 }
 .filedropper a:link, .filedropper a:visited {
       font-size: 12px;
       color: #FFCE28;
       opacity: 0.65;
       transition: all 0.5s ease;
     margin-right: 12px;
 }
 
 .filedropper a:hover, .filedropper a:active {
       opacity: 1;
       transition: all 0.5s ease;
 }
 .tinyupload a:link, .tinyupload a:visited {
       font-size: 12px;
       color: #FF5F5F;
       opacity: 0.65;
       transition: all 0.5s ease;
     margin-right: 12px;
 }
 
 .tinyupload a:hover, .tinyupload a:active {
       opacity: 1;
       transition: all 0.5s ease;
 }

You also want to go to Ungrouped Templates -> headerinclude
Now scroll to the very bottom and add the following to get fontawesome to work:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

Here's a screenshot on how it will look:


Good Luck & Happy Coding!

Good tutorial mate, keep it up

Thanks man