How to make Dropzone.js appear like the theme on the site?
Question
I've been trying to make Dropzone.js look like the theme on the site (dropzonejs.com) using a short piece of example code and dropzone.css. Here's my code:
<html>
<head>
<script src="dropzone.js"></script>
<link rel="stylesheet" type="text/css" href="dropzone.css">
<link rel="stylesheet" type="text/css" href="basic.css">
</head>
<form action="/upload-target" class="dropzone"></form>
</html>
I checked the file paths, and those are all good. The end result looks like http://www.dropzonejs.com/examples/simple.html but my intended result is like the example on the main page "Try It!" section.
Let me know if you can help.
1 answers
solution1
11 ACCPTED 2015-02-18 02:03:32
For the theme itself, it seems to work fine as long as you follow the same structure in the css rules: main section .dropzone .
<html>
<head>
<link rel="stylesheet" href="dropzone.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<section>
<h1 id="try-it-out">Try it out!</h1>
<div id="dropzone">
<form action="" class="dropzone dz-clickable" id="demo-upload">
<div class="dz-message">Drop files here or click to upload.
<br> <span class="note">(This is just a demo dropzone. Selected files are <strong>not</strong> actually uploaded.)</span>
</div>
</form>
</div>
</section>
</main>
</body>
</html>
Also, make sure you have both css files in your example
See the fiddle: http://jsfiddle.net/jnoxvc7t/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.