Theming & Design
Scorecenter gives you control over your site's visual identity: theme presets, colors, typography, spacing, header and footer colors, and advanced CSS when your plan includes it.
Most visual settings are managed from Settings -> Styles and Settings -> Branding. Header and footer structure have their own dedicated pages:
- Settings -> Header for header layout, built-in buttons, and custom header actions
- Settings -> Footer for footer layout, columns, text, and notices
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 details
Fine-grained control over repeated site 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 and footer styling
Header and footer colors are part of your visual theme. Use them to make the public site match your brand.
| Area | Controlled from |
|---|---|
| Header background and text colors | Settings -> Styles |
| Footer background, text, and border colors | Settings -> Styles |
| Header layout, sticky behavior, and action buttons | Settings -> Header |
| Footer layout, columns, about text, and copyright | Settings -> Footer |
If you want to change what links appear in the header or footer, use Settings -> Menus. If you want to change how the header or footer is arranged, use Settings -> Header or Settings -> Footer.
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. Use this for small visual adjustments that are not covered by normal settings.
Common use cases:
- Adjusting spacing that is not covered by normal settings
- Overriding module-level styles
- Adding custom animations
- Targeting specific breakpoints
Try to reuse your site colors in custom CSS so future theme changes stay consistent.
Module classes
Most users should start with the normal module presentation controls: wrapper style, spacing, colors, density, and prominence. Advanced users can also add reusable module classes.
There are two class fields:
| Field | Best use |
|---|---|
| Custom classes | Named classes that you define once in the CSS editor, then reuse on modules |
| Utility classes | Small one-off layout or spacing helpers chosen directly in the module editor |
Use custom classes for repeatable styles such as a branded hero section, commercial card, compact list, or muted background band. Use utility classes for small adjustments, such as centering a module, changing its gap, adding a hover effect, or hiding it on a certain screen size.
Use advanced classes carefully. A small number of reusable classes is easier to maintain than many one-off visual overrides.