Iptanus File Upload Material UI Theme

Version 4.21.5 of Iptanus File Upload introduced a new look for the upload form, based on the Material UI theme.

Material UI is a React implementation of Google’s Material Design, and the new form elements are built entirely in React and JSX.

Switching it on

Material UI is off to begin with. To switch it on, open the shortcode composer for the upload form, go to the Themes tab and turn on Enable Material UI.

Press Update, and the form takes on the new appearance.

Making it fit your site

Material UI is a design in its own right, with its own fonts, colours, shapes and effects. It follows its own rules rather than your WordPress theme’s — which is the point of it, but does mean it can look like a visitor from elsewhere.

The plugin therefore offers a handful of customisation options, enough to settle it into almost any theme.

Colours

Three colours can be set: primary, text and error.

• The primary colour fills the buttons and marks anything active: the border of a focused component, checked radio buttons and checkboxes, the day, month and year buttons of a date picker, and the selected item in a drop-down.
• The text colour is used for the text of every component except the buttons, whose text colour is worked out from the primary colour. It also draws the border of a hovered — but not focused — component.
• The error colour is used for the text and border of a component in error, such as a required field left empty when the visitor pressed Upload.

Here is the form with a purple primary colour, rgb(222, 90, 226):

The same form with a green text colour, rgb(49, 160, 59):

And the error messages with an orange error colour, rgb(247, 172, 22):

The text on the buttons adjusts itself to whatever primary colour you choose, so that the contrast stays high: a bright primary colour gets dark button text.

Dark mode

Material UI as it comes suits a site with a white or otherwise light background, and looks wrong on a dark one. The Dark Mode option reverses the luminosity of the components so that they keep their contrast against a dark background.

Here is the form in a dark WordPress theme with Dark Mode on:

That was produced with the default primary, text and error colours.

Going further with CSS

Anything else — the font, the spacing, the borders, the styling of one particular component — is a matter of CSS. Here is the same form in a cursive font:

produced by putting this in the Custom CSS area of the form’s shortcode composer:

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

Font size

Every Material UI component sizes its text as a ratio of the font size of the root (html) element. That is normally 16px, but some WordPress themes change it.

So that the form looks the same either way, the plugin adjusts the ratio to make the components behave as though the root were always 16px. You can take that over yourself with the advanced option Material UI HTML Font Size, under Dashboard → Settings → Iptanus File Upload → Advanced. It takes three kinds of value:

• ‘adjust’ — the default. The plugin adjusts the ratio as described above.
• ‘initial’ — no adjustment at all. If your theme changes the root font size, the components scale with it.
• a number — the components are scaled by (root font size) ÷ (your number). The larger the number, the smaller the text.

Here is the form with the value set to 20, on a theme that leaves the root font size alone:

Everything is smaller, shrunk by 16/20 — that is, to 80 per cent.

For more information or technical support, please contact us.

The Iptanus team