Leaderboard

Well here I am with another tutorial! Alright today I will be showing you how to add the ability for users to upload files to a file hosting site without leaving your website tab. So go to your ACP -> Look & Feel -> Skin name you want to add this to -> Editor -> editor Now scroll down to the bottom and add the following: <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> Save that and go to Global Templates -> globalTemplate Now find the </head> ending tag and add the following for FontAwesome to work: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> Save that and your done now you can remove the following to add your own image/icon: <i class="fa fa-upload fa-2x" aria-hidden="true"></i> Now to add your own image/icon you'll need the following code: <img src='{style_images_url}/example.png'> Now replace the example name with the actual icon name. Now the last thing click css and open ipb_styles.css and add the following to the bottom: /** Uploaders **/ .uploaders { position: fixed; left: 155px; } .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; } Save & you're done. That's it save and your free to go see how it looks on your forum! The colors for the links are actual colors from the file sharing sites feel free to change that in the css. Good Luck & Happy Coding!