How to Style WordPress File Upload Plugin

WordPress File Upload plugin is a powerful, yet easy to use plugin that enables visitors of a WordPress website to upload files from a front-end page (or post). It comes with more than 50 options that will satisfy the majority of users.

In terms of appearance, the plugin comes in a modular “boxed” structure. There are several elements, the filename, the select button, the upload button, the progress bar, captcha, etc, which can be positioned as boxes, one next to the other, above or below using the placements attribute. The following image shows an example using the Shortcode Composer of the plugin to generate the required shortcode:

The styling of each element of the plugin has been intentionally left to be minimum, so that it matches the styling rules of the website’s theme. The above plugin has been generated on a website with Avada theme. The same plugin with Bouquet theme looks like this:

The theme imposed borders and bottom margins to the elements of the plugin, making it not look nice. So, the question is how can someone style WordPress File Upload plugin?

The answer is very simple. Using CSS. Although this requires a basic knowledge of CSS, this is the best way to produce impressive results, especially with CSS3. After all, it is easy and fun to learn CSS.

The plugin has been designed in such a way that can be easily styled with CSS. Every element has its own class and most of them have their own id, so they can be selected either individually either in groups.

There are several ways to apply CSS styling to the plugin. Here are the most practical ones:

1. Put the plugin’s css code inside the theme’s Custom CSS section (found in most themes). If you have more than one pages with the plugin, they will all be affected.
2. Put the plugin’s css code inside the page by enclosing it in <style></style> tags. Only the page having the code will be affected.
3. Put the plugin’s css code inside the plugin’s shortcode by using the css attribute. This applies only for the Professional version of the plugin. The Shortcode Composer of the plugin can be used to generate the css attribute correctly.

So let’s try to make the plugin look nicer for Bouquet theme. A very helpful hint is to use the Developer tools that most browsers (Chrome, Firefox, IE, Safari) have, in order to do real-time css modifications. After some try outs and tests, this is a sample css code that generates good results:

table.file_table_clean, table.file_messageblock_table {
  margin: 0;
  border: none;
}
tr td.file_td_clean, table.file_messageblock_table tr td {
  padding: 0;
  border: none;
}
span.file_title_clean {
  font: initial;
  font-size: 20px;
  margin-bottom: 4px;
  display: inline-block;
  text-shadow: 1px 1px 0px #fff;
  color: #333
}
label.file_userdata_label {
  display: inline-block;
  color: #333;
}
input.file_userdata_message[type="text"], input.file_input_textbox[type="text"] {
  background: none repeat scroll 0% 0% #FAFAFA;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1) inset;
  border: 1px solid #E7D9B9;
  border-radius: 3px;
  color: #891E42;
  padding: 0.3em;
}
div.file_div_clean input[type="button"], div.file_div_clean input.file_input_submit[type="button"] {
  background-image: none;
  background-color: rgb(177, 69, 98);
  color: rgb(255, 244, 249);
  border: medium none;
  border-radius: 2px;
}
div.file_div_clean input.file_input_button_hover[type="button"], div.file_div_clean input.file_input_submit[type="button"]:hover, div.file_div_clean input.file_input_submit[type="button"]:focus {
  background-color: #90364E;
}
div.file_messageblock_header {
  background-color: rgb(255, 235, 242);
  border: 1px solid rgb(177, 69, 98);
  color: rgb(137, 30, 66);
}
table.file_messageblock_table div {
  padding: 8px;
}
td.file_messageblock_arrow_td div, td.file_messageblock_filearrow_td div {
  padding: 0;
}
div.file_messageblock_header, div.file_messageblock_fileheader {
  background-color: #FFD8E8 !important;
  border: medium none !important;
  color: rgb(137, 30, 66) !important;
}

The above css rules, combined with some modifications to the plugin’s shortcode:

[wordpress_file_upload placements="title/userdata/filename+selectbutton+uploadbutton/message" testmode="true" userdata="true" userdatalabel="My Name/My Email" widths="filename:170px, selectbutton:90px, uploadbutton:90px, userdata_label:100px, userdata_value:255px, message:368px" heights="selectbutton:34px, uploadbutton:34px"]

have the following result:

This image is definitely better than the first one and shows the power of css. So how do we put this css code inside our website? We will describe all three ways mentioned before.

1. Theme’s custom css area. Copy the above css code, go to Dashboard / Appearance / Editor and copy and paste it at the end of Style.css file.

2. Inside the page. Copy and paste the above css code at the top of the page where you have the plugin shortcode. Enclose it in <style></style> HTML tags.

3. Inside the plugin’s shortcode. This only works for the Professional version of the plugin. You need to convert the above css code in the form that is readable by the plugin. You can do that using the Shortcode Composer. The code to add in the plugin’s shortcode is the following:

css="table.file_table_clean, table.file_messageblock_table {%n%  margin: 0;%n%  border: none;%n%}%n%tr td.file_td_clean, table.file_messageblock_table tr td {%n%  padding: 0;%n%  border: none;%n%}%n%span.file_title_clean {%n%  font: initial;%n%  font-size: 20px;%n%  margin-bottom: 4px;%n%  display: inline-block;%n%  text-shadow: 1px 1px 0px #fff;%n%  color: #333%n%}%n%label.file_userdata_label {%n%  display: inline-block;%n%  color: #333;%n%}%n%input.file_userdata_message%brl%type=%dq%text%dq%%brr%, input.file_input_textbox%brl%type=%dq%text%dq%%brr% {%n%  background: none repeat scroll 0% 0% #FAFAFA;%n%  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1) inset;%n%  border: 1px solid #E7D9B9;%n%  border-radius: 3px;%n%  color: #891E42;%n%  padding: 0.3em;%n%}%n%div.file_div_clean input%brl%type=%dq%button%dq%%brr%, div.file_div_clean input.file_input_submit%brl%type=%dq%button%dq%%brr% {%n%  background-image: none;%n%  background-color: rgb(177, 69, 98);%n%  color: rgb(255, 244, 249);%n%  border: medium none;%n%  border-radius: 2px;%n%}%n%div.file_div_clean input.file_input_button_hover%brl%type=%dq%button%dq%%brr%, div.file_div_clean input.file_input_submit%brl%type=%dq%button%dq%%brr%:hover, div.file_div_clean input.file_input_submit%brl%type=%dq%button%dq%%brr%:focus {%n%  background-color: #90364E;%n%}%n%div.file_messageblock_header {%n%  background-color: rgb(255, 235, 242);%n%  border: 1px solid rgb(177, 69, 98);%n%  color: rgb(137, 30, 66);%n%}%n%table.file_messageblock_table div {%n%  padding: 8px;%n%}%n%td.file_messageblock_arrow_td div, td.file_messageblock_filearrow_td div {%n%  padding: 0;%n%}%n%div.file_messageblock_header, div.file_messageblock_fileheader {%n%  background-color: #FFD8E8 !important;%n%  border: medium none !important;%n%  color: rgb(137, 30, 66) !important;%n%}"