BGA Custom CSS

Custom CSS themes for Board Game Arena that declutter the interface by removing promotional content and reorganizing the layout.

How to Use

1. Log in to your BGA account
2. Go to Preferences > Advanced
3. Paste the contents of a CSS file into the textarea
4. Click Save
5. Reload any BGA page to see the changes

Themes

minimal.css — Clean Layout

A minimalistic theme that removes distractions and reorganizes the remaining content into a cleaner layout.

Welcome Page (/welcome)

Removed:

• Featured game banner (BGA Awards, promotions)
• Latest News carousel
• Games section (New, Trending, Recommended grids)
• "How to play...?" tutorial section
• "Play more!" (friend referral) section
• "Hall of fame" leaderboard
• Emoji mascot footer
• Site footer

Reorganized:

• Service status bar moved to the top, spanning full width, with the "Service status" label hidden — only the green status bar and player counts are shown
• Newsfeed, Tournaments, and Achievements arranged in a three-column layout below the status bar

Games In Progress (/gameinprogress)

Removed:

• Shortcuts filter bar (Tournament, Arena, Play, Waiting for you buttons)
• Time Jokers indicator
• "More on #BGA" promotional section
• "Play again" game carousel
• "Discover other games" recommendations
• "More friends, more fun!" referral section

Kept as-is:

• Tables waiting for you
• Play Tables
• Arena Tables
• Tournament Tables

Global

Removed:

• Site footer (on all pages)
• Friends going online/offline chat notifications

Notes

• BGA applies custom CSS server-side before the page renders, so layout changes work correctly with dynamic Svelte components
• All rules use !important to override BGA's default styles
• Uses :has() selector (supported in all modern browsers)