Custom Styling in Flatfile Portal

When you use Flatfile, you're leveraging Flatfile to be a part of your existing application. Since Flatfile will be an extension of your application, we have created a way for you to align Flatfile's UI with your own. From the color of the text or buttons to the border radius or the wrapper and buttons, we want this to look and feel like your application and align with your company's branding guidelines.

One thing that you might notice is the pre-defined styling keys that are available. While we want this to look and feel like an extension of your own application, having complete control of the CSS is too brittle and causes too many issues with the data mapping. We simply can't account for all of the variances. What we have done, though, is give you an even easier way to style the Flatfile wrapper into your app.

Are you needing more control and don't see the option you need? Please let us know, and we might be able to work with you on getting that feature added or move you to an Enterprise plan.

styleOverrides:

This section shows the various

styleOverrides
keys and what they control. Within each heading for the key is the default value. If the default for any particular styleOverride key is what you want to use, then you can leave that key out all together.

  • Colors can take hex, rgb or rgba values <br/> Sizes can use px, em, rem, % or pt <br/> * Use web-safe fonts with at least one fallback (More fonts coming soon)

borderRadius: "4px"

The borderRadius key controls the border radius of the Flatfile wrapper and also the border radius of most buttons. See the below arrows for some more specific visuals.

border radiusborder radius

primaryButtonColor: "#4a90e2"

The primaryButtonColor key controls only the color of the Primary Buttons on the page. Examples of exactly which buttons are considered primary are pictured.

primary button colorprimary button color

primaryTextColor: "#50535b"

The primaryTextColor key controls the primary text for the page including some headings, table elements and some button text colors. Highlighted below is the exact text that is controlled by this key.

primary text colorprimary text color

secondaryTextColor: "#9daab6"

The secondaryTextColor key controls the color of the secondary text on file selection page. Highlighted below is the text that is controlled by this key.

secondary text color

errorColor: "#d0011b"

The errorColor key controls the text color, background color and icon color of the required fields icon and the data review sections of the importer. Below is a visual for these specific elements.

error colorerror color

successColor: "#60b700"

The successColor key controls the color of the required fields icons, the check mark icons, the color of certain text that is associated with those icons and some of the buttons associated with successful data mapping. Highlighted below are all the elements that are controlled by this key.

success colorsuccess color

warningColor: "#f6a623"

The warningColor key controls the color of a couple of different icons associated with warnings with the data importing. See below for the examples of these icons.

warning colorwarning color

borderColor: "#e8e8e8"

The borderColor key controls the border color of the Flatfile wrapper and the color of a few secondary buttons. See below for some examples.

border color

linkColor: "#c6d1dd" & linkAltColor:"#4a90e2"

The linkColor and linkAltColor control all of the links that might be built into your data mapping. These linkColor key controls the color of the links. The linkAltColor controls the color of the :hover, :active and :focus states of your links.

Want to play around with the styleOverrides?
We've got a CodeSandbox just for that.