CSS Customization Guide

How It Works

The CSS files (dark_main.css or dark_din_main.css) are loaded via the Custom CSS URL field in MFL:

1. Go to Setup > Franchise Setup > Images and Other URLs
2. Paste the stylesheet URL into the Custom CSS field
3. Save — MFL loads it across your league site

Every visual property in the stylesheet is driven by CSS custom properties (variables) defined in a :root block. Because CSS cascades, you can override any variable by adding a <style> block in an MFL Homepage Message. The Homepage Message loads after the stylesheet, so your overrides win.

Getting Started

Create (or edit) an MFL Homepage Message and add a <style> block. Only include the variables you want to change:

<style>
:root {
  /* Brand Colors */
  --accent-color: #ff4500;
  --dark-accent-color: #cc3700;

  /* Headings */
  --h1-color: #ff4500;
  --h2-color: #ff4500;
  --h3-color: #ff4500;

  /* Buttons */
  --button-bg-color: #ff4500;
  --button-bg-color-hover: #ff6030;
  --button-link-color: #ffffff;
}
</style>

Everything you don't override keeps its default value from the base CSS file.

Using Claude to Help Customize

Copy the prompt below and paste it at the start of a Claude conversation. It gives Claude all the context it needs — from there you can say things like "Change my accent color to red" or "Make the table headers white" and Claude will respond with the correct <style> block.

I'm customizing an MFL (MyFantasyLeague) league website. My league uses a dark theme CSS file loaded via MFL's Custom CSS URL field. I override specific CSS variables using a <style> block inside an MFL Homepage Message.

The base CSS file defines all styles using CSS custom properties (variables) in a :root block. I can override any variable by redefining it in my Homepage Message's <style> block — the override wins because it appears later on the page.

Here is the complete list of CSS variables I can override, with their current default values:

:root {
  --primary-color: #f7f7f7;
  --secondary-color: #f7f7f7;
  --accent-color: #d4000f;
  --dark-accent-color: #b0000c;
  --primary-text-color: #f7f7f7;
  --secondary-text-color: #d0d0d0;
  --link-color: #d0d0d0;
  --link-color-hover: #d4000f;
  --add-color: #4ade80;
  --drop-color: #f87171;
  --alert-danger-text: #fca5a5;
  --alert-danger-bg: rgba(220, 38, 38, 0.15);
  --alert-danger-border: rgba(220, 38, 38, 0.25);
  --alert-warning-text: #fcd34d;
  --alert-warning-bg: rgb(57, 36, 1);
  --alert-warning-border: rgb(216, 155, 49);
  --alert-success-text: #6ee7b7;
  --alert-success-bg: rgba(16, 185, 129, 0.12);
  --alert-success-border: rgba(16, 185, 129, 0.25);
  --alert-info-text: #93bbfd;
  --alert-info-bg: rgba(59, 130, 246, 0.12);
  --alert-info-border: rgba(59, 130, 246, 0.25);
  --gray1: #d8d8d8;
  --gray2: #8a8a8a;
  --gray3: #6b6b6b;
  --offwhite: #48494A;
  --offwhite2: #1d1e1f;
  --lightgray: #48494A;
  --lightgray2: #555657;
  --lightgray3: #6a6b6c;
  --white: #48494A;
  --codebg-color: #1d1e1f;
  --oddtablerow: #48494A;
  --eventablerow: #555657;
  --newposition-border-color: #555657;
  --table-header-color: #9a9a9a;
  --primary-bg-color: #48494A;
  --pagebody-bg: #1d1e1f;
  --report-bg: #48494A;
  --header-bg: #141516;
  --footer-bg-color: #141516;
  --footer-text-color: #f7f7f7;
  --footer-header-text-color: #f7f7f7;
  --border-color: #3a3b3c;
  --menu-bg-color: #141516;
  --menu-bg-hover-color: #2a2b2c;
  --menu-border-color: #2a2b2c;
  --menu-text-color: #f7f7f7;
  --secondary-menu-border-color: #d4000f;
  --secondary-menu-bg-color: var(--accent-color);
  --secondary-menu-text-color: #f7f7f7;
  --secondary-menu-link-color: #f7f7f7;
  --secondary-menu-icon-color: #f7f7f7;
  --secondary-menu-icon-hover-color: #ffffff;
  --secondary-menu-font-weight: normal;
  --button-bg-color: #d4000f;
  --button-bg-color-hover: #e8102a;
  --button-link-color: #ffffff;
  --tab-hover-color: #fff;
  --scrollbar-bg-color: #555657;
  --scrollbar-bg-hover-color: #6a6b6c;
  --caption-color: #d4000f;
  --headline-font-color: #d4000f;
  --h1-color: #d4000f;
  --h2-color: #d4000f;
  --h3-color: #d4000f;
  --h4-color: #d4000f;
  --h5-color: #d4000f;
  --h6-color: #d4000f;
  --icon-color: #d4000f;
  --icon-color-hover: #e8102a;
  --icon-text-color: #d4000f;
  --calendar-bg-color: #3a3b3c;
  --calendar-eventablerow: #48494A;
  --calendar-border-color: #555657;
  --calendar-text-color: #f7f7f7;
  --today-bg-color: #d4000f;
  --today-border-color: #b0000c;
  --today-text-color: #ffffff;
  --logo-main-color: #d4000f;
  --logo-secondary-color: #1d1e1f;
  --logo-3rd-color: #48494A;
  --logo-4th-color: #d4000f;
  --logo-text-color: #d4000f;
  --logo-secondary-text-color: #1d1e1f;
  --color-bg-base: #505152;
  --color-bg-subtle: #3a3b3c;
  --color-bg-practice: rgba(59, 130, 246, 0.1);
  --color-bg-practice-alt: rgba(59, 130, 246, 0.15);
  --color-bg-injured: rgba(220, 38, 38, 0.1);
  --color-bg-injured-alt: rgba(220, 38, 38, 0.15);
  --color-border-practice: rgba(59, 130, 246, 0.3);
  --color-border-injured: rgba(220, 38, 38, 0.3);
  --header-icon-color: #666666;
  --header-icon-text-color: #eeeeee;
  --header-icon-hover-color: #dddddd;
  --logo-name-primary-color: #d4000f;
  --logo-name-secondary-color: #f7f7f7;
  --division-heading-color: #f7f7f7;
  --division-subheading-color: #d4000f;
  --division-border-color: #666666;
  --headline-font: "UFC Sans", sans-serif;
  --headline-font-weight: 500;
  --body-font: "UFC Sans", sans-serif;
  --body-font-weight: 400;
  --svg-text-font-size: 11px;
  --fs-leaguename: 29px;
  --fs-leaguename-dotus: 16px;
  --fs-leaguename-md: 55px;
  --fs-leaguename-lg: 42px;
  --fs-leaguename-secondary: 12px;
  --fs-leaguename-secondary-md: 13px;
  --fs-menu: 11px;
  --fs-menu-mobile-label: 15px;
  --fs-menu-mobile-link: 13px;
  --border-radius-sm: .25rem;
  --border-radius-default: .5rem;
  --border-radius-lg: 1rem;
  --border-radius-xl: 8rem;
  --hpm-header-bg: var(--alert-warning-bg);
  --hpm-header-border: var(--alert-warning-border);
  --hpm-header-color: var(--alert-warning-text);
  --hpm-body-bg: var(--alert-warning-bg);
  --hpm-body-border: var(--alert-warning-border);
  --hpm-body-color: var(--alert-warning-text);
  --live-scoring-highlight: var(--accent-color);
  --live-scoring-border: var(--dark-accent-color);
  --container-header-bg: var(--header-bg);
  --tab-text-color: #8a8a8a;
  --tab-active-text-color: #f7f7f7;
  --tab-active-indicator-color: var(--accent-color);
  --tab-separator-color: var(--border-color);
  --tab-hover-color: #fff;
}

The source code for these CSS files and the full project is on GitHub:
https://github.com/braven112/mfl.football.v2

Key files in the repo:
- src/assets/css/src/_variables-dark.scss — all CSS variable definitions with defaults
- src/assets/css/src/dark_main.scss — main dark theme SCSS (UFC Sans font)
- src/assets/css/src/dark_din_main.scss — dark theme variant (DIN font via Typekit)
- public/assets/css/dist/dark_main.css — compiled CSS file (what MFL loads)
- public/assets/css/dist/dark_din_main.css — compiled DIN variant
- public/assets/icons/sprite.svg — SVG icon sprite with 100+ symbols
- src/pages/theleague/icons.astro — icon gallery page with search/categories
- src/pages/theleague/css-customization.astro — this customization guide page

If you need to look up how a specific component is styled, check the SCSS partials in src/assets/css/src/ (e.g., _tables.scss, _buttons.scss, _mflmenu.scss). Each file uses the CSS variables defined above.

When I ask you to change something, generate ONLY a <style> block containing the overridden variables. Do not regenerate the entire stylesheet. Only include variables that are changing.

CSS Variable Reference

Every variable available for override, grouped by what it controls. Defaults shown are from dark_main.css (UFC font). The dark_din_main.css file uses identical values except for the font variables.

Common Examples

Rebrand accent from red to blue

<style>
:root {
  --accent-color: #2563eb;
  --dark-accent-color: #1d4ed8;
  --link-color-hover: #2563eb;
  --button-bg-color: #2563eb;
  --button-bg-color-hover: #3b82f6;
  --h1-color: #2563eb;
  --h2-color: #2563eb;
  --h3-color: #2563eb;
  --h4-color: #2563eb;
  --h5-color: #2563eb;
  --h6-color: #2563eb;
  --caption-color: #2563eb;
  --headline-font-color: #2563eb;
  --icon-color: #2563eb;
  --icon-color-hover: #3b82f6;
  --secondary-menu-border-color: #2563eb;
  --secondary-menu-bg-color: #1e3a5f;
  --today-bg-color: #2563eb;
  --logo-main-color: #2563eb;
  --logo-name-primary-color: #2563eb;
}
</style>

Switch to condensed font

The base CSS bundles both UFC Sans and UFC Sans Condensed. No extra font loading needed:

<style>
:root {
  --headline-font: "UFC Sans Condensed", sans-serif;
  --headline-font-weight: 700;
  --body-font: "UFC Sans Condensed", sans-serif;
  --body-font-weight: 400;
}
</style>

Custom Google Font for headings

<!-- Load the font first -->
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap" rel="stylesheet">

<style>
:root {
  --headline-font: "Oswald", sans-serif;
  --body-font: "Oswald", sans-serif;
}
</style>

Higher contrast tables

<style>
:root {
  --oddtablerow: #1a1a1a;
  --eventablerow: #2a2a2a;
  --table-header-color: #e0e0e0;
}
</style>

Softer / more rounded corners

<style>
:root {
  --border-radius-sm: .5rem;
  --border-radius-default: 1rem;
  --border-radius-lg: 1.5rem;
}
</style>

Accent-colored homepage messages

By default, homepage message boxes use the warning alert colors (amber). Override these to match your accent:

<style>
:root {
  --hpm-header-bg: rgba(212, 0, 15, 0.10);
  --hpm-header-border: rgba(212, 0, 15, 0.25);
  --hpm-header-color: #f7f7f7;
  --hpm-body-bg: rgba(212, 0, 15, 0.05);
  --hpm-body-border: rgba(212, 0, 15, 0.15);
  --hpm-body-color: #f7f7f7;
}
</style>

Custom live scoring highlight

The "currently playing" row in live scoring uses the accent color by default. Override it independently:

<style>
:root {
  --live-scoring-highlight: #2563eb;
  --live-scoring-border: #1d4ed8;
}
</style>

Using the SVG Icon Sprite

All icons are served from a single SVG sprite file containing 100+ symbols. Browse, search, and test colors in the Icon Gallery.

Display an icon

<svg class="icon-trophy">
  <use xlink:href="#icon-trophy"></use>
</svg>

Replace icon-trophy with any icon ID from the sprite. Check the gallery for available icons.

Controlling icon colors

Icons inherit fill from CSS variables:

Override a single icon inline:

<svg class="icon-trophy" style="fill: #dc2626;">
  <use xlink:href="#icon-trophy"></use>
</svg>

Adding New Icons

1. Get a clean SVG

Sources: Heroicons, Lucide, Feather Icons, SVG Repo, or ask Claude to generate one.

2. Convert to a <symbol>

Strip the outer <svg> wrapper and any fill attributes so the icon inherits the theme color:

<symbol id="icon-my-custom-icon" viewBox="0 0 24 24">
  <path d="M12 2L2 7v10l10 5 10-5V7L12 2z"/>
</symbol>

3. Add to the sprite file

Open public/assets/icons/sprite.svg and paste your <symbol> inside the root <svg> tag, before the closing </svg>.

Ask Claude to help

I need to add a new icon to my SVG sprite file. Here's the SVG:

[paste your SVG here]

Convert this into a <symbol> element with the id "icon-my-name".
Remove any fill attributes so it inherits the theme color.
Give me the <symbol> block to paste into sprite.svg.

After generating the symbol, automatically create a pull request on the GitHub repo (braven112/mfl.football.v2) that adds the new symbol to public/assets/icons/sprite.svg.

Submitting New Icons via Pull Request

To add icons to the shared sprite for everyone, submit a PR to the repository.

Steps

1. Clone the repo:

   git clone https://github.com/braven112/mfl.football.v2.git
   cd mfl.football.v2

2. Create a branch:

   git checkout -b add-icon-my-icon-name

3. Edit the sprite: Add your <symbol> to public/assets/icons/sprite.svg
4. (Optional) Update the gallery: In src/pages/theleague/icons.astro, add search synonyms and category tags so your icon shows up when people search.
5. Commit and push:

   git add public/assets/icons/sprite.svg
   git commit -m "Add icon-my-custom-icon to SVG sprite"
   git push -u origin add-icon-my-icon-name

6. Open the PR:

   gh pr create --title "Add icon-my-custom-icon" \
     --body "Adds a new icon for [description]."

   Or use the GitHub web interface.

Font Differences

Both files share identical CSS variables and component styles. The only difference is the font. If you override --headline-font and --body-font, you can use any font regardless of which base file you chose.

Available UFC font families

The dark_main.css file bundles two UFC font families. The default is UFC Sans (non-condensed), but you can switch to the condensed variant using CSS variables.

Switch to UFC Sans Condensed

To switch your league to the condensed font, add this to your Homepage Message:

<style>
:root {
  --headline-font: "UFC Sans Condensed", sans-serif;
  --headline-font-weight: 700;
  --body-font: "UFC Sans Condensed", sans-serif;
  --body-font-weight: 400;
}
</style>

Mix and match

You can use different families for headings and body text. For example, condensed bold headings with standard-width body text:

<style>
:root {
  --headline-font: "UFC Sans Condensed", sans-serif;
  --headline-font-weight: 700;
  --body-font: "UFC Sans", sans-serif;
  --body-font-weight: 400;
}
</style>

Tips & Gotchas

• Only override what you need. Don't copy all 80+ variables. The base stylesheet handles everything else.
• The accent color is everywhere. --accent-color drives headings, icons, buttons, sub-nav, calendar, and the logo. Changing it is the fastest way to rebrand. See the red rebrand example for all the related variables you should update together.
• Dark mode contrast. Your background is #121212. Use lighter colors for text and check contrast with a tool like WebAIM Contrast Checker.
• Test multiple MFL pages. MFL has rosters, standings, live scoring, draft pages, etc. Spot-check a few different pages after making changes.
• Specificity. Target :root in your style block — not a class or element selector. That's how the base CSS defines them and your override needs to match.
• Per-league overrides. Your Homepage Message applies only to the league where you added it. Different leagues can share the same base CSS file but have different overrides.