Creating a custom Uniform theme

This documentation page is for Quform version 1 and may not be applicable for Quform 2 click here to visit the documentation for Quform 2.

Step 1

Pick a unique name for the theme, something other than agent, aristo or default. It should not contain spaces. In this guide we will create a theme named kiwi, so replace any occurrence of this in the steps below with your own unique theme name.

Step 2

Create the folder iphorm-form-builder/js/uniform/themes/kiwi/

Step 3

Name the custom CSS file kiwi.css and place it into the folder created in Step 2, this is the file to add your Uniform theme CSS.

Step 4

At the top of the kiwi.css file, add the text below. This will make the theme detectable by Quform:

/*

Uniform Theme: Kiwi
Version: 1.0
By: Your Name

*/

You will now be able to choose this theme in Form Builder → Settings → Style → Uniform

Step 5

If you plan on using any other Uniform theme on any of the other forms on your site then you MUST prefix each selector in the kiwi.css file with .iphorm-uniform-theme-kiwi (see the other Uniform theme CSS files for examples of this). This step means that styles between different Uniform themes do not interfere with each other.

Notes

The new theme you create will be automatically backed up and restored when automatically updating the plugin, you should keep a backup just in case. If you update the plugin manually you should back up the new theme folder before deleting the plugin folder.

Be inspired. © 2018 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy