Created: 25/3/2011
By: AdamGold
Email: ronalister@gmail.com
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
If needed, video password is "iboughtit"
Ignore the crop script, changed in the latest version
<script type="text/javascript" src="scripts/slDropFile.js"></script>
<!-- Don't forget the DOCTYPE: -->
<!DOCTYPE html>
<!-- Until here -->
<html>
<head>
<!-- Copy from here -->
<link href='css/html5_uploader.css' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">
<script src="scripts/uploader.js">
<!-- To here -->
After you do that, to integrate the application create a new DIV with any name you like:
<div id="yourdivname"></div>
Next, we need to call the uploader function to run on that DIV, paste this code before the closing of the head section (</head>):
<script type="text/javascript">
$(document).ready( function() {
$('#yourdivname').uploader();
});
</script>
What we do here is to run jQuery function, get the DIV we created and then apply our custom uploader function on it. In order to enable images uploads only, we need to create a new parmater in our custom uploader function:
$('#yourdivname').uploader({ allow : false });
When you turn the allow option to false, users won't be able to upload nothing other than images.
If needed, video password is "iboughtit"
Ignore the crop script, changed in the latest version
functions.php, single.php and header.php are included in the package you've downloaded. Follow the screencast and just copy & paste the codes like I do in the tutorial.
Don't forget to upload the "uploader" folder to your theme path, and then replace "css/html5_uploader.css" with the new "html5_uploader.css" that is located in the "wordpress-uploader" folder.
So we have got our source files ready. Now, what we need to do is to create a new DIV and trigger the uploader function on that DIV. Open up header.php, functions.php and single.php that are located in the "uploader-wordpress" in the package. We will start in functions.php: Find the following code and copy it:
function init_uploader() {
wp_enqueue_style('uploader font', 'http://fonts.googleapis.com/css?family=Droid+Serif');
wp_enqueue_style('uploader css', get_bloginfo('template_url') . '/uploader/css/html5_uploader.css');
wp_enqueue_script('jquery');
wp_enqueue_script('fix script', get_bloginfo('template_url') . '/uploader/scripts/slDropFile.js');
wp_enqueue_script('uploader', get_bloginfo('template_url') . '/uploader/scripts/uploader.js');
}
add_action('init', 'init_uploader');
Now open your current theme's "functions.php", and paste the code you just copied (Doesn't matter where, you can paste it in the end of the file).
Next, open your current "single.php" and create a new DIV. Place it anywhere you like, and name it in any name you like:
<div id="yourdivname"></div>Now, open up "header.php" which is included in the package, and copy the following code:
<script type="text/javascript">
jQuery(document).ready( function() {
jQuery('#dropable').uploader({ base : '/uploader' });
});
</script>
Finally, open your current "header.php" and paste the above code before the closing of the head tag (</head>). Don't forget to replace "yourdivname" with your actual div name.
If you would like to enable images only, add the 'allow' paramater to the script:
<script type="text/javascript">
jQuery(document).ready( function() {
jQuery('#dropable').uploader({ base : '/uploader', allow : false });
});
</script>
I'm using one CSS file in this theme called "html5_uploader.css". Basically, you can just style you own DIV when creating the uploader. If you have any problems styling your DIV, feel free to edit the basic uploader CSS. Go to css/html5_uploader.css and edit the attributes of .dropable - .dropable is the class which is automatically added to your uploader DIV (the code is commented so you can see what each action does):
.dropable {
background:#A9EFFF; /* the blue background, change it if you want */
min-height:200px; /* Adds an height to your DIV when nothing is in it. */
-moz-border-radius: 10px; /* Makes the DIV to be rounded in FireFox */
border-radius: 10px; /* Makes the DIV to be rounded in all other browsers */
width: 880px; /* The DIV width */
padding: 40px; /* adds padding to the DIV. */
margin: auto; /* Centers the DIV */
}
To change the upload button, this is the block of code you will need to edit:
.file_input_button
{
width: 100%;
height: 100%;
position: absolute;
top: 0px;
background: url('../images/upload_files.png');
cursor: pointer;
border: 0;
}
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
AdamGold