Toggle to Enable or Disable Custom CSS

You can control whether your app’s custom CSS files are loaded using a simple toggle in Settings: API & Code: CSS

How it works

Off by default for all new apps
When disabled, custom CSS will not load in the Live App
Great for troubleshooting - you can quickly check if an issue is caused by your custom code or the platform
To edit code, the toggle must be enabled

To use:

Go to App Settings: API & Code in the Builder
Go to CSS
Turn the toggle on to enable custom code or off to disable it

📝
The toggle must be enabled to edit CSS

Switching Between Light and Dark Mode in the Code Editor

The Code Editor includes an option to switch between light and dark themes.

Why use dark mode?

Reduces eye strain during long work sessions.
Improves readability in low-light environments.

To switch themes:

Open the Code Editor
Locate the Theme selector in the editor toolbar
Choose Light or Dark mode based on your preference

Key Features of Next-Gen CSS

Semantic HTML: Uses proper HTML5 elements like <main>, <nav>, <section>, and <header> for good structure and accessibility.

Consistent CSS Classes: All classes use the kn- prefix with descriptive, logical names that make targeting elements intuitive.

Better Maintainability: The structured approach makes it easier to maintain and update your customizations over time.

Your First Customization

Here's a simple example to get you started. Note that these examples use higher specificity patterns to ensure they override Knack's default styles:

/* Change the main navigation background */
.kn-page .kn-main-nav {
  background-color: #007bff;
}

/* Style all action buttons */
.kn-page .kn-action-button {
  background-color: #28a745;
  border-radius: 6px;
  padding: 0.75rem 1.5rem;
}

/* Customize a specific page */
#scene_123 {
  background-color: #f8f9fa;
  max-width: 1200px;
  margin: 0 auto;
}

Key Concepts

Scene and View Classes: Knack automatically adds IDs like #scene_123 #view_456to target specific pages and views.

Specificity Matters: Since Knack's CSS loads first, you need to use higher specificity selectors to override defaults. See the Implementation Guide for detailed override techniques.

Semantic Targeting: Use the semantic HTML structure to create more maintainable selectors.

Quick Tips

Always use higher specificity patterns (like .kn-page .kn-action-button) for reliable overrides
Use scene/view classes for specific customizations
Test your changes across different screen sizes
Use browser developer tools to inspect and debug
Start with small changes and build up incrementally

CSS Classes Reference

Application Structure

CSS Class	HTML Element	Purpose
`kn-app`	`<body>`	Root application container
`kn-header`	`<header>`	Main application header
`kn-header-mobile`	`<header>`	Mobile-specific header
`kn-page-container`	`<div>`	Page content wrapper
`kn-page`	`<main>`	Main page content area
`kn-page-section`	`<section>`	Page content sections
`kn-page-section-column`	`<div>`	Section columns

Navigation Elements

CSS Class	HTML Element	Purpose
`kn-main-nav`	`<nav>`	Primary navigation menu
`kn-main-nav-container`	`<div>`	Navigation wrapper
`kn-main-nav-vertical-container`	`<div>`	Vertical navigation container
`kn-main-nav-mobile-container`	`<div>`	Mobile navigation wrapper
`kn-main-nav-mobile`	`<div>`	Mobile navigation menu
`kn-main-nav-item`	`<button>`	Navigation menu items
`kn-main-nav-item-group`	`<div>`	Navigation item groups
`kn-main-nav-toggle`	`<button>`	Mobile hamburger menu toggle
`kn-main-nav-profile-trigger`	`<button>`	User profile menu trigger
`kn-main-nav-profile-content`	`<div>`	User profile menu content
`kn-brand`	`<div>`	Application branding area

Page Elements

CSS Class	HTML Element	Purpose
`kn-page-title`	`<h1>`	Main page heading
`kn-breadcrumbs`	`<div>`	Navigation breadcrumbs
`kn-page-error`	`<div>`	Page error containers
`kn-error-banner`	`<div>`	Error notifications
`kn-page-not-found`	`<main>`	404 error pages

Views and Content

CSS Class	HTML Element	Purpose
`kn-view`	`<div>`	Base view container
`kn-view-header`	`<div>`	View title and header
`kn-view-toolbar`	`<div>`	View action buttons
`kn-form-view`	`<form>`	Form containers
`kn-form-view-single-column-wrapper`	`<div>`	Single-column form layout
`kn-form-view-column`	`<div>`	Form columns
`kn-list-view`	`<div>`	List view containers
`kn-list-view-column`	`<div>`	List view columns
`kn-details-view`	`<div>`	Detail view containers
`kn-details-view-column`	`<div>`	Detail view columns
`kn-rich-text-view`	`<div>`	Rich text content areas
`kn-search-view`	`<div>`	Search interface containers
`kn-menu-view`	`<div>`	Link group/menu containers
`kn-card`	`<div>`	Main card container wrapper

Table Elements

CSS Class	HTML Element	Purpose
`kn-table-view`	`<table>`	Main table element
`kn-table-view-wrapper`	`<div>`	Table wrapper for responsive behavior
`kn-table-view-container`	`<div>`	Table container for styling

Chart Elements

CSS Class	HTML Element	Purpose
`kn-chart-view-header`	`<div>`	Chart headers and titles
`kn-pie-chart-view`	`<div>`	Pie chart containers
`kn-area-chart-view`	`<div>`	Area chart containers
`kn-line-chart-view`	`<div>`	Line chart containers
`kn-bar-chart-view`	`<div>`	Bar chart containers
`kn-bar-horizontal-chart-view`	`<div>`	Horizontal bar chart containers
`kn-report-view`	`<div>`	Report view containers

Map Elements

CSS Class	HTML Element	Purpose
`kn-map-view`	`<div>`	Map view containers
`kn-map-view-search`	`<form>`	Map search interface
`kn-map-view-results`	`<div>`	Map search results
`kn-map-view-results-list`	`<div>`	Map results list
`kn-map-view-results-render`	`<div>`	Map results rendering

Interactive Elements

CSS Class	HTML Element	Purpose
`kn-action-button`	`<button>` or `<a>`	Interactive buttons and links
`kn-calendar-view`	`<div>`	Calendar view containers

CSS Class Naming Convention

Understanding the naming convention helps you predict class names and write more maintainable CSS:

Prefix System

All Next-Gen classes use the kn- prefix to create a clear namespace and avoid conflicts.

Descriptive Names

Class names clearly describe the element's function:

kn-page-title - The main page heading
kn-form-view - Form containers
kn-main-nav-item - Navigation menu items

Hierarchical Structure

Related elements use consistent naming patterns:

kn-main-nav - The navigation container
kn-main-nav-item - Individual navigation items
kn-main-nav-toggle - Navigation toggle button

Semantic Clarity

Names correspond to the element's meaning rather than appearance, making styles more maintainable as designs evolve.

Note: The examples in this guide are illustrative. Actual class names, HTML structure, and element relationships may vary in your specific Knack application. Always use developer tools to inspect your actual application structure.

Quick Examples

Style All Forms

.kn-page .kn-form-view {
  background: #ffffff;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

Customize Navigation

.kn-page .kn-main-nav {
  background-color: #2c3e50;
}

.kn-page .kn-main-nav-item {
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
}

.kn-page .kn-main-nav-item:hover {
  background-color: #34495e;
}

Target a Specific Page

#scene_123.kn-page {
  background-color: #f8f9fa;
  max-width: 1000px;
  margin: 0 auto;
}

Style Action Buttons

.kn-page .kn-action-button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.kn-page .kn-action-button:hover {
  background-color: #0056b3;
  transform: translateY(-1px);
}

Style Different View Types

/* Style list views */
.kn-page .kn-list-view {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Style detail views */
.kn-page .kn-details-view {
  padding: 2rem;
  background: #f8f9fa;
}

/* Style chart views */
.kn-page .kn-pie-chart-view {
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
}

Desktop & Mobile Design Example

/* Desktop styles */
.kn-main-nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.kn-main-nav-toggle {
  display: none;
}

/* Mobile styles */
@media (max-width: 768px) {
  .kn-main-nav-container {
    display: none;
  }
  
  .kn-header-mobile .kn-main-nav-toggle {
    display: block;
    background: transparent;
    border: 2px solid #007bff;
    color: #007bff;
    padding: 0.5rem;
    border-radius: 4px;
  }
  
  .kn-header-mobile .kn-main-nav-toggle:hover {
    background-color: #007bff;
    color: white;
  }
}

Next Steps

Ready to implement more advanced customizations? Check out the CSS Implementation Guide for:

CSS override techniques and specificity strategies
Detailed HTML structure explanations
Advanced styling examples and techniques
Troubleshooting common issues
Best practices for maintainable code

Need Help?

Browser Inspector: Use F12 to inspect elements and see which classes are applied
CSS Specificity: If styles aren't applying, you may need higher specificity
Testing: Always test across different devices and screen sizes

❗️
The Knack Support team is unable to test, troubleshoot, or write code for you

🚧
Custom code added in the code editor will be stored within Knack’s internal servers, and available via CDN, rather than directly in the app’s schema. Do not include sensitive keys or IDs in custom code.

If you require access to your code outside of the builder or live app, you’ll be able to access it through the CDN:

https://appcdn.cloud-database.co/\<your_application_id>/custom/v4/main.cs