Custom CSS & Themes

Take complete control over your FeatureShark board's appearance with advanced CSS customization, custom themes, and powerful styling techniques for developers and designers.

Overview

Custom CSS allows you to override default styles and create unique experiences that perfectly match your brand. This advanced feature is designed for users comfortable with CSS and web development.

What You Can Customize

Complete visual overhaul of all interface elements
Custom animations and micro-interactions
Advanced layout modifications beyond standard options
Responsive design enhancements for specific devices
Dark/light theme variations with automatic switching
Integration styling to match your existing products

CSS Capabilities

Full CSS3 support including flexbox, grid, and animations
CSS custom properties (variables) for dynamic theming
Media queries for responsive customization
Pseudo-selectors for advanced interactivity
CSS transforms and transitions for smooth animations

Getting Started with Custom CSS

Accessing the CSS Editor

Navigation Steps

Go to Settings > Customization > Custom CSS
Enable "Advanced Styling Mode"
Choose your CSS editor preference:
- Simple Editor: Basic syntax highlighting
- Advanced Editor: Full IDE features with autocomplete
- External Editor: Upload CSS files

Editor Features

Advanced Editor Capabilities:

Syntax highlighting and error detection
Autocomplete for CSS properties and FeatureShark classes
Live preview of changes in real-time
Version history to track and revert changes
Minification for production deployment

CSS Architecture

FeatureShark CSS Structure

Understanding the default CSS structure helps with customization:

/* Base Layout */
.fs-container { /* Main container */ }
.fs-header { /* Top navigation */ }
.fs-content { /* Main content area */ }
.fs-sidebar { /* Category sidebar */ }
.fs-footer { /* Footer area */ }

/* Feature Request Components */
.fs-request-card { /* Individual request cards */ }
.fs-vote-button { /* Voting buttons */ }
.fs-comment-section { /* Comments area */ }
.fs-status-badge { /* Status indicators */ }

/* Forms and Inputs */
.fs-form { /* All forms */ }
.fs-input { /* Text inputs */ }
.fs-textarea { /* Text areas */ }
.fs-select { /* Dropdown selects */ }
.fs-button { /* All buttons */ }

/* Navigation */
.fs-nav { /* Main navigation */ }
.fs-nav-item { /* Navigation items */ }
.fs-breadcrumb { /* Breadcrumb navigation */ }
.fs-pagination { /* Page navigation */ }

CSS Specificity Guidelines

Use appropriate specificity levels:

/* Low specificity - Base styles */
.fs-button {
  padding: 8px 16px;
  border-radius: 4px;
}

/* Medium specificity - Component variants */
.fs-button.fs-button-primary {
  background-color: var(--primary-color);
  color: white;
}

/* High specificity - State overrides */
.fs-request-card .fs-button.fs-button-primary:hover {
  background-color: var(--primary-color-dark);
  transform: translateY(-1px);
}

CSS Variables and Theming

Built-in CSS Variables

Color Variables

:root {
  /* Primary brand colors */
  --fs-primary-50: #faf5ff;
  --fs-primary-100: #f3e8ff;
  --fs-primary-200: #e9d5ff;
  --fs-primary-300: #d8b4fe;
  --fs-primary-400: #c084fc;
  --fs-primary-500: #a855f7; /* Main primary */
  --fs-primary-600: #9333ea;
  --fs-primary-700: #7c2d12;
  --fs-primary-800: #581c87;
  --fs-primary-900: #3b0764;

  /* Semantic colors */
  --fs-success: #10b981;
  --fs-warning: #f59e0b;
  --fs-error: #ef4444;
  --fs-info: #3b82f6;

  /* Neutral colors */
  --fs-gray-50: #f9fafb;
  --fs-gray-100: #f3f4f6;
  --fs-gray-200: #e5e7eb;
  --fs-gray-300: #d1d5db;
  --fs-gray-400: #9ca3af;
  --fs-gray-500: #6b7280;
  --fs-gray-600: #4b5563;
  --fs-gray-700: #374151;
  --fs-gray-800: #1f2937;
  --fs-gray-900: #111827;
}

Typography Variables

:root {
  /* Font families */
  --fs-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --fs-font-serif: 'Merriweather', Georgia, serif;
  --fs-font-mono: 'JetBrains Mono', Consolas, monospace;

  /* Font sizes */
  --fs-text-xs: 0.75rem;    /* 12px */
  --fs-text-sm: 0.875rem;   /* 14px */
  --fs-text-base: 1rem;     /* 16px */
  --fs-text-lg: 1.125rem;   /* 18px */
  --fs-text-xl: 1.25rem;    /* 20px */
  --fs-text-2xl: 1.5rem;    /* 24px */
  --fs-text-3xl: 1.875rem;  /* 30px */
  --fs-text-4xl: 2.25rem;   /* 36px */

  /* Font weights */
  --fs-font-light: 300;
  --fs-font-normal: 400;
  --fs-font-medium: 500;
  --fs-font-semibold: 600;
  --fs-font-bold: 700;
}

Spacing and Layout Variables

:root {
  /* Spacing scale */
  --fs-space-1: 0.25rem;   /* 4px */
  --fs-space-2: 0.5rem;    /* 8px */
  --fs-space-3: 0.75rem;   /* 12px */
  --fs-space-4: 1rem;      /* 16px */
  --fs-space-5: 1.25rem;   /* 20px */
  --fs-space-6: 1.5rem;    /* 24px */
  --fs-space-8: 2rem;      /* 32px */
  --fs-space-10: 2.5rem;   /* 40px */
  --fs-space-12: 3rem;     /* 48px */
  --fs-space-16: 4rem;     /* 64px */

  /* Border radius */
  --fs-radius-sm: 0.125rem; /* 2px */
  --fs-radius: 0.25rem;     /* 4px */
  --fs-radius-md: 0.375rem; /* 6px */
  --fs-radius-lg: 0.5rem;   /* 8px */
  --fs-radius-xl: 0.75rem;  /* 12px */
  --fs-radius-full: 9999px; /* Fully rounded */

  /* Shadows */
  --fs-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --fs-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --fs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --fs-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --fs-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

Creating Custom Themes

Complete Theme Override

/* Custom "Ocean" Theme */
:root {
  --fs-primary-500: #0891b2; /* Cyan 600 */
  --fs-primary-600: #0e7490; /* Cyan 700 */
  --fs-primary-700: #155e75; /* Cyan 800 */
  
  --fs-background: #f0f9ff;   /* Sky 50 */
  --fs-surface: #ffffff;
  --fs-surface-secondary: #f8fafc; /* Slate 50 */
  
  --fs-text-primary: #0f172a;   /* Slate 900 */
  --fs-text-secondary: #475569; /* Slate 600 */
  --fs-text-tertiary: #64748b;  /* Slate 500 */
  
  --fs-border: #e2e8f0; /* Slate 200 */
  --fs-border-strong: #cbd5e1; /* Slate 300 */
}

/* Apply theme-specific styles */
.fs-container {
  background: linear-gradient(135deg, var(--fs-background) 0%, #e0f2fe 100%);
  min-height: 100vh;
}

.fs-request-card {
  background: var(--fs-surface);
  border: 1px solid var(--fs-border);
  border-radius: var(--fs-radius-lg);
  box-shadow: var(--fs-shadow);
  transition: all 0.2s ease;
}

.fs-request-card:hover {
  border-color: var(--fs-primary-500);
  box-shadow: var(--fs-shadow-md);
  transform: translateY(-1px);
}

Dark Theme Implementation

/* Dark theme using CSS custom properties */
[data-theme="dark"] {
  --fs-background: #0f172a;     /* Slate 900 */
  --fs-surface: #1e293b;        /* Slate 800 */
  --fs-surface-secondary: #334155; /* Slate 700 */
  
  --fs-text-primary: #f8fafc;   /* Slate 50 */
  --fs-text-secondary: #cbd5e1; /* Slate 300 */
  --fs-text-tertiary: #94a3b8;  /* Slate 400 */
  
  --fs-border: #475569;         /* Slate 600 */
  --fs-border-strong: #64748b;  /* Slate 500 */
  
  /* Adjust primary colors for dark theme */
  --fs-primary-500: #38bdf8; /* Sky 400 - more visible on dark */
  --fs-primary-600: #0ea5e9; /* Sky 500 */
}

/* Dark theme specific adjustments */
[data-theme="dark"] .fs-request-card {
  background: var(--fs-surface);
  border-color: var(--fs-border);
}

[data-theme="dark"] .fs-vote-button {
  background: var(--fs-surface-secondary);
  border-color: var(--fs-border);
  color: var(--fs-text-secondary);
}

[data-theme="dark"] .fs-vote-button:hover {
  background: var(--fs-primary-500);
  color: var(--fs-background);
}

Advanced Component Styling

Feature Request Cards

Modern Card Design

.fs-request-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* Hover effects */
.fs-request-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Status indicator */
.fs-request-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--fs-primary-500);
}

.fs-request-card[data-status="planned"]::before {
  background: var(--fs-warning);
}

.fs-request-card[data-status="in-development"]::before {
  background: var(--fs-info);
}

.fs-request-card[data-status="completed"]::before {
  background: var(--fs-success);
}

Glass Morphism Style

.fs-request-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

/* Ensure text is readable */
.fs-request-card .fs-title {
  color: var(--fs-text-primary);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

Voting Interface

Animated Vote Buttons

.fs-vote-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* Hover animation */
.fs-vote-button:hover {
  transform: scale(1.1);
  box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);
}

/* Click animation */
.fs-vote-button:active {
  transform: scale(0.95);
}

/* Vote count badge */
.fs-vote-count {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--fs-error);
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

/* Pulse animation for new votes */
@keyframes vote-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.fs-vote-button.just-voted {
  animation: vote-pulse 0.6s ease-in-out;
}

Custom Vote Styles

/* Heart-shaped vote button */
.fs-vote-button.heart-style {
  background: none;
  border: none;
  padding: 0;
}

.fs-vote-button.heart-style::before {
  content: '♡';
  font-size: 32px;
  color: var(--fs-gray-400);
  transition: all 0.2s ease;
}

.fs-vote-button.heart-style.voted::before {
  content: '♥';
  color: var(--fs-error);
  transform: scale(1.2);
}

/* Thumbs up style */
.fs-vote-button.thumb-style::before {
  content: '👍';
  font-size: 24px;
  filter: grayscale(100%);
  transition: filter 0.2s ease;
}

.fs-vote-button.thumb-style.voted::before {
  filter: grayscale(0%);
}

Navigation Styling

Modern Navigation Bar

.fs-header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 12px 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.fs-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.fs-nav-item {
  color: var(--fs-text-secondary);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: var(--fs-radius-lg);
  font-weight: var(--fs-font-medium);
  transition: all 0.2s ease;
  position: relative;
}

.fs-nav-item:hover {
  color: var(--fs-primary-600);
  background: var(--fs-primary-50);
}

.fs-nav-item.active {
  color: var(--fs-primary-600);
  background: var(--fs-primary-100);
}

/* Active indicator */
.fs-nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  background: var(--fs-primary-500);
  border-radius: var(--fs-radius-full);
}

Sidebar Navigation

.fs-sidebar {
  width: 280px;
  background: var(--fs-surface);
  border-right: 1px solid var(--fs-border);
  padding: 24px;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
}

.fs-sidebar-section {
  margin-bottom: 32px;
}

.fs-sidebar-title {
  font-size: var(--fs-text-sm);
  font-weight: var(--fs-font-semibold);
  color: var(--fs-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.fs-sidebar-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--fs-radius-md);
  color: var(--fs-text-secondary);
  text-decoration: none;
  transition: all 0.2s ease;
  margin-bottom: 4px;
}

.fs-sidebar-item:hover {
  background: var(--fs-surface-secondary);
  color: var(--fs-text-primary);
}

.fs-sidebar-item.active {
  background: var(--fs-primary-100);
  color: var(--fs-primary-700);
}

.fs-sidebar-icon {
  width: 20px;
  height: 20px;
  margin-right: 12px;
}

Responsive Design

Mobile-First Approach

Base Mobile Styles

/* Mobile base styles */
.fs-container {
  padding: 16px;
}

.fs-request-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.fs-request-card {
  padding: 16px;
}

/* Hide sidebar on mobile */
.fs-sidebar {
  display: none;
}

/* Mobile navigation */
.fs-mobile-nav {
  display: block;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid var(--fs-border);
  padding: 12px;
  z-index: 1000;
}

.fs-mobile-nav-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.fs-mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  border-radius: var(--fs-radius-md);
  color: var(--fs-text-tertiary);
  text-decoration: none;
  font-size: var(--fs-text-xs);
}

.fs-mobile-nav-item.active {
  color: var(--fs-primary-600);
  background: var(--fs-primary-50);
}

Tablet Styles

@media (min-width: 768px) {
  .fs-container {
    padding: 24px;
  }
  
  .fs-request-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  .fs-request-card {
    padding: 20px;
  }
  
  /* Show simplified sidebar */
  .fs-sidebar {
    display: block;
    width: 240px;
  }
  
  /* Hide mobile navigation */
  .fs-mobile-nav {
    display: none;
  }
}

Desktop Styles

@media (min-width: 1024px) {
  .fs-container {
    padding: 32px;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .fs-request-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  
  .fs-request-card {
    padding: 24px;
  }
  
  .fs-sidebar {
    width: 280px;
  }
}

@media (min-width: 1280px) {
  .fs-request-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

Device-Specific Optimizations

Touch Device Optimizations

@media (hover: none) and (pointer: coarse) {
  /* Touch device styles */
  .fs-button {
    min-height: 44px; /* Apple's recommended minimum */
    padding: 12px 20px;
  }
  
  .fs-vote-button {
    width: 50px;
    height: 50px;
  }
  
  /* Remove hover effects on touch devices */
  .fs-request-card:hover {
    transform: none;
    box-shadow: var(--fs-shadow);
  }
  
  /* Add active states for touch feedback */
  .fs-button:active {
    transform: scale(0.98);
    opacity: 0.8;
  }
}

High DPI Display Optimization

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* High DPI optimizations */
  .fs-icon {
    image-rendering: -webkit-optimize-contrast;
  }
  
  .fs-logo {
    image-rendering: crisp-edges;
  }
}

Animation and Interactions

CSS Animations

Loading Animations

@keyframes fs-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes fs-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes fs-bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    transform: translate3d(0, -30px, 0);
  }
  70% {
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0, -4px, 0);
  }
}

.fs-loading {
  animation: fs-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.fs-spinner {
  animation: fs-spin 1s linear infinite;
}

.fs-bounce {
  animation: fs-bounce 1s ease infinite;
}

Entrance Animations

@keyframes fs-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fs-scale-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.fs-request-card {
  animation: fs-fade-in-up 0.6s ease-out;
}

/* Stagger animation for multiple cards */
.fs-request-card:nth-child(1) { animation-delay: 0ms; }
.fs-request-card:nth-child(2) { animation-delay: 100ms; }
.fs-request-card:nth-child(3) { animation-delay: 200ms; }
.fs-request-card:nth-child(4) { animation-delay: 300ms; }

Micro-Interactions

Button Interactions

.fs-button {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Ripple effect */
.fs-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.fs-button:active::before {
  width: 300px;
  height: 300px;
}

/* Success feedback */
@keyframes success-check {
  0% {
    transform: scale(0) rotate(45deg);
  }
  50% {
    transform: scale(1.2) rotate(45deg);
  }
  100% {
    transform: scale(1) rotate(45deg);
  }
}

.fs-button.success::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: success-check 0.6s ease;
}

Form Interactions

.fs-input-group {
  position: relative;
  margin-bottom: 24px;
}

.fs-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--fs-border);
  border-radius: var(--fs-radius-lg);
  background: transparent;
  transition: all 0.3s ease;
}

.fs-input:focus {
  outline: none;
  border-color: var(--fs-primary-500);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
}

/* Floating label */
.fs-label {
  position: absolute;
  top: 12px;
  left: 16px;
  color: var(--fs-text-tertiary);
  font-size: var(--fs-text-base);
  pointer-events: none;
  transition: all 0.3s ease;
}

.fs-input:focus + .fs-label,
.fs-input:not(:placeholder-shown) + .fs-label {
  top: -10px;
  left: 12px;
  font-size: var(--fs-text-sm);
  color: var(--fs-primary-600);
  background: white;
  padding: 0 8px;
}

Performance Optimization

CSS Optimization

Critical CSS

/* Critical above-the-fold styles */
.fs-container,
.fs-header,
.fs-nav,
.fs-request-card {
  /* Essential layout and typography styles only */
}

/* Non-critical styles loaded separately */
@import url('animations.css') screen;
@import url('print.css') print;

CSS Minification

/* Development version with comments */
.fs-button {
  /* Primary button styles */
  background: var(--fs-primary-500);
  color: white;
  /* ... */
}

/* Production version (minified) */
.fs-button{background:var(--fs-primary-500);color:#fff;}

Animation Performance

Hardware Acceleration

.fs-request-card {
  /* Enable hardware acceleration */
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* Animate only transform and opacity for best performance */
.fs-request-card:hover {
  transform: translate3d(0, -4px, 0);
}

Reduce Motion for Accessibility

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Debugging and Testing

CSS Debugging

Debug Utilities

/* Debug mode - add .debug class to container */
.debug * {
  outline: 1px solid red;
}

.debug .fs-container { outline-color: blue; }
.debug .fs-request-card { outline-color: green; }
.debug .fs-button { outline-color: purple; }

/* CSS Grid debugging */
.debug .fs-request-grid {
  background-image: 
    linear-gradient(rgba(255,0,0,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,0,0,.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

Console Logging for CSS

/* CSS debugging with console output */
.fs-request-card {
  background: var(--fs-surface);
  /* Debug: Check if custom property is working */
  border: 1px solid var(--debug-color, red);
}

Browser Testing

Cross-Browser Compatibility

/* Modern browsers */
.fs-request-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

/* Fallback for older browsers */
.fs-request-grid {
  display: flex;
  flex-wrap: wrap;
  margin: -12px;
}

.fs-request-grid .fs-request-card {
  flex: 1 1 300px;
  margin: 12px;
}

/* Feature detection */
@supports (display: grid) {
  .fs-request-grid {
    display: grid;
    margin: 0;
  }
  
  .fs-request-grid .fs-request-card {
    margin: 0;
  }
}

Best Practices

Code Organization

Use consistent naming conventions (BEM, utility-first, etc.)
Group related styles together
Comment complex calculations and workarounds
Use CSS custom properties for maintainable theming
Minimize specificity conflicts

Performance

Avoid expensive CSS properties (box-shadow, filter, etc. in animations)
Use transform and opacity for animations
Minimize layout thrashing with proper CSS architecture
Optimize for critical rendering path

Accessibility

Maintain sufficient color contrast (4.5:1 minimum)
Respect user preferences (reduced motion, high contrast)
Ensure keyboard navigation works with custom styles
Test with screen readers

Maintenance

Document custom CSS thoroughly
Use version control for CSS changes
Test across devices and browsers regularly
Keep CSS up to date with FeatureShark updates

What's Next?

Complete your FeatureShark mastery:

Custom Domain Setup - Professional domain integration
Managing Feature Requests - Workflow optimization
Understanding Analytics - Data-driven insights

Getting Help

🎨 CSS Support: css-help@featureshark.com
💻 Developer Community: Join our Discord
📚 CSS Examples Gallery: Browse customization examples
🎯 Custom Development: Hire our design team

Skill Level: Advanced (CSS knowledge required)
Implementation Time: 2-8 hours depending on complexity
Last Updated: September 2025

Custom CSS &#x26; Themes

Custom CSS & Themes

Overview

What You Can Customize

CSS Capabilities

Getting Started with Custom CSS

Accessing the CSS Editor

Navigation Steps

Editor Features

CSS Architecture

FeatureShark CSS Structure

CSS Specificity Guidelines

CSS Variables and Theming

Built-in CSS Variables

Color Variables

Typography Variables

Spacing and Layout Variables

Creating Custom Themes

Complete Theme Override

Dark Theme Implementation

Advanced Component Styling

Feature Request Cards

Modern Card Design

Glass Morphism Style

Voting Interface

Animated Vote Buttons

Custom Vote Styles

Navigation Styling

Modern Navigation Bar

Sidebar Navigation

Responsive Design

Mobile-First Approach

Base Mobile Styles

Tablet Styles

Desktop Styles

Device-Specific Optimizations

Touch Device Optimizations

High DPI Display Optimization

Animation and Interactions

CSS Animations

Loading Animations

Entrance Animations

Micro-Interactions

Button Interactions

Form Interactions

Performance Optimization

CSS Optimization

Critical CSS

CSS Minification

Animation Performance

Hardware Acceleration

Reduce Motion for Accessibility

Debugging and Testing

CSS Debugging

Debug Utilities

Console Logging for CSS

Browser Testing

Cross-Browser Compatibility

Best Practices

Code Organization

Performance

Accessibility

Maintenance

What's Next?

Getting Help

Was this helpful?

Custom CSS & Themes