Title: Multiple Uploader Styling
Last modified: June 19, 2020

---

# Multiple Uploader Styling

 *  Resolved [lwhitecreative](https://wordpress.org/support/users/lwhitecreative/)
 * (@lwhitecreative)
 * [5 years, 11 months ago](https://wordpress.org/support/topic/multiple-uploader-styling/)
 * I just installed this plugin for my website and it’s working great! The only 
   thing I’d like to do is change the CSS styling of the plugin so that it better
   matches my form. This includes everything noted below:
 * – the dashed line around the drag/drop area
    – “DRAG & DROP FILES HERE” text –“
   or Browse Files” text – “0/5” text – Loading area elements
 * Can you send me the CSS to do this? Many thanks!
    -  This topic was modified 5 years, 11 months ago by [lwhitecreative](https://wordpress.org/support/users/lwhitecreative/).
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fmultiple-uploader-styling%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 9 replies - 1 through 9 (of 9 total)

 *  Plugin Author [Glen Don Mongaya](https://wordpress.org/support/users/glenwpcoder/)
 * (@glenwpcoder)
 * [5 years, 11 months ago](https://wordpress.org/support/topic/multiple-uploader-styling/#post-13007017)
 * [@lwhitecreative](https://wordpress.org/support/users/lwhitecreative/) , check
   below:
 *     ```
       /* Drag & Drop Files Here */
       .codedropz-upload-inner h3 {
   
       }
   
       /* Or Text */
       .codedropz-upload-inner span {
   
       }
   
       /* Browse Files - Text */
       a.cd-upload-btn {
   
       }
   
       /* Counter */
       .dnd-upload-counter {
   
       }
       ```
   
 *  Thread Starter [lwhitecreative](https://wordpress.org/support/users/lwhitecreative/)
 * (@lwhitecreative)
 * [5 years, 11 months ago](https://wordpress.org/support/topic/multiple-uploader-styling/#post-13013890)
 * Perfect, thanks Glen! Is there also a way to change the loading area elements?
 * – file icon/color
    – file name font/color – file size font/color – progress bar
   color – progress percentage text
 * On a side note, I know this might be outside of your plugin, but do you have 
   any idea as to why there might be uneven padding between the Drag & Drop plugin
   and my budget/deadline text areas? I didn’t do anything differently so I’m not
   sure why the padding there looks almost doubled as compared to the rest of the
   form.
 *  Plugin Author [Glen Don Mongaya](https://wordpress.org/support/users/glenwpcoder/)
 * (@glenwpcoder)
 * [5 years, 11 months ago](https://wordpress.org/support/topic/multiple-uploader-styling/#post-13015330)
 * [@lwhitecreative](https://wordpress.org/support/users/lwhitecreative/) , here
   are all the elements you need to style.
 *     ```
       /* File Icon - Color */
       .dnd-upload-status .dnd-upload-image span{
       	color:#000;
       }
   
       /* File Name - Color */
       .dnd-upload-status .dnd-upload-details .name {
       	color:#016d98; /* Blue */
       }
   
       /* File Size - Color */
       .dnd-upload-status .dnd-upload-details .name em {
       	color:#016d98; /* gray */
       }
   
       /* Progress Bar - Background Color & Progress Percentage text color */
       .dnd-upload-status .dnd-upload-details .dnd-progress-bar span {
       	background-color:#4CAF50; /* Green progress bar */
       	color:#fff; /* White percentage text color */
       }
       ```
   
 * The uneven padding is because of class=”two_columns_50_50 clearfix” after p tag
   the main wrapper of uploader.
 * You need to add margin-bottom:0 on p tag.
    ( see here : [https://snipboard.io/Otpc7A.jpg](https://snipboard.io/Otpc7A.jpg))
 *  Thread Starter [lwhitecreative](https://wordpress.org/support/users/lwhitecreative/)
 * (@lwhitecreative)
 * [5 years, 11 months ago](https://wordpress.org/support/topic/multiple-uploader-styling/#post-13019740)
 * Thanks so much! That should be all the styling code I need, it looks great.
 * Thanks for answering my question about the weird gap. I tried adding the code
   to my contact form but I’m not sure if I did it correctly because nothing has
   changed. Can you let me know what I did wrong? Here is a screenshot: [https://snipboard.io/vm6Z45.jpg](https://snipboard.io/vm6Z45.jpg)
 * Thanks again!
 *  Plugin Author [Glen Don Mongaya](https://wordpress.org/support/users/glenwpcoder/)
 * (@glenwpcoder)
 * [5 years, 11 months ago](https://wordpress.org/support/topic/multiple-uploader-styling/#post-13019869)
 * You’re adding the wrong p tag.
 * It should be this p : [https://imgur.com/TJeReQ2](https://imgur.com/TJeReQ2)
 *  Thread Starter [lwhitecreative](https://wordpress.org/support/users/lwhitecreative/)
 * (@lwhitecreative)
 * [5 years, 11 months ago](https://wordpress.org/support/topic/multiple-uploader-styling/#post-13020489)
 * Ahhh, that makes sense. Thanks!
 * I moved the code to it’s proper place, and while it’s closed up the gap a touch,
   it’s still not quite the same as the rest of the form: [https://snipboard.io/3VlRm9.jpg](https://snipboard.io/3VlRm9.jpg)
 * Is there anything else I should do to fix it? Luckily the gap doesn’t bother 
   me too much, so if not, it should be okay.
 *  Plugin Author [Glen Don Mongaya](https://wordpress.org/support/users/glenwpcoder/)
 * (@glenwpcoder)
 * [5 years, 11 months ago](https://wordpress.org/support/topic/multiple-uploader-styling/#post-13022006)
 * I see, please try this option.
 *     ```
       .codedropz-upload-wrapper {
         margin-bottom:-20px;
       }
       ```
   
 *  Thread Starter [lwhitecreative](https://wordpress.org/support/users/lwhitecreative/)
 * (@lwhitecreative)
 * [5 years, 11 months ago](https://wordpress.org/support/topic/multiple-uploader-styling/#post-13026545)
 * That fixed it! Thanks so much for your help.
 *  Plugin Author [Glen Don Mongaya](https://wordpress.org/support/users/glenwpcoder/)
 * (@glenwpcoder)
 * [5 years, 11 months ago](https://wordpress.org/support/topic/multiple-uploader-styling/#post-13027023)
 * No problem [@lwhitecreative](https://wordpress.org/support/users/lwhitecreative/),
 * If you happy with this plugin & my assitance feel free to leave a review here–
   [https://wordpress.org/support/plugin/drag-and-drop-multiple-file-upload-contact-form-7/reviews/#new-post](https://wordpress.org/support/plugin/drag-and-drop-multiple-file-upload-contact-form-7/reviews/#new-post)
 * Glen.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Multiple Uploader Styling’ is closed to new replies.

 * ![](https://ps.w.org/drag-and-drop-multiple-file-upload-contact-form-7/assets/
   icon-128x128.jpg?rev=1984850)
 * [Drag and Drop Multiple File Upload for Contact Form 7](https://wordpress.org/plugins/drag-and-drop-multiple-file-upload-contact-form-7/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/drag-and-drop-multiple-file-upload-contact-form-7/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/drag-and-drop-multiple-file-upload-contact-form-7/)
 * [Active Topics](https://wordpress.org/support/plugin/drag-and-drop-multiple-file-upload-contact-form-7/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/drag-and-drop-multiple-file-upload-contact-form-7/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/drag-and-drop-multiple-file-upload-contact-form-7/reviews/)

 * 9 replies
 * 2 participants
 * Last reply from: [Glen Don Mongaya](https://wordpress.org/support/users/glenwpcoder/)
 * Last activity: [5 years, 11 months ago](https://wordpress.org/support/topic/multiple-uploader-styling/#post-13027023)
 * Status: resolved