Tweaks

Reusable chrome

Header & footer template.

The standard top and bottom for every Tristar web page and SharePoint page — full-color logo, contact top-bar, primary nav, and a complete footer. Below: a live demo, then copy-paste code for a website and for SharePoint's Embed web part.

▾ Live demo
📍 8 East-Tennessee locations 📞 (423) 317-7772
Pay Bill Book Appointment
Refer a Patient
↑ Header  ·  your page content goes here  ·  Footer ↓

1 · For a website (HTML)

Paste the header right after <body> and the footer right before </body>. The styles above live in site.css — link it in your <head>. Swap the # links for your real page URLs and set the matching nav item to class="navitem active".

<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="site.css">

<!-- HEADER -->
<header class="site-header">
  <div class="topbar"><div class="wrap">
    <div class="left">
      <a href="#locations">📍 8 East-Tennessee locations</a>
      <a href="tel:14233177772">📞 (423) 317-7772</a>
    </div>
    <div class="right">
      <a class="pay" href="PAY_URL">Pay Bill</a>
      <a class="book" href="BOOK_URL">Book Appointment</a>
    </div>
  </div></div>
  <div class="wrap header-main">
    <a class="brand" href="/"><img src="assets/logo-primary-full-color.png" alt="Tristar Physical Therapy"></a>
    <nav class="primary-nav">
      <div class="navitem active"><a href="/">Home</a></div>
      <div class="navitem"><a href="/services">Services</a></div>
      <div class="navitem"><a href="/conditions">Conditions</a></div>
      <div class="navitem"><a href="/locations">Locations</a></div>
      <div class="navitem"><a href="/about">About</a></div>
      <div class="navitem"><a href="/careers">Careers</a></div>
      <div class="navitem"><a href="/contact">Contact</a></div>
    </nav>
    <div class="header-cta"><a class="btn btn-primary" href="/refer">Refer a Patient</a></div>
  </div>
</header>

<!-- ... your page content ... -->

<!-- FOOTER -->
<footer class="site-footer"> ... (see live demo above) ... </footer>

2 · For SharePoint

SharePoint won't render a raw HTML file inline, so host this page (see the SharePoint Guide) and drop its URL into an Embed web part — or, for a header strip only, paste the snippet below into an Embed web part at the top of the page.

Tip: for a consistent banner across many SharePoint pages, host one header.html and embed it by URL at the top of each page — update it once, and every page updates.
<iframe
  src="https://YOUR-HOST/header.html"
  width="100%" height="124" style="border:0;"
  title="Tristar header"></iframe>