Sports API Hub uses CSS custom properties (design tokens) and a consistent BEM naming convention across all frontend blocks. You can adjust global design tokens for broad changes, or target specific BEM classes for precise overrides — no need to edit plugin files or PHP templates.
🎨 CSS Design Tokens
The plugin outputs three CSS custom properties on :root that control the overall visual style of all blocks:
| Variable | Default | Purpose | How to Change |
|---|---|---|---|
--ahub-border-radius | 0px | Corner rounding on all blocks | Settings & Tools > Settings > Display > Border Radius |
--ahub-border-color | #cdcfd1 | Structural borders on all blocks | Custom CSS override |
--ahub-bg-alt | #f8f9fa | Zebra striping, header backgrounds, surface tints | Custom CSS override |
Border Radius
The border radius setting in Plugin Settings provides preset values: 0, 4, 6, 8, or 12 pixels. This affects all plugin blocks globally — game cards, headers, team rosters, player stats, and more.
Overriding Design Tokens
To change the border color or alternate background globally, add custom CSS:
:root {
--ahub-border-color: #e2e8f0;
--ahub-bg-alt: #f1f5f9;
}Color Palette Variables
The plugin outputs nine color palette CSS variables used throughout blocks:
| Variable | Slot | Default Role |
|---|---|---|
--global-palette1 | 1 | Primary accent |
--global-palette2 | 2 | Secondary accent |
--global-palette3 | 3 | Primary text |
--global-palette4 | 4 | Secondary text |
--global-palette5 | 5 | Tertiary text |
--global-palette6 | 6 | Quaternary text |
--global-palette7 | 7 | Base background |
--global-palette8 | 8 | Secondary background |
--global-palette9 | 9 | Tertiary background |
These are configured in Color Palette settings. If you use the Kadence theme, the plugin automatically uses Kadence’s palette and skips outputting its own variables.
BEM Block Reference
All frontend elements follow BEM (Block Element Modifier) naming: ahub-{block}__element--modifier. Use your browser’s developer tools (F12) to inspect any element and find its exact class.
Game Blocks
| Block Class | Description |
|---|---|
ahub-game-card | Game cards in lists and grids (scores, teams, status) |
ahub-game-header | Single game page header (scoreboard, teams, periods) |
ahub-game-leaders | Top performers per category (PTS/REB/AST or H/HR/RBI) |
ahub-game-peek | Hover card popup on game references |
ahub-game-grid | Card grid container for game listings |
ahub-game-mini | Mini game cards in scoreboard slider |
ahub-game-odds | Betting odds table with format switcher |
ahub-venue | Venue information card |
ahub-game-info | Game metadata grid (referee, attendance) |
ahub-team-stats | Team statistics comparison bars |
ahub-box-scores | Player box score tables (Tabulator) |
ahub-timeline | Play-by-play timeline |
ahub-game-flow | Score line and lead tracker charts (ECharts) |
ahub-game-comparison | Stats comparison radar chart + bars |
ahub-game-ranks | Side-by-side league rank badges |
ahub-game-recent-form | Last N games per team |
ahub-game-form-chart | Dual W-L differential chart |
ahub-game-matchup | Head-to-head history table |
Team Blocks
| Block Class | Description |
|---|---|
ahub-team-header | Team page header (logo, info, calendar) |
ahub-team-info | Team metadata grid |
ahub-team-record | Season W-L record with ratio bars |
ahub-team-results | Recent results with form dots and game cards |
ahub-team-schedule | Month-based game schedule navigator |
ahub-team-standings | Group standings table |
ahub-team-staff | Coach/manager card |
ahub-team-roster | Player roster card grid |
ahub-team-form | Cumulative W-L area chart (ECharts) |
ahub-team-calendar | Interactive calendar with game results |
ahub-team-history | Multi-season W-L record table |
ahub-team-description | Team description text |
Player Blocks
| Block Class | Description |
|---|---|
ahub-player-header | Player page header (photo, hero stats, form) |
ahub-player-info | Player metadata grid |
ahub-player-game-log | Per-game stats table with season switcher |
ahub-player-career | Career stats table (season-by-season) |
ahub-player-splits | Home/Away, Monthly, Wins/Losses splits |
ahub-player-highlight | SVG ring charts with stat ranks |
ahub-player-opponents | Per-opponent stats table |
ahub-player-description | Player description text |
Season & Other Blocks
| Block Class | Description |
|---|---|
ahub-season-header | Season page header with dropdown navigation |
ahub-season-standings | Season standings with level/H-A pills |
ahub-season-teams | Season team card grid |
ahub-scoreboard | Season scoreboard with date navigation |
ahub-sb-slider | Swiper scoreboard carousel |
ahub-bracket | Playoff bracket (mirror/linear layout) |
ahub-calendar | Day-by-day game calendar |
ahub-highlights | Video highlight card grid |
ahub-highlight-card | YouTube video card with play overlay |
ahub-league-list | Country-grouped league directory |
ahub-tabs | Tab container (underline/pills styles) |
ahub-block-nav | Sticky scroll navigation |
ahub-agg-pills | Season/filter pill switcher |
Responsive Design
The plugin uses CSS container queries (not media queries) for responsive layouts. Each block adapts based on its own container width, not the viewport width. This means blocks respond correctly whether placed in a full-width layout, a sidebar, or a narrow column.
Container query breakpoints vary by block but typically include:
- Wide (default) — full layout with all elements visible
- Medium (~640px container) — compact spacing, smaller elements
- Narrow (~480px container) — stacked layout, abbreviated labels
- Minimal (~360px container) — essential content only
Because container queries are used, you do not need to write media queries when embedding blocks in different layout contexts.
🛠️ Adding Custom CSS
Option 1: WordPress Additional CSS
Navigate to Appearance > Customize > Additional CSS and add your overrides:
/* Change game card border color */
.ahub-game-card {
border-color: #3b82f6;
}
/* Increase team name font size in game headers */
.ahub-game-header__team-name {
font-size: 22px;
}Option 2: Theme Stylesheet
Add CSS rules to your child theme’s style.css file. This is preferred for extensive customizations.
Option 3: Custom CSS Plugin
Use any CSS plugin (such as Simple Custom CSS, WPCode, or similar) to add rules without editing theme files.
Example Overrides
Change Game Card Background
.ahub-game-card {
background-color: #fafbfc;
}Style the Winner Score
.ahub-game-card .ahub-game-card__team-row--winner .ahub-game-card__score {
color: #16a34a;
font-weight: 700;
}Adjust Team Header Layout
.ahub-team-header {
padding: 24px;
border-radius: 12px;
}Hide a Specific Block
/* Hide venue info on game pages */
.ahub-venue {
display: none;
}Customize Box Scores Table
/* Tabulator header styling */
.ahub-box-scores .tabulator .tabulator-header {
background-color: #f1f5f9;
}💡 Tips
- Inspect elements using your browser’s developer tools (F12) to find the exact BEM class for any element.
- Use specific selectors. BEM classes are descriptive enough that you rarely need to chain multiple selectors.
- Avoid
!importantwhen possible. The plugin’s CSS specificity is intentionally low to make overrides easy. - Design tokens first. Before writing block-specific CSS, check if a design token can achieve what you need globally.
- Container queries. If you need responsive overrides, target the block’s container width rather than the viewport.
📚 Related
- Color Palette — configuring the 9-slot color palette
- Plugin Settings — border radius and display settings
- Template Overrides — PHP template customization for structural changes
- Layout Builder — per-block styling via the builder UI