Support » Plugin: Drag and Drop Multiple File Upload - Contact Form 7 » Multiple Uploader Styling

  • Resolved lwhitecreative

    (@lwhitecreative)


    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!

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author Glen Mongaya

    (@glenwpcoder)

    @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 {
    
    }

    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 Mongaya

    (@glenwpcoder)

    @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 )

    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

    Thanks again!

    Plugin Author Glen Mongaya

    (@glenwpcoder)

    You’re adding the wrong p tag.

    It should be this p : https://imgur.com/TJeReQ2

    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

    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 Mongaya

    (@glenwpcoder)

    I see, please try this option.

    .codedropz-upload-wrapper {
      margin-bottom:-20px;
    }

    That fixed it! Thanks so much for your help.

    Plugin Author Glen Mongaya

    (@glenwpcoder)

    No problem @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

    Glen.

Viewing 9 replies - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.