Theme Customization

Customize the visual appearance of your host's public pages through theme settings. Control colors, layouts, content visibility, and more.

Accessing Theme Settings

1. Navigate to Host Settings
2. Go to the "Theme Customization" section
3. Adjust settings using the provided controls
4. Preview changes in real-time
5. Click "Save" to apply

Color Customization

Primary Color

Your main brand color used throughout the site:

• Buttons and interactive elements
• Links and navigation highlights
• Accent elements
• Call-to-action buttons

How to set:

1. Click the color picker next to "Primary Color"
2. Choose your color or enter a hex code
3. Preview the change immediately

Secondary Color

A complementary color for:

• Secondary buttons
• Hover states
• Supporting visual elements
• Background accents

Card Background Color

The background color for content cards (tournaments, teams, matches):

• Default: Dark gray (#1F2937)
• Can be customized to match your brand
• Affects all card-based content

Section Background Color

The background color for page sections:

• Default: Very dark gray (#111827)
• Provides contrast for content areas
• Can be customized for different visual styles

Layout Options

Hero Banner Style

Choose how the hero banner appears on your landing page:

• Full-Width: Hero spans the entire width of the page
• Contained: Hero is contained within a content area

When to use:

• Full-Width: For maximum visual impact, modern look
• Contained: For a more traditional, structured layout

Card Columns

Control how many columns of cards appear per row:

• 1 Column: Single column layout (mobile-friendly)
• 2 Columns: Two columns side-by-side
• 3 Columns: Three columns (default, balanced)
• 4 Columns: Four columns (compact, more items visible)

Considerations:

• More columns = more items visible, but smaller cards
• Fewer columns = larger cards, better for detailed content
• Responsive design automatically adjusts on mobile

Content Visibility

Control what information is displayed on public pages:

Show Team Count

Toggle whether team count is shown on tournament cards:

• Enabled: Shows number of teams registered
• Disabled: Hides team count

Show Duration

Toggle whether tournament duration is displayed:

• Enabled: Shows start and end dates
• Disabled: Hides duration information

Show Dates

Toggle whether dates are shown:

• Enabled: Displays tournament dates
• Disabled: Hides date information

Maximum Items Per Section

Control how many items appear in each section:

• Default: 6 items
• Can be set from 3 to 12 items
• Helps control page length and loading

Per-Page Customization

Each page type can have its own customization settings:

Landing Page

• Hero style (full-width or contained)
• Show/hide statistics
• Show/hide featured match

Tournaments Page

• Card columns (1-4)
• Show/hide team count
• Show/hide duration
• Show/hide dates

Teams Page

• Card columns (1-4)
• Logo size (small, medium, large)

Matches Page

• Card columns (1-4)
• Show/hide filters
• Default filter state (expanded or collapsed)

See Per-Page Customization for detailed information.

Preview and Testing

Real-Time Preview

Theme changes are previewed in real-time:

• See color changes immediately
• Test different layout options
• Verify content visibility settings

Testing Your Theme

Before saving, test:

1. Color Contrast: Ensure text is readable on all backgrounds
2. Layout: Check how cards look with different column counts
3. Content: Verify visibility settings show/hide appropriate information
4. Responsiveness: Test on different screen sizes (if possible)

Best Practices

Color Selection

• Accessibility: Ensure sufficient contrast between text and backgrounds
• Consistency: Use your brand colors consistently
• Readability: Test colors with actual content
• WCAG Compliance: Aim for WCAG AA contrast ratios

Layout Choices

• Content Density: More columns = more content visible, but smaller cards
• User Experience: Consider what information users need to see
• Mobile First: Remember layouts adapt on mobile devices
• Balance: Find a balance between information density and readability

Content Visibility

• Relevance: Show information that's useful to users
• Clutter: Hide information that's not essential
• Context: Different pages may need different visibility settings

Advanced Customization

JSON Theme Editor

For advanced users, you can edit the theme JSON directly:

{
  "primary": "#3B82F6",
  "secondary": "#1E40AF",
  "card_background": "#1F2937",
  "section_background": "#111827",
  "hero_style": "full-width",
  "card_columns": 3,
  "show_team_count": true,
  "show_duration": true,
  "show_dates": true,
  "max_items_per_section": 6
}

Warning: Only edit JSON if you're comfortable with the format. Mistakes can break your theme.

Resetting to Defaults

To reset theme settings to defaults:

1. Clear all color fields
2. Reset layout options to defaults
3. Reset content visibility to enabled
4. Save changes

Or manually set:

• Primary: #3B82F6 (blue)
• Secondary: #1E40AF (dark blue)
• Card Background: #1F2937 (dark gray)
• Section Background: #111827 (very dark gray)
• Hero Style: full-width
• Card Columns: 3
• All visibility options: enabled
• Max Items: 6

Related Articles

• Host Branding
• Per-Page Customization
• Public Pages
• Host Settings