Skip to main content
King County Logo
Apr
18

STPR Department Page Footer

  1. Home
  2. Working with Design & Civic Engagement
  3. Sitecore
  4. Components
  5. Dept page footer

STPR Department Page Footer

If you are using a department footer, and it is not displaying correctly in the STPR, you can use the following code to update it. This will migrate correctly. Use only the elements that you need, the buttons and right column content are all optional, as needed. It's best to use a background image that is 850px wide. To see what the footer will look like in the STPR, check here (while on VPN): https://cm10-stage.kingcounty.gov/legacy/help//sitecore/components/page-footer.aspx

Sitecore Settings

Make sure your settings are applying the footer to the proper pages.

Add addon to parent page

Under settings, check 'Apply to children' to push addon to all children pages.

Also make sure 'BackgroundColor' is set to 'Transparent' for proper visual formatting.

King County Auditor's Office

County Auditor: Kymber Waltmunson
King County Courthouse
516 Third Avenue, Room W-1033
Seattle, WA 98104

Get directions
Contact Us

Follow @KCAuditor

Contact us

Phone 206-477-1033

TTY Relay: 711

Fax: 206-296-0159


The above example is a footer that will convert correctly in the STPR. See HTML tab for code.


<div class="row full-width-row">
  <div class="col-sm-8">
    <div class="dept-footer-image">
      <div class="image-container">
        <div class="image-canvas">
          <img src="https://kingcounty.gov/~/media/help/styleguide/images/dept-footer.ashx"/>
        </div>
        <div class="image-overlay">
          <h3>King County Auditor&apos;s Office</h3>
          <address>
            <p>County Auditor: Kymber Waltmunson<br/>
            King County Courthouse<br/>
            516 Third Avenue, Room W-1033<br/>
            Seattle, WA 98104</p>
          </address>
          <!-- Link to a King County building page or DELETE this button-->
          <a class="btn btn-primary" href="https://kingcounty.gov/about/contact-us/locations/Courthouse.aspx">
            <span class="fa fa-building-o"></span>
          </a>
          <!-- Link to a Google maps direction page (use building name, not address for the directions page) or DELETE this button-->
          <a class="btn btn-primary" href="https://goo.gl/maps/c8nxETmYAoKtue1f9">Get directions</a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <h5>Contact Us</h5>
    <div class="media">
      <div class="media-left">
        <span class="fa fa-twitter fa-color-default fa-2x"></span>
      </div>
      <div class="media-body">
        <p>Follow  <a href="#">@KCAuditor</a></p>
      </div>
    </div>
    <div class="media">
      <div class="media-left">
        <span class="fa fa-envelope fa-color-default fa-2x"></span>
      </div>
      <div class="media-body">
        <p><a href="#">Contact us</a></p>
      </div>
    </div>
    <div class="media">
      <div class="media-left">
        <span class="fa fa-phone fa-color-default fa-2x"></span>
      </div>
      <div class="media-body">
        <p>Phone  <a href="#">206-477-1033</a></p>
      </div>
    </div>
    <div class="media">
      <div class="media-left">
        <span class="fa fa-tty fa-color-default fa-2x"></span>
      </div>
      <div class="media-body">
        <p>TTY Relay: 711</p>
      </div>
    </div>
    <div class="media">
      <div class="media-left">
        <span class="fa fa-fax fa-color-default fa-2x"></span>
      </div>
      <div class="media-body">
        <p>Fax: 206-296-0159</p>
      </div>
    </div>
    
    <!-- Optional row of social media icons-->
    <ul class="list-inline list-unstyled remove-link-underline m-t-md dept-footer-social">
      <li> 
        <a href="#">
          <span class="fa-stack fa-2x">
             <i class="fa fa-square fa-stack-2x fa-inverse"></i>
             <i class="fa fa-facebook-square fa-stack-2x"></i>
          </span>
        </a>
      </li>
      <li> 
        <a href="#">
          <span class="fa-stack fa-2x">
             <i class="fa fa-square fa-stack-2x fa-inverse"></i>
             <i class="fa fa-twitter-square fa-stack-2x"></i>
          </span>
        </a>
      </li>
      <li> 
        <a href="#">
          <span class="fa-stack fa-2x">
             <i class="fa fa-square fa-stack-2x fa-inverse"></i>
             <i class="fa fa-youtube-square fa-stack-2x"></i>
          </span>
        </a>
      </li>
    </ul>
  </div>
</div>

No JavaScript needed for this example.

401 5th Ave., Suite 800, Seattle, WA 98104 Mobile app | Translated pages | About us | FAQs | Contact us

The above example is a minimal footer. This will convert correctly to the STPR. See HTML tab for additional notes.


<!-- .row . full-width-row are required for formating of row -->
<div class="row full-width-row">
  <div class="col-sm-12">
    <div class="call-out-text call-out-text-primary text-center"> 
      <!-- Your links beging here. Remember to use a pipe (|) to separate text/links. -->
      401 5th Ave., Suite 800, Seattle, WA 98104  
      <a href="#">Mobile app</a> |  
      <a href="#">Translated pages</a>  | 
      <a href="#">About us</a> |  
      <a href="#">FAQs </a> | 
      <a href="#">Contact us</a>
    </div>
  </div>
</div>

No JavaScript needed for this example.

expand_less