Question

42

How to make Dropzone.js appear like the theme on the site?

rated 0 times [ 45] [ 3] / answers: 1 / hits: 36721 / 9 Years ago, wed, february 18, 2015, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

analiseb

Add To Favorites

Follow

Total Points: 252

Total Questions: 96

Total Answers: 106

Location: Singapore

Member since Sat, Jul 25, 2020

4 Years ago

analiseb questions

1 Cypress Best Practice - Store and compare two values

Tue, Sep 28, 21, 00:00, 3 Years ago

1 Cannot set property '' of undefined angular

Tue, Oct 6, 20, 00:00, 4 Years ago

1 Refresh page on this.props.history.push with same url

Tue, Jun 30, 20, 00:00, 4 Years ago

1 VUE - data object is passed as a reference always or sometimes it is copied?

Fri, May 8, 20, 00:00, 4 Years ago

1 Can Javascript spread operator include undefined fields of an object?

Wed, Jan 16, 19, 00:00, 5 Years ago

View All

answered 9 Years ago freddiej · Accepted Answer

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/