Skip to content

Header and Footer Customization

Andrew Buck edited this page Sep 20, 2016 · 3 revisions

At the top level of the GPV code file structure, there is a file called header.ascx. This file contains only one line of code:

<%@ Control Language="C#" ClassName="Header" %>

You can add your own HTML to include a logo or links to other web pages, such as the Falmouth search page, shown here:

<div class="header">
  <table id="headerContent" cellpadding="0" cellspacing="0">
    <tr>
      <td align="left">
        <a id="goToLink" href="http://gisdpw/search/search.aspx" target="Search">Return to Search</a>
      </td>
      <td align="left">
      <a href="http://www.falmouthmass.us/"><IMG SRC="images/custom/colorseal.jpg" WIDTH="150" HEIGHT="150" BORDER="0" title="Falmouth Town Seal" ALT="Town of Falmouth"></A>
      </td>
    </tr>
  </table>
  <script type="text/javascript" language="javascript">
    window.name = "GPV";
  </script>
</div>

Add the following style at the bottom of your customize.css stylesheet

.header {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 40px;
  right: 80px;
  float: left
}

Note: The above example adds the 'float: left' tag in the customize.css. This is required in the 5.0 version to keep your header from clobbering the Share, Help, Open Detail icons on the right hand side of the header line.

Optionally, you can add your image url directly to class by adding the css background property to the first line of your header class. Update the url value with the file name of your header image stored in the Images/Custom folder:

  background: #fff url('../Images/Custom/<<FileName.png>>') no-repeat 0% 0%;
Clone this wiki locally