Skip to content
Live
Menu
Theme

Template instructions

A responsive template for your MyFantasyLeague site. It uses Home Page Messages (HPMs) for the header, footer and homepage, so every page stays fast on a phone.

1. Before you start

Save any code you want to keep from your existing Home Page Messages, then delete them. Make sure none of them is already set as a header or footer — that interferes with the install.

Log in as commissioner and open the Commissioner Setup page. On a fresh site the HPMs are numbered: header is #1, footer #2, homepage #3.

2. Skin

On the Select a skin page, choose None.

3. CSS

Go to Images and Other URLs and paste one of these into the CSS URL field.

  • Dark https://v2.mfl.football/assets/css/dist/dark_main.css
  • Dark (DIN headings) https://v2.mfl.football/assets/css/dist/dark_din_main.css
  • Light — blue and green https://v2.mfl.football/assets/css/dist/roboto-blue-green.css

4. Homepage

Paste this into an HPM and label it homepage. It lays out the homepage and loads the script that shows the log-in button — without it, owners can’t log in. 

<div class="row">
  <div class="col-md-4 col-md-push-8">
    <div class="utility-nav">
      <div class="utility-nav--button">
        <a href="//%HOST%/%YEAR%/options?L=%LEAGUEID%&O=133">
          <svg class="icon-exchange" aria-hidden="true" focusable="false"><use xlink:href="#icon-exchange"></use></svg>
          <div class="svg-text">Trade Block</div>
        </a>
      </div>
      <div class="utility-nav--button">
        <a href="//%HOST%/%YEAR%/options?L=%LEAGUEID%&O=09">
          <svg class="icon-file-text" aria-hidden="true" focusable="false"><use xlink:href="#icon-file-text"></use></svg>
          <div class="svg-text">Rules</div>
        </a>
      </div>
      <div id="loginlink" class="utility-nav--button loginbutton">
        <svg class="icon-sign-in" aria-hidden="true" focusable="false"><use xlink:href="#icon-sign-in"></use></svg>
        <div class="svg-text"></div>
      </div>
    </div>
    <module name="TRADES" />
    <module name="LEAGUE_CHAT" COUNT="20" />
    <div class="hidden-xs hidden-sm">
      <module name="OWNER_ACTIVITY" />
      <module name="MY_NEWS" COUNT="10" />
      <module name="NEXT_WEEKS_FANTASY_SCHEDULE" />
    </div>
  </div>
  <div class="col-md-8 col-md-pull-4">
    <div class="mobile-standings-wrapper hidden-xs">
      <module name="STANDINGS" UNIT="DIVISION00" />
      <module name="STANDINGS" UNIT="DIVISION01" />
    </div>
    <div class="visible-xs visible-sm">
      <module name="BRIEF_STANDINGS" />
    </div>
    <module name="MESSAGE_BOARD_SUMMARY" COUNT="10" />
    <module name="POWER_RANK" DISPLAY="LEAGUE" />
    <div class="hidden-calendar">
      <module name="MONTHLY_CALENDAR" />
    </div>
    <div class="visible-xs visible-sm">
      <module name="MY_NEWS" COUNT="10" />
    </div>
    <module name="TOP_PERFORMERS" />
    <div class="visible-xs visible-sm">
      <module name="NEXT_WEEKS_FANTASY_SCHEDULE" />
      <module name="OWNER_ACTIVITY" />
    </div>
  </div>
</div>
<script src="https://mfl.football/assets/js/homepage.js"></script>

5. Header

Paste this into an HPM, label it header, and set it to show in the header of all league pages.

Replace YOUR-LOGO-URL, YOUR-WORDMARK-URL and YOUR LEAGUE NAME with your own. Everything written as %HOST%, %YEAR% or %LEAGUEID% is filled in by MFL, so the links follow your league from year to year — leave those as they are.

Keep the jQuery line. MFL’s own page scripts rely on it to hide the left menu, open popups and build homepage tabs, and MFL doesn’t load it for you. 

<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- jQuery must stay: MFL's own page scripts use $ to hide the left menu, run popups and build homepage tabs. -->
<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>

<div id="mfl-template-sprite" aria-hidden="true" style="position:absolute;width:0;height:0;overflow:hidden;"></div>
<script>
fetch('https://v2.mfl.football/assets/icons/sprite.svg')
  .then(function (r) { return r.ok ? r.text() : ''; })
  .then(function (svg) {
    document.getElementById('mfl-template-sprite').innerHTML = svg.replace('style="display: none;"', '');
  })
  .catch(function () {});
</script>

<div class="container-header">
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-lg-5 league_logo-wrapper">
        <a href="%STATICHOST%/%YEAR%/home/%LEAGUEID%">
          <div class="league_logo" id="league_logo">
            <img src="YOUR-LOGO-URL" alt="YOUR LEAGUE NAME" />
          </div>
          <div class="leaguename">
            <img src="YOUR-WORDMARK-URL" width="200" alt="YOUR LEAGUE NAME" />
          </div>
        </a>
        <div class="clearfix visible-xs-block visible-sm-block visible-md-block"></div>
      </div>
      <!-- column -->
      <div class="col-md-6 col-lg-7">
        <div class="nav_wrapper">
          <div class="nav_buttons" id="nav_buttons">
            <div class="nav_button--button">
              <a href="//%HOST%/%YEAR%/options?L=%LEAGUEID%&O=07">
                <svg class="icon-helmet-2" aria-hidden="true" focusable="false"><use xlink:href="#icon-helmet-2"></use></svg>
                <div class="svg-text">Roster</div>
              </a>
            </div>
            <div class="nav_button--button">
              <a href="//%HOST%/%YEAR%/options?L=%LEAGUEID%&O=02">
                <svg class="icon-lineup" aria-hidden="true" focusable="false"><use xlink:href="#icon-lineup"></use></svg>
                <div class="svg-text">Submit lineup</div>
              </a>
            </div>
            <div class="nav_button--button">
              <a href="//%HOST%/%YEAR%/add_drop?L=%LEAGUEID%">
                <svg class="icon-plus" aria-hidden="true" focusable="false"><use xlink:href="#icon-plus"></use></svg>
                <div class="svg-text">Free Agents</div>
              </a>
            </div>
            <div class="nav_button--button">
              <a href="//%HOST%/%YEAR%/standings?L=%LEAGUEID%">
                <svg class="icon-shield" aria-hidden="true" focusable="false"><use xlink:href="#icon-shield"></use></svg>
                <div class="svg-text">Standings</div>
              </a>
            </div>
            <div class="nav_button--button">
              <a href="//%HOST%/%YEAR%/ajax_ls?L=%LEAGUEID%">
                <svg class="icon-goals" aria-hidden="true" focusable="false"><use xlink:href="#icon-goals"></use></svg>
                <div class="svg-text">Live scoring</div>
              </a>
            </div>
            <div class="nav_button--button hidden-md playoffs">
              <a href="//%HOST%/%YEAR%/options?L=%LEAGUEID%&O=79">
                <svg class="icon-trophy" aria-hidden="true" focusable="false"><use xlink:href="#icon-trophy"></use></svg>
                <div class="svg-text">Playoffs</div>
              </a>
            </div>
            <div class="nav_button--button hidden-md prePlayoffs">
              <a href="//%HOST%/%YEAR%/standings?L=%LEAGUEID%">
                <svg class="icon-champ" aria-hidden="true" focusable="false"><use xlink:href="#icon-champ"></use></svg>
                <div class="svg-text">Playoffs</div>
              </a>
            </div>
          </div>
        </div>
      </div>
      <!-- column -->
    </div>
    <!-- row -->
  </div>
  <!-- container -->
</div>
<!-- container-header -->
<div class="mobile-scroll-wrapper">
  <div class="container page-wrapper" id="contentframe">

6. Footer

Paste this into an HPM, label it footer, and check footer of all league pages. Its first two lines close the wrappers the header opens, so use the two together.

Replace the champion link and icon and YOUR-CONSTITUTION-URL, or delete the lines you don’t need. 

  </div><!-- /.page-wrapper -->
</div><!-- /.mobile-scroll-wrapper -->
<div class="container-footer">
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <div class="defending-champ">Defending League Champions
          <!-- Replace with your champion's franchise link and icon, or delete this block. -->
          <a href="YOUR-CHAMPION-FRANCHISE-URL"><img style="vertical-align:middle" src="YOUR-CHAMPION-ICON-URL" alt="CHAMPION TEAM NAME" width="300" height="50" class="franchiseicon"></a>
        </div>
      </div>
      <div class="col-sm-8">
        <div class="row">
          <div class="col-sm-3">
            <ul>
              <li>Rules</li>
              <li><a href="YOUR-CONSTITUTION-URL">Constitution</a></li>
              <li><a href="https://%HOST%/%YEAR%/options?L=%LEAGUEID%&O=09">League Scoring</a></li>
            </ul>
          </div>
          <div class="col-sm-3">
            <ul>
              <li>Team Management</li>
              <li><a href="https://%HOST%/%YEAR%/options?L=%LEAGUEID%&O=02">Submit lineup</a></li>
              <li><a href="https://%HOST%/%YEAR%/add_drop?L=%LEAGUEID%">Add/drop</a></li>
              <li><a href="https://%HOST%/%YEAR%/options?L=%LEAGUEID%&O=98">Practice squad</a></li>
              <li><a href="https://%HOST%/%YEAR%/options?L=%LEAGUEID%&O=18">Injured reserve</a></li>
            </ul>
          </div>
          <div class="col-sm-3">
            <ul>
              <li>League</li>
              <li><a href="https://%HOST%/%YEAR%/options?L=%LEAGUEID%&O=07">Rosters</a></li>
              <li><a href="https://%HOST%/%YEAR%/standings?L=%LEAGUEID%">Standings</a></li>
              <li><a href="https://%HOST%/%YEAR%/options?L=%LEAGUEID%&O=101">Rankings</a></li>
              <li><a href="https://%HOST%/%YEAR%/options?L=%LEAGUEID%&O=15">Schedule</a></li>
            </ul>
          </div>
          <div class="col-sm-3">
            <ul>
              <li>News</li>
              <li><a href="https://%HOST%/%YEAR%/news_articles?MYNEWS=1&L=%LEAGUEID%">My Player News</a></li>
              <li><a href="https://%HOST%/%YEAR%/top?L=%LEAGUEID%&SEARCHTYPE=ADVANCED&COUNT=30&CATEGORY=freeagent&POSITION=*&DISPLAY=points&TEAM=*">Free Agents</a></li>
              <li><a href="https://%HOST%/%YEAR%/options?L=%LEAGUEID%&O=17">%YEAR% Draft</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
(function () {
  function init() {
    // make submit lineup simpler
    document.querySelectorAll('#body_options_02 .reportnavigation').forEach(function (el) {
      if (el.textContent.indexOf('Looking for lineup advice?') !== -1) el.remove();
    });
    // highlight ending auctions
    document.querySelectorAll('#body_options_43 td .warning').forEach(function (el) {
      var row = el.parentElement && el.parentElement.parentElement;
      if (row) row.classList.add('auction-warning');
    });
  }
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();
</script>

7. Tabs and modules

On the Homepage Modules and Tabs setup page, remove every module and tab. Only the main tab remains.

On that same page, add one column at 100% and place the homepage HPM in it. Don’t add other modules there — add them inside the homepage HPM instead, with a line like <module name="LEAGUE_CHAT" />.

8. Icons

To swap a nav icon, change the name in xlink:href="#icon-…" (and the matching class) to any of these.