In a previous article we explained how we can use CSS to style WordPress File Upload plugin, so that it fits colors and fonts of the active theme.
By default, the plugin styles its HTML elements to have the same look among all themes. To do that, it uses ‘strict’ CSS styling, meaning that it applies many CSS rules on the elements, so that they replace the default ones imposed by the theme.
However, when someone wants to style the plugin to match the theme’s colors and fonts, it is sometimes very hard because many CSS rules must be applied, in order to replace the plugin’s ones. The first picture below shows how the plugin looks like by default with a coloful theme, such as Dine With Me, while the second picture shows how we want it to be:
In order to do it as we want, we need to put the following CSS rules inside the theme’s Custom CSS area or inside the plugin’s shortcode:
span.file_title_clean {
color: #513a2d;
}
input[type="text"].file_userdata_message, input[type="text"].file_userdata_message_required {
background-color: #E3BBA5;
box-shadow: 0 0 2px black inset;
margin: 0;
padding: 6px 8px;
border-width: 0;
}
.file_userdata_label {
color: #513a2d;
line-height: 1.5em;
}
input[type="text"].file_input_textbox {
background-color: #E3BBA5;
opacity: .9;
border-width: 0;
box-shadow: 0 0 2px black inset;
padding: 6px 8px;
}
form.file_input_uploadform input[type="button"].file_input_button, form.file_input_uploadform input[type="button"].file_input_button_hover, input[type="button"].file_input_submit, input[type="button"].file_input_submit:hover, input[type="button"].file_input_submit:disabled, input[type="button"].file_input_submit:focus {
padding: 4px 10px;
background-color: #140a08;
color-stop(0%, #3c1f17), color-stop(100%, #140a08));
background-image: -webkit-linear-gradient(top, #3c1f17, #140a08);
background-image: -moz-linear-gradient(top, #3c1f17, #140a08);
background-image: -o-linear-gradient(top, #3c1f17, #140a08);
background-image: linear-gradient(top, #3c1f17, #140a08);
border: 0;
color: #e3bba5;
border-radius: 5px;
}
Since version 3.2.0 the plugin provides an option to ‘relax’ the CSS rules it applies to its elements. This option is in the plugin’s Settings in the Dashboard. It applies minimum styling on the buttons and text boxes, so that it does not replace default theme’s styles. If we enable it, then the plugin will look like this (without adding any custom CSS rules):
It almost like we want it to be. The plugin has inherited the colors and styles of the theme. Only one single CSS rule is required to make it exactly as we want:
form.file_input_uploadform {
margin: 0;
}
As a conclusion, if you want to style the plugin to look better with your theme, it is better to enable the ‘Relax CSS’ option.
For any questions, please do not hesitate to contact us.
The Iptanus Team
Pingback: 4-Aug-2015: Version 3.2.0 of WordPress File Upload Plugin Released - Iptanus
hello – i am trying to add an effect on hover for the form buttons but cannot seem to get it to work.
form.file_input_uploadform input[type=”button”].file_input_button_hover,
input[type=”button”].file_input_submit:hover {
background-color: #777777!important;
border: 0;
color: #222222;
border-radius: 0px;
font-family: inherit;
font-size: 120%;
}
can you please suggest how i can get this to work.
thank you.
Mark
Hello,
I’m setting up a website for a client and using your plugin, which is working great!
However, I can’t see the “Relax CSS” option anywhere within the plugin options. Could you let me know where to find it or direct me towards a screenshot?
I’m using version 3.4.1.
Thanks,
Ed
As it is now, the fields and buttons are all placed too close so they look crowded. Is there a way to insert an extra blank line in between them?
i.e. currently all the elements are placed very tight (crowded)
upload your files [select files]
select subfolder [select dir]
your email address
captcha box
I would like them to be like this (with a blank line in between) – how to do this?
upload your files [select files]
select subfolder [select dir]
your email address
captcha box
Thanks!
when i install your plugin my style go in error and my site become unformatted, my slideshow become little little
how can i disable interference css your plugin with my theme ?
i have used “Relax CSS” but with none effect..
thanks
I installed the pro version and have edited or added some custom css, however I can not figure out how to change the css for an additional user field that is multitext. Simple text fields are changing colors and size, etc. But nothing I have tried can change a multitext field.
Hi, please send me the URL of the page so that I can have a look myself and propose some css.
Regards
Nickolas
heya, loving the plugin but I have a couple of questions… the text field are super squashed so much that they hide the information fields. How can I stretch them so that you can actually see name, email address etc… Thanks so much
question 2) for the email notification section… what is the standard email address to be sent from? I’ve tried to search this and not waste your time but I still really don’t understand. Thanks!!
Hi, there is a Dimensions tab in the visual editor of the plugin, where you can define width and height of plugin’s elements.
Regarding email notifications, the standard email is the one defined in Dashboard/Settings/Writing. You can change it by adding ‘From’ headers in Notification Headers using the visual editor.
Regards
Nickolas