🎨 Custom CSS & Advanced Styling

When to Use Custom CSS

The visual editor handles 95% of styling needs. Use custom CSS for:

• Unique animations or hover effects
• Advanced layouts not available in builder
• Specific client requirements
• Integration with existing site styles

Adding Custom CSS

1 Access CSS Editor

In table settings, click Advanced tab, then Custom CSS field.

2 Write Your CSS

All CSS is scoped to your table automatically. No need to worry about affecting other site elements.

3 Preview Changes

Changes apply in real-time to the preview.

Useful CSS Selectors

Target Specific Elements

/* All columns */
.ppt-column {}

/* Specific column (1st, 2nd, 3rd) */
.ppt-column:nth-child(1) {}
.ppt-column:nth-child(2) {}

/* Highlighted/popular column */
.ppt-column.highlighted {}

/* Column headers */
.ppt-column-header {}

/* Prices */
.ppt-price {}

/* Features */
.ppt-feature {}

/* Buttons */
.ppt-button {}

/* Feature rows */
.ppt-feature-row {}

Common Customizations

Custom Hover Effects

.ppt-column:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

Gradient Buttons

.ppt-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  transition: opacity 0.3s;
}

.ppt-button:hover {
  opacity: 0.9;
}

Animated Price

.ppt-price {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

Custom Checkmarks

.ppt-feature-included::before {
  content: '✓';
  color: #4CAF50;
  font-weight: bold;
  margin-right: 8px;
}

Responsive CSS

Mobile-Specific Styles

@media (max-width: 768px) {
  .ppt-column {
    margin-bottom: 20px;
  }
  
  .ppt-price {
    font-size: 32px;
  }
}

Advanced Techniques

CSS Variables

:root {
  --brand-primary: #667eea;
  --brand-secondary: #764ba2;
}

.ppt-button {
  background: var(--brand-primary);
}

.ppt-column.highlighted {
  border-color: var(--brand-secondary);
}

Smooth Animations

.ppt-column {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ppt-button {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ppt-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}