Theming & Design
Scorecenter gives you full control over your site's visual identity — from predefined theme presets to fine-grained color, typography, and layout adjustments. All changes are made in the CMS under Settings > Styles and take effect immediately.
Theme presets
Start with one of the built-in theme presets, then customize from there. Each preset includes coordinated light and dark mode color palettes.
| Theme | Accent | Style |
|---|---|---|
| Default | Teal | Clean, modern sports look |
| Editorial | Red | News-oriented, bold headlines |
| Newsroom | Blue | Professional media feel |
| Onest | Blue | Contemporary, rounded UI |
| Paper | Slate | Minimal, content-first |
| Sunset | Orange | Warm, energetic tones |
Each theme comes in light and dark variants. You can set a default mode and allow visitors to toggle between them.
Colors
Colors are organized into functional groups. You can override any individual color after selecting a theme preset.
| Color | Purpose |
|---|---|
| Primary | Buttons, links, active states |
| Accent | Highlights, badges, secondary emphasis |
| Background | Page background |
| Surface | Card and panel backgrounds |
| Text | Body text |
| Muted text | Secondary text, captions |
| Border | Dividers, card borders |
| Link | Hyperlink color |
| Color | Purpose |
|---|---|
| Live | Live match indicators (typically red) |
| Win | Win results, positive stats (typically green) |
| Draw | Draw results (typically yellow/amber) |
| Loss | Loss results (typically red/muted) |
Widget colors control the appearance of sports data modules (livescore tables, standings, stats, etc.):
| Color | Purpose |
|---|---|
| Widget background | Module card background |
| Widget surface | Nested surfaces within modules |
| Widget text | Module text |
| Widget accent | Module highlights and active states |
| Widget border | Module borders and dividers |
Five configurable chart colors (Chart 1 through Chart 5) used for data visualization in statistics modules, bar charts, and comparison graphics.
Typography
Layout
| Setting | Options | Description |
|---|---|---|
| Layout preset | standard, balanced, editorial, focus | Overall layout proportions |
| Site layout | full, boxed | Full-width or contained layout |
| Container width | Pixels | Maximum content width |
| Sidebar widths | Pixels | Left and right sidebar column widths |
Design tokens
Fine-grained control over UI component styling:
| Setting | Options |
|---|---|
| Border radius | none, sharp, soft, default, rounded, more, full |
| Card style | bordered, shadow, elevated, flat |
| Density | compact, default, comfortable |
| Module gap | 8–24px spacing between modules |
Header
| Setting | Options |
|---|---|
| Layout | stacked (logo above nav), inline (logo beside nav) |
| Logo alignment | Left, center |
| Separator style | Line style between header and content |
| Sticky header | Keep the header visible when scrolling |
| Nav indicators | underline, pill, dot — active menu item style |
Mobile bottom navigation
Configure a bottom navigation bar for mobile visitors with up to 5 tabs. Each tab has:
- Icon — from the icon library
- Label — short text
- URL — destination link
Branding
Branding settings are in Settings > Branding (separate from Styles):
| Setting | Description |
|---|---|
| Brand name | Shown in browser tab, header fallback, and metadata |
| Logo | Default logo image URL |
| Logo (light mode) | Variant shown on light backgrounds |
| Logo (dark mode) | Variant shown on dark backgrounds |
| Logo height | Display height in pixels (default: 40px) |
| Favicon | Browser tab icon |
| Primary color | Brand color used for buttons and accents |
Custom CSS
Custom CSS requires the custom CSS feature on your plan.
For advanced customization beyond the theme settings, you can write custom CSS in Settings > Styles > CSS. The CSS is injected after the theme styles, so your rules take precedence.
Common use cases:
- Adjusting specific component spacing
- Overriding module-level styles
- Adding custom animations
- Targeting specific breakpoints
All theme colors are available as CSS variables (e.g., --primary, --background, --widget-accent), so your custom CSS stays consistent with theme changes.