Styling

The importOK wizard is designed to be easily customizable to match the look and feel of your app. This page provides a list of selectors and classes that you can use to style the wizard.

To do this you will need to pass your own CSS rules to the wizard, using the style property. Here is an example that changes the color of the wizard title to blue and making it bold.

1{
2  style: `
3    .title {
4      color: blue;
5      font-weight: bold;
6    }
7  `
8}

#Primary Color and Border Radius

A common requirement is to change the primary color used in buttons and links, and to adjust the border radius for buttons and other components. If this is what you are after, we have prepared some examples that you can copy and adjust to your branding.

#Change Primary Color to Sky Blue

 1{
 2  style: `
 3    .button-primary {
 4      background-color: #0ea5e9;
 5    }
 6    .button-primary:hover {
 7      background-color: #0369a1;
 8    }
 9    .button-link {
10      color: #0ea5e9;
11    }
12    .button-link:hover {
13      color: #0369a1;
14    }
15    .progress-percentage {
16      color: #0ea5e9;
17    }
18  `
19}

#Remove rounded corners

 1{
 2  style: `
 3    .button-primary,
 4    .dropzone,
 5    .dropzone-extension
 6    {
 7      border-radius: 0;
 8    }
 9  `
10}

#Reference

#General selectors

#Upload screen (Wizard step #1)

#Mapping screen (Wizard step #2)

#Editor screen (Wizard step #3)

#Push screen (Wizard step #4)