🔴 On2Air Forms has been shutdown to focus on our On2Air Backups Airtable app Learn more about automated Airtable backups - on2air.com
You can use these styling options to further style your fields in the Extra Options setting, such as the Submission and Linked Record buttons, Button Field, and On2Air Formula fields. You can choose options such as text color, text size, background color, alignment, and more.
Build a Dashboard using Airtable Data with On2Air Forms In this tutorial
- How to add Styles - On2Air Formula
- How to add Styles - Submit Button, Linked Record Button, and Other Field Types
- Typography
- Font Size
- Font Weight
- Font Style
- Text Color
- Text Align
- Text Decoration
- Text Transform (Case)
- Line Height
- List Style
- Background
- Background Color
- Border
- Border Radius
- Border Width
- Border Style
- Border Color
- Spacing
- Padding
- Margin
- Other
- Elevation (Shadow)
- Transition
- Animation
- Transform
- Interactivity
- See all Available Styling Options
How to add Styles - On2Air Formula
In the On2Air Formula field, add the style option class name for the style you want in the CSS Class Styling.
Class names are basic text and number classes. All you need to do is find the styles you want and type it in.
To add multiple styles, add a space between the class names.
In this example: bg-blue-300 adds a blue background, text-3xl sets the value size to 3xl, and text-center will center align the value.
How to add Styles - Submit Button, Linked Record Button, and Other Field Types
In other Field Types, open the Extra Options menu > View Advanced Options
Note: not all field types support custom options
- You’ll see a page similar to the one below
- Enter any CSS class name in the classes field
Typography
Font Size
Class
Font Weight
Font Style
font-italic
Text Color
Click the link below to see all available colors and their class
PrimeFlex
Defines the color of the text inside of an element. Classes Colors are derived from the Prime UI library theme being used via css properties. Examples text-500 text-cyan-500 text-orange-500 Pseudo States Focus, Hover and Active states are available with the focus:, hover:, active: prefixes respectively. hover:text-700 hover:text-cyan-700 hover:text-orange-700
www.primefaces.org
Text Align
Class |
text-center |
text-justify |
text-left |
text-right |
Text Decoration
Class |
underline |
line-through |
no-underline |
Text Transform (Case)
Class |
lowercase |
uppercase |
capitalize |
Line Height
List Style
Class |
list-none |
list-disc |
list-decimal |
Background
Background Color
To add a background color to your formula field, choose from the list of colors at the link below and enter the Class in the formula CSS Class Styling field.
Click the link below to see a full list of available colors
PrimeFlex
Choose from a variety of colors for the background of an element. Classes Colors are derived from the Prime UI library theme being used via css properties. bg-primary background-color: var(--primary-color); color: var(--primary-color-text); bg-primary-reverse background-color: var(--primary-color-text); color: var(--primary-color); Examples surface-500 bg-cyan-500 bg-orange-500 Pseudo States Focus, Hover and Active states are available with the focus:, hover:, active: prefixes respectively.
www.primefaces.org
Border
Border Radius
Border Width
Border Style
Border Color
To add a border color to your formula field, choose from the list of colors at the link below and enter the Class in the formula CSS Class Styling field.
Click the link below to see a full list of available colors
PrimeFlex
A wide range of color palettes for the border of an element.
www.primefaces.org
Spacing
Padding
Click below to see all available padding options
PrimeFlex
Specifies the space between the content and its border. Classes Single Side Padding Padding can be specified on a specific edge. pt-5 pr-8 pb-3 pl-6 Horizontal Padding Same padding value can be defined at the left and right sides with shorthand classes.
www.primefaces.org
Margin
Click below to see all available margin options
PrimeFlex
Controls the space around an element. Classes Single Side Margin Margin can be specified on a specific edge. mt-5 mr-8 mb-3 ml-6 Horizontal Margin Same margin value can be defined at the left and right sides with shorthand classes. Vertical Margin Same margin value can also be defined at the top and bottom sides with shorthand classes.
www.primefaces.org
Other
Elevation (Shadow)
Transition
PrimeFlex
Specifies the properties to apply transition. Classes transition-none transition-property: none; transition-all transition-property: all; transition-colors transition-property: background-color,border-color,color; transition-transform transition-property: transform; Examples Hover me
www.primefaces.org
Animation
PrimeFlex
fadein animation: fadein .15s linear; @keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } } fadeout animation: fadeout .15s linear; @keyframes fadeout { 0% { opacity: 1; } 100% { opacity: 0; } } slidedown animation: slidedown .45s ease-in-out; @keyframes slidedown { 0% { max-height: 0;
www.primefaces.org
Transform
PrimeFlex
Moves an element along the x and y axis. Classes Examples Responsive Responsive alternatives are available for customizations based on screen size. Add the responsive breakpoint keyword followed by a semi-colon as a prefix such as md:translate-x-0 to use a responsive class. sm: small screens e.g. phones md: medium screens e.g.
www.primefaces.org
Interactivity
www.primefaces.org
www.primefaces.org
See all Available Styling Options
PrimeFlex CSS