How can I change the color of an element in my app?

Native Options in the Builder

There are options for changing the colors of different elements within your app.

Live App

You can change the colors of the header, page menu, submit buttons, and links in your app: Live App Design - Custom Colors.

Grid Fields

You can dynamically change the color of the background or text of a field on a grid to highlight data using display rules: Grid Display Rules.

Calendar Events

You can change the color of events on a calendar based on specified criteria: Calendar - Event Colors.

Map Pins

You can change the color of the pins on a map based on specified criteria: Map Settings - Pin Colors.

Custom Code Changes

To change the color of an element that isn't available through our native options in the builder, you will need to use custom CSS.

There are a few places you can get help with writing custom code for your app:

  • Our Developer Documentation has some common examples that you can tweak and copy/paste into your apps.

  • You can post a question to our Community for help from other Knack users and experts.

  • For bigger projects, you can submit details on what you want customized to our Expert Network, where Knack-vetted experts can help you with your project.

Note: The Knack support team can only assist with design elements that are native options in the Builder. It is outside our scope of support to write or troubleshoot custom code.