Skip to main content

Advanced Customization

Add custom CSS to your leaderboard for complete control over styling. Match brand guidelines, create unique designs, and add animations.

Custom CSS gives you complete control over your leaderboard's appearance. This Pro feature lets you add custom CSS code to override default styles.

Custom CSS settings

When to Use Custom CSS

Custom CSS is perfect for:

  • Matching exact brand guidelines
  • Creating unique visual designs
  • Advanced layout customizations
  • Custom animations and transitions

How to Access

  1. Click Appearance in the toolbar
  2. Navigate to the Custom CSS tab
  3. Enter your CSS code in the editor
  4. Click SAVE CHANGES to apply

Examples

Basic Styling

Customize specific elements of your leaderboard:

/* Make rank numbers larger and gold colored */
.rank-cell {
  font-size: 2rem;
  color: #FFD700;
  font-weight: bold;
}

/* Add a subtle animation to score changes */
.score-cell {
  transition: all 0.3s ease;
}

/* Customize the first place row */
.leaderboard-row:first-child {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  border: 2px solid #DAA520;
}

/* Style participant names */
.player-name {
  font-family: 'Arial Black', sans-serif;
  text-transform: uppercase;
}

Spreadsheet Boards

Custom CSS is particularly powerful for spreadsheet boards, allowing you to control column widths, cell colors, and more:

/* Set specific column width */
.spreadsheet-header-row .header-cell:first-child,
.spreadsheet-data-row .data-cell:first-child {
  width: 150px;
  min-width: 150px;
  flex: 0 0 150px;
  background-color: #28a745;
  color: white;
}

/* Alternate row colors (zebra striping) */
.spreadsheet-data-row:nth-child(even) {
  background-color: #f8f9fa;
}

/* Add hover effects */
.spreadsheet-data-row:hover {
  background-color: #e9ecef;
  cursor: pointer;
}

Security and Limitations

  • Keywords like script and @import are automatically blocked for security
  • CSS only affects visual styling, not functionality
  • Changes apply immediately to your board preview
  • Invalid CSS will be ignored by the browser

Pro Feature: Custom CSS is available on the Pro plan. Learn more about our pricing.