Common CSS Customization Examples

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);
}

Cards

Card with Subtle Glow Effect

.kn-list-view-column {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.kn-list-view-column:hover {
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(59, 130, 246, 0.2),
    0 0 20px rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
}
}

Card with Gradient Border Effect

.kn-list-view-column {
  position: relative;
  background: white;
  border-radius: 8px;
  padding: 1rem;
  transition: all 0.3s ease;
}

.kn-list-view-column::before {
  content: '';
  position: absolute;
  inset: -2px;
  padding: 2px;
  background: linear-gradient(45deg, #3b82f6, #8b5cf6, #06b6d4);
  border-radius: inherit;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.kn-list-view-column:hover::before {
  opacity: 1;
}

.kn-list-view-column:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

Card with Bounce Animation

.kn-list-view-column {
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  cursor: pointer;
}

.kn-list-view-column:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.kn-list-view-column:active {
  transform: translateY(-5px) scale(1.01);
  transition: all 0.1s ease;
}

Card with Color Shift Effect

.kn-list-view-column {
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border: 1px solid #e2e8f0;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.kn-list-view-column::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
  transition: left 0.5s ease;
}

.kn-list-view-column:hover {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border-color: #3b82f6;
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(59, 130, 246, 0.2);
}

.kn-list-view-column:hover::after {
  left: 100%;
}

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.