Common CSS Customization Examples

🚧
COMING SOON! We're putting the finishing touches on this feature

Page and Layout

Change page background color

.kn-page {
  background-color: #f8f9fa;
}

Set maximum width for a specific page

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

Style page titles

.kn-page-title {
  color: #2c3e50;
  text-align: center;
  font-size: 2rem;
}

Navigation

Change navigation background

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

Style navigation items

.kn-main-nav-item {
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

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

Customize the brand/logo area

.kn-brand {
  font-size: 1.5rem;
  font-weight: bold;
  color: #e74c3c;
}

Buttons

Style all action buttons

.kn-action-button {
  background-color: #3498db;
  color: white;
  padding: 12px 24px;
  border-radius: 6px;
  border: none;
}

.kn-action-button:hover {
  background-color: #2980b9;
}

Style buttons on a specific page

.scene_456 .kn-action-button {
  background-color: #e74c3c;
  font-weight: bold;
}

Tables

Change table width

.kn-table-view {
  width: 100%;
  max-width: 800px;
}

Style table on specific page

.scene_789 .kn-table-view {
  border: 2px solid #3498db;
  border-radius: 8px;
}

Add spacing around tables

.kn-table-view-wrapper {
  margin: 20px 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

Forms

Style form containers

.kn-form-view {
  background-color: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

Customize a specific form

.scene_234_view_567.kn-form-view {
  max-width: 600px;
  margin: 0 auto;
  background-color: #ecf0f1;
}

Style form columns

.kn-form-view-column {
  margin-bottom: 20px;
  padding: 15px;
}

Views and Data Display

Style list views

.kn-list-view {
  background-color: white;
  border: 1px solid #bdc3c7;
  border-radius: 5px;
}

Customize detail views

.kn-details-view {
  padding: 25px;
  background-color: #f8f9fa;
  border-left: 4px solid #3498db;
}

Style a specific view

.scene_345_view_678.kn-list-view {
  background-color: #fff3cd;
  border: 2px solid #ffc107;
}

Charts

Style pie charts

.kn-pie-chart-view {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

Customize chart headers

.kn-chart-view-header {
  font-size: 1.25rem;
  color: #2c3e50;
  text-align: center;
  margin-bottom: 15px;
}

Style bar charts differently

.kn-bar-chart-view {
  border: 2px solid #27ae60;
  background-color: #d5f4e6;
}

Error Messages

Style error banners

.kn-error-banner {
  background-color: #f8d7da;
  color: #721c24;
  padding: 15px;
  border-radius: 5px;
  border-left: 4px solid #dc3545;
}

Customize page errors

.kn-page-error {
  text-align: center;
  padding: 40px;
  background-color: #fff3cd;
  border-radius: 8px;
}

Mobile Responsive

Hide elements on mobile

@media (max-width: 768px) {
  .kn-main-nav-container {
    display: none;
  }
  
  .kn-header-mobile {
    display: block;
  }
}

Style mobile navigation toggle

.kn-main-nav-toggle {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 4px;
}

Specific Page Targeting

Target multiple pages

.scene_111.kn-page,
.scene_222.kn-page,
.scene_333.kn-page {
  background-color: #e8f4fd;
}

Target specific view on specific page

.scene_444_view_555.kn-form-view {
  border: 3px solid #e74c3c;
  background-color: #fdf2f2;
}

Quick Tips

Replace scene_123 with your actual page number
Replace view_456 with your actual view number
Use browser developer tools to find your specific scene and view numbers
Test changes on different screen sizes
Start with small changes and build up gradually

Remember: Always use higher specificity (like .kn-page .kn-action-button) if your styles aren't applying correctly.