Applies to: Core, Advanced, Enterprise
Buttons, inputs, and borders are styled using a combination of your selected layout, colour palette, and typography settings.
You do not need to edit CSS for normal button and input styling.
Button styling #
Quote & Cut buttons use your selected accent colours and button typography.
Important buttons usually use the Primary Accent colour.
Secondary actions may use the Secondary Accent colour or a more neutral style, depending on the selected layout.
Common frontend buttons include:
- Calculate Price.
- Add Another Part.
- Add to Cart.
- Apply to All.
- Remove Part.
- Change DXF.
- Preview.
Input styling #
Form inputs and dropdowns use your selected typography and palette.
Common inputs include:
- DXF file upload fields.
- Material dropdowns.
- Quantity fields.
- Secondary Process fields, if Advanced is enabled.
Border styling #
Borders and dividers use the Border Colour setting from the Plugin Colour Palette.
This affects areas such as:
- Cards.
- Panels.
- Inputs.
- Dividers.
- Upload areas.
- Part rows.
Settings that affect buttons #
The main style settings that affect buttons are:
- Primary Accent.
- Secondary Accent.
- Buttons & actions font.
- Border Colour.
- Danger Colour.
- Success Colour.
Settings that affect inputs #
The main style settings that affect inputs are:
- Inputs & selects font.
- Card Background.
- Border Colour.
- Primary Text.
- Secondary Text.
- Background.
Settings that affect error states #
The main style settings that affect error states are:
- Danger Colour.
- Primary Text.
- Secondary Text.
- Border Colour.
Settings that affect success states #
The main style settings that affect success states are:
- Success Colour.
- Primary Accent.
- Primary Text.
- Secondary Text.
Testing buttons and inputs #
After changing styles, test the form by:
- Uploading a DXF file.
- Choosing a material.
- Changing quantity.
- Using Apply to All.
- Calculating a price.
- Adding the quote to the cart.
- Triggering a validation message by leaving a required field empty.
This helps you check normal, success, and error states.
If buttons or inputs look wrong #
If buttons or inputs do not look how you expect:
- Check the selected form layout.
- Check your Primary Accent and Secondary Accent colours.
- Check the Border Colour.
- Check the typography fields.
- Check whether your theme is overriding form styles.
- Check whether custom CSS has been added elsewhere.
If you need more precise control, use the Advanced Custom CSS article.
Continue to: Cards, Upload Areas and Previews.
