Wordpress File Upload Material UI Theme

Version 4.21.5 of WordPress File Upload introduced a new design of the upload form based on Material UI theme.

Material UI is a React implementation of Google’s Material Design and the new elements of the upload form have been entirely created with the latest version of React and JSX.

Activation

Material UI is by default deactivated.

In order to activate it open the visual editor of the upload form, go to the new Themes tab and switch on Enable Material UI option.

Then press Update button. The upload form will obtain an entirely new look.

Options

Please note that Material UI is a design. It makes an aesthetically modern and ergonomic use of fonts, colors, shapes and effects for all of its components.

As a result, it does not follow the design, fonts and colors of the WordPress theme, it is independent.

However, it is customizable. To keep it simple, the plugin provides some basic customization options that will make it fit any WordPress theme design.

Colors

The plugin provides 3 customizable Material UI colors, the primary, text and error one.

The primary color is used to draw the buttons background, the border color of focused components, the color of checked radio and check buttons, day-month-year picker buttons and selected dropdown items.
The text color is used as the color of the text of all components, except buttons (the button text color is calculated automatically based on the primary color). It is also used to draw the border of hovered (but not focused) components.
The error color is used as the color of the text and border of components which have an error (e.g. they are required but the user pressed the Upload button without filling them).

Here is how an upload form looks like when applying a purple primary color with value rgb(222,90,226):

Here is how the same upload form looks like when applying a green text color with value rgb(49, 160, 59):

Here is how the error messages look like when applying an orange error color with value rgb(247,172,22):

The button text color adjusts automatically based on the primary color in order to keep a high contrast. So if the primary color is bright, the button text color will be dark. Here is an example:

Dark Mode

The basic Material UI theme fits well in websites where the background is white, or another bright color.

However it doesn’t look good in dark websites with a black or dark background.

The plugin provides a Dark Mode option, which turns the Material UI into dark mode.

In this mode Material UI reverses the luminosity of its components automatically, in order to keep a good contrast with the background.

Here is how the upload form looks like in a dark WordPress theme when Dark Mode option is activated:

Note that the above result was generated using the default primary, text and error colors.

Advanced Styling

Of course it is possible to further customize the Material UI theme (change font, spacing, borders, style of a specific component, etc.) using CSS.

Here is the same form with Cursive font:

The above result was produced by putting the following CSS in Custom CSS area of the form’s visual editor:

.r_wfu_container * {
    font-family: cursive !important;
}

‘adjust’: This is the default value. The plugin automatically adjusts the ratio as mentioned above.
‘initial’: The plugin makes no adjustment. If the WordPress theme changes the font size of the root element, the font size of the Material UI components will also change proportionally.
a number value: The font size of the Material UI components will be enlarged or shrunk based on the ratio (font size of the root element) / (value). So, the larger the value of the option, the smaller the components’ font size will become.

Here is an example of how the upload form looks like when setting a value of 20 (using a WordPress theme that does not change the font size of the root element):

Notice that the text of all the upload form components is smaller. They have been shrunk by a ratio of 16/20 or 80%.

For additional information or technical support, do not hesitate to contact us.

The Iptanus Team

WordPress File Upload Material UI Theme