From 74d9b9e8a43975cf8c2785c27a1b4c4625b81aa0 Mon Sep 17 00:00:00 2001
From: haileyajohnson <hailey.johnson@ufl.edu>
Date: Mon, 18 Jun 2018 11:26:31 -0600
Subject: [PATCH] add standard header/footer; separate ncss and common
 fragments

---
 .../CatalogViewContextParser.java             |  34 +++--
 .../webapp/WEB-INF/templates/catalog.html     |  14 +-
 .../WEB-INF/templates/commonFragments.html    | 115 ++-------------
 .../webapp/WEB-INF/templates/dataset.html     |  14 +-
 .../WEB-INF/templates/ncssFragments.html      | 138 ++++++++++++++++++
 .../webapp/WEB-INF/templates/ncssGrid.html    |  18 +--
 .../WEB-INF/templates/ncssGridAsPoint.html    |  16 +-
 .../webapp/WEB-INF/templates/ncssPoint.html   |  16 +-
 .../webapp/WEB-INF/templates/ncssStation.html |  18 +--
 tds/src/main/webapp/tds.css                   |  26 ++++
 10 files changed, 237 insertions(+), 172 deletions(-)
 create mode 100644 tds/src/main/webapp/WEB-INF/templates/ncssFragments.html

diff --git a/tds/src/main/java/thredds/server/catalogservice/CatalogViewContextParser.java b/tds/src/main/java/thredds/server/catalogservice/CatalogViewContextParser.java
index 4adfd56c5e..b43746f0e9 100644
--- a/tds/src/main/java/thredds/server/catalogservice/CatalogViewContextParser.java
+++ b/tds/src/main/java/thredds/server/catalogservice/CatalogViewContextParser.java
@@ -39,13 +39,7 @@ public class CatalogViewContextParser {
 
   public Map<String, Object> getCatalogViewContext(Catalog cat, boolean isLocalCatalog) {
     Map<String, Object> model = new HashMap<>();
-    String googleTrackingCode = htmlConfig.getGoogleTrackingCode();
-    if (googleTrackingCode.isEmpty()) googleTrackingCode = null;
-    model.put("googleTracking", googleTrackingCode);
-
-    model.put("serverName", serverInfo.getName());
-    model.put("logoUrl", serverInfo.getLogoUrl());
-    model.put("logoAlt", serverInfo.getLogoAltText());
+    addBaseContext(model);
 
     List<CatalogItemContext> catalogItems = new ArrayList<>();
     addCatalogItems(cat, catalogItems, isLocalCatalog, 0);
@@ -56,8 +50,20 @@ public Map<String, Object> getCatalogViewContext(Catalog cat, boolean isLocalCat
   public  Map<String, Object> getDatasetViewContext(Dataset ds, HttpServletRequest req, boolean isLocalCatalog)
   {
     Map<String, Object> model = new HashMap<>();
+    addBaseContext(model);
 
-    model.put("googleTracking", htmlConfig.getGoogleTrackingCode());
+    DatasetContext context = new DatasetContext(ds, isLocalCatalog);
+    populateDatasetContext(ds, context, req, isLocalCatalog);
+
+    model.put("dataset", context);
+
+    return model;
+  }
+
+  private void addBaseContext(Map<String, Object> model) {
+    String googleTrackingCode = htmlConfig.getGoogleTrackingCode();
+    if (googleTrackingCode.isEmpty()) googleTrackingCode = null;
+    model.put("googleTracking", googleTrackingCode);
     model.put("serverName", serverInfo.getName());
     model.put("logoUrl", serverInfo.getLogoUrl());
     model.put("logoAlt", serverInfo.getLogoAltText());
@@ -65,13 +71,11 @@ public  Map<String, Object> getDatasetViewContext(Dataset ds, HttpServletRequest
     model.put("installUrl", htmlConfig.getInstallUrl());
     model.put("webappName", htmlConfig.getWebappName());
     model.put("webappUrl", htmlConfig.getWebappUrl());
-
-    DatasetContext context = new DatasetContext(ds, isLocalCatalog);
-    populateDatasetContext(ds, context, req, isLocalCatalog);
-
-    model.put("dataset", context);
-
-    return model;
+    model.put("webappVersion", htmlConfig.getWebappVersion());
+    model.put("webappBuildTimestamp", htmlConfig.getWebappVersionBuildDate());
+    model.put("webbappDocsUrl", htmlConfig.getWebappDocsUrl());
+    model.put("hostInst", htmlConfig.getHostInstName());
+    model.put("hostInstUrl", htmlConfig.getHostInstUrl());
   }
 
   protected void addCatalogItems(DatasetNode cat, List<CatalogItemContext> catalogItems, boolean isLocalCatalog, int level)
diff --git a/tds/src/main/webapp/WEB-INF/templates/catalog.html b/tds/src/main/webapp/WEB-INF/templates/catalog.html
index 11fac9b5ac..0bc6c39406 100644
--- a/tds/src/main/webapp/WEB-INF/templates/catalog.html
+++ b/tds/src/main/webapp/WEB-INF/templates/catalog.html
@@ -4,7 +4,7 @@
 <!--/* Replace this "head" element with the one in commonFragments. Pass the "title" element below to the fragment. */-->
 <head th:replace="templates/commonFragments :: head(~{::title}, ~{::script}, ~{::link})">
     <title>TDS Catalog</title>
-    <link rel="stylesheet" href="/thredds/tdsCat.css" type="text/css">
+    <link rel="stylesheet" href="/thredds/tds.css" type="text/css">
     <!-- Google Analytics -->
     <script th:if="${googleTracking != null}" type="text/javascript" th:inline="javascript">
         (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
@@ -19,12 +19,10 @@
 </head>
 
 <body>
-    <img th:src="${logoUrl}" th:alt="${logoAlt}" align="left" valign="top">
-    <h1 th:text="${serverName}"/>
 
-    <hr size="1" noshade="noshade">
+        <div th:replace="~{templates/datasetFragments :: catalogHeader}"/>
 
-    <table width="100%" cellspacing="0" cellpadding="5" align="center">
+        <table width="100%" cellspacing="0" cellpadding="5" align="center">
         <tbody>
 
             <tr>
@@ -48,11 +46,7 @@ <h1 th:text="${serverName}"/>
         </tbody>
     </table>
 
-    <hr size="1" noshade="noshade">
-
-    <h3><a href="/thredds/catalog.html">Initial TDS Installation (please change threddsConfig.xml)</a> at <a href="http://www.my.site/">My Group</a> see <a href="/thredds/info/serverInfo.html"> Info </a><br>
-    THREDDS Data Server [Version $projectVersion - $buildTimestamp] <a href="http://www.unidata.ucar.edu/software/thredds/current/tds/reference/index.html"> Documentation</a>
-    </h3>
+    <div th:replace="~{templates/datasetFragments :: catalogFooter}"/>
 
 </body>
 </html>
\ No newline at end of file
diff --git a/tds/src/main/webapp/WEB-INF/templates/commonFragments.html b/tds/src/main/webapp/WEB-INF/templates/commonFragments.html
index 8bb475389a..955c18486f 100644
--- a/tds/src/main/webapp/WEB-INF/templates/commonFragments.html
+++ b/tds/src/main/webapp/WEB-INF/templates/commonFragments.html
@@ -18,6 +18,7 @@
 </head>
 
 <body>
+
     <div class="header" th:fragment="header(titleText, switchLinks)">
       <div class="pageTitle">
         <h1 th:text="${titleText}">NetCDF Subset Service</h1>
@@ -37,115 +38,23 @@ <h4 th:replace="${switchLinks}">Switch to alternate request type.</h4>
       </div>
     </div>
 
-    <div class="dataset" th:fragment="dataset(datasetDesc)">
-      <h2>
-        <!-- Don't allow line break to occur between "Dataset:" label and the path. -->
-        Dataset:&nbsp;<span id="datasetPath" class="black" th:text="${datasetPath}">
-            /thredds/ncss/some/dataset/path
-        </span>
-      </h2>
-      <!--/* ncssStation.html is the only template that will override this default elem. */-->
-      <h4 th:replace="${datasetDesc}">(<a href="dataset.xml">Dataset Description</a>)</h4>
-    </div>
-
-    <!--/********************************** Sidebar fragments **********************************/-->
-
-    <div id="map" th:fragment="map"> <!-- This div is where we install the OpenLayers.Map in initMap(). --> </div>
-
-        <div id="latLonSubset" class="tabPane sidebarInput" th:fragment="latLonSubset">
-          <h5>Bounding box (in decimal degrees)</h5>
-
-          <div class="boundingBoxGrid">
-            <label class="topLabel" for="north">North</label>
-            <input class="topBox" type="text" name="north" id="north" required />
-
-            <label class="leftLabel" for="west">West</label>
-            <input class="leftBox" type="text" name="west" id="west" required />
-
-            <label class="rightLabel" for="east">East</label>
-            <input class="rightBox" type="text" name="east" id="east" required />
-
-            <label class="bottomLabel" for="south">South</label>
-            <input class="bottomBox" type="text" name="south" id="south" required />
-          </div>
 
-          <div th:replace=":: resetButtonContainer(fullLatLonExt)" />
-        </div>
-
-        <div id="pointSubset" class="tabPane sidebarInput" th:fragment="pointSubset">
-          <h5>Nearest to location (in decimal degrees)</h5>
-
-          <div class="verticalInputBoxesGrid vibg_2boxes">
-            <label class="vibg_label1" for="latitude">Latitude:</label>
-            <input class="vibg_box1" type="text" name="latitude" id="latitude" size="10" required/>
-
-            <label class="vibg_label2" for="longitude">Longitude:</label>
-            <input class="vibg_box2" type="text" name="longitude" id="longitude" size="10" required/>
-          </div>
-        </div>
-
-      <div id="timeSubsetInput" th:fragment="timeSubsetInput">
-        <div class="tabContainer">
-          <button type="button" onclick="selectTab(timeRangeSubset, this)" class="defaultButton">Time range</button>
-
-          <button type="button" onclick="selectTab(singleTimeSubset, this)">Single time</button>
-        </div>
-
-        <div id="timeRangeSubset" class="tabPane sidebarInput">
-          <div class="verticalInputBoxesGrid vibg_3boxes">
-            <label class="vibg_label1" for="time_start">Start:</label>
-            <input class="vibg_box1" type="text" name="time_start" id="time_start" size="27" required />
-
-            <label class="vibg_label2" for="time_end">End:</label>
-            <input class="vibg_box2" type="text" name="time_end" id="time_end" size="27" required />
-
-            <label class="vibg_label3" for="timeStride">Stride:</label>
-            <input class="vibg_box3" type="text" name="timeStride" id="timeStride" size="10" value="1" required />
-          </div>
-
-          <div th:replace=":: resetButtonContainer(fullTimeExt)" />
-        </div>
-
-        <div id="singleTimeSubset" class="tabPane sidebarInput">
-          <label for="time">Time:</label>
-          <input type="text" name="time" id="time" size="27" required />
-        </div>
-      </div>
-
-      <div id="outputFormatInput" class="sidebarInput" th:fragment="outputFormatInput">
-        <label for="accept">Format:</label>
-
-        <select id="accept" name="accept" size="1">
-          <option th:each="opt : ${accept}" th:value="${opt}" th:text="${opt}">format</option>
-        </select>
+    <div th:fragment="header">
+      <div class="header">
+        <div class="header-logo"><img th:src="${logoUrl}" th:alt="${logoAlt}"></div>
+        <div class="header-info"><h3><strong><a class="static" th:href="${webappUrl}" th:text="${webappName}"></a></strong></h3>
+          <h3><strong><a class="static" th:href="${installUrl}" th:text="${installName}"></a></strong></h3></div>
       </div>
-
-          <div class="resetButtonContainer" th:fragment="resetButtonContainer(inputsMap)">
-            <button type="button" class="resetButton" th:onclick="|setInputValues(${inputsMap})|">
-              Reset to full extension
-            </button>
-          </div>
-
-    <!--/***************************************************************************************/-->
-
-    <div class="requestBuilder" th:fragment="requestBuilder">
-      <h3>NCSS request URL:</h3>
-      <pre id="urlBuilder">THIS WILL BE REPLACED BY buildAccessUrl().</pre>
     </div>
 
-    <div class="buttons" th:fragment="buttons">
-      <button type="submit">Submit</button>
-      <button type="button" onclick="resetForm()">Reset</button>
-    </div>
 
-    <div class="footer" th:fragment="footer">
-      <h3>
-        <a href="http://www.unidata.ucar.edu/software/thredds/current/tds/reference/services/NetcdfSubsetServiceReference.html">
-          NetCDF Subset Service Documentation
-        </a>
-      </h3>
+    <div th:fragment="footer">
+      <div class="footer-buffer"></div>
+      <div class="footer">
+        <h4><a class="static" th:href="${installUrl}" th:text="${installName}"></a> at <a class="static" th:href="${hostInstUrl}" th:text="${hostInst}"></a> see <a class="static" href="/thredds/info/serverInfo.html"> Info </a></h4>
+        <h4><th:block th:text="${webappName} + ' [Version ' + ${webappVersion} + ' - ' + ${webappBuildTimestamp} + ']'"/><a class="static" th:href="${webbappDocsUrl}"> Documentation</a></h4>
+      </div>
     </div>
-</body>
 
 </body>
 </html>
diff --git a/tds/src/main/webapp/WEB-INF/templates/dataset.html b/tds/src/main/webapp/WEB-INF/templates/dataset.html
index d95eda49fe..6768fbca87 100644
--- a/tds/src/main/webapp/WEB-INF/templates/dataset.html
+++ b/tds/src/main/webapp/WEB-INF/templates/dataset.html
@@ -12,15 +12,8 @@
 
 <body>
 
-    <!-- TODO: Make common header -->
-    <table width="100%">
-        <tbody><tr><td>
-            <img th:src="${logoUrl}" th:alt="${logoAlt}" align="left" valign="top" hspace="10" vspace="2">
-            <h3><strong><a th:href="${installUrl}" th:text="${installName}">THREDDS-DEV Data Server</a></strong></h3>
-            <h3><strong><a th:href="${webappUrl}" th:text="${webappName}">THREDDS Data Server</a></strong></h3>
-        </td></tr>
-        </tbody>
-    </table>
+
+    <div th:replace="~{templates/datasetFragments :: catalogHeader}"/>
 
     <h2 th:text="'Catalog ' + ${dataset.getCatUrl()}"></h2>
     <h2 th:text="'Dataset: ' + ${dataset.getName()}"></h2>
@@ -53,6 +46,7 @@ <h2 th:text="'Dataset: ' + ${dataset.getName()}"></h2>
 
     <div th:replace="${dataset.getViewerLinks().size() > 0} ? ~{templates/datasetFragments :: viewers} : ~{}"/>
 
-<!--TODO: make common footer -->
+    <div th:replace="~{templates/datasetFragments :: catalogFooter}"/>
+
 </body>
 </html>
\ No newline at end of file
diff --git a/tds/src/main/webapp/WEB-INF/templates/ncssFragments.html b/tds/src/main/webapp/WEB-INF/templates/ncssFragments.html
new file mode 100644
index 0000000000..1f8be938f3
--- /dev/null
+++ b/tds/src/main/webapp/WEB-INF/templates/ncssFragments.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
+
+<!--/* The indentation of the fragments below matches the indentation of the elements that they will replace in the
+       target templates. Do not normalize it, or else the generated HTML won't be pretty any more. */-->
+
+<body>
+<div class="header" th:fragment="header(titleText, switchLinks)">
+    <div class="pageTitle">
+        <h1 th:text="${titleText}">NetCDF Subset Service</h1>
+        <h4 th:replace="${switchLinks}">Switch to alternate request type.</h4>
+    </div>
+
+    <div class="unidata">
+        <div class="appTitle">
+            <img src="https://www.unidata.ucar.edu/img/v3/logos/uniTitle.png">
+            <div>
+                <span class="bold">THREDDS Data Server</span>
+                <span class="service">NetCDF Subset Service</span>
+            </div>
+        </div>
+
+        <img src="https://www.unidata.ucar.edu/img/v3/logos/uniLogo.png">
+    </div>
+</div>
+
+<div class="dataset" th:fragment="dataset(datasetDesc)">
+    <h2>
+        <!-- Don't allow line break to occur between "Dataset:" label and the path. -->
+        Dataset:&nbsp;<span id="datasetPath" class="black" th:text="${datasetPath}">
+            /thredds/ncss/some/dataset/path
+        </span>
+    </h2>
+    <!--/* ncssStation.html is the only template that will override this default elem. */-->
+    <h4 th:replace="${datasetDesc}">(<a href="dataset.xml">Dataset Description</a>)</h4>
+</div>
+
+<!--/********************************** Sidebar fragments **********************************/-->
+
+<div id="map" th:fragment="map"> <!-- This div is where we install the OpenLayers.Map in initMap(). --> </div>
+
+<div id="latLonSubset" class="tabPane sidebarInput" th:fragment="latLonSubset">
+    <h5>Bounding box (in decimal degrees)</h5>
+
+    <div class="boundingBoxGrid">
+        <label class="topLabel" for="north">North</label>
+        <input class="topBox" type="text" name="north" id="north" required />
+
+        <label class="leftLabel" for="west">West</label>
+        <input class="leftBox" type="text" name="west" id="west" required />
+
+        <label class="rightLabel" for="east">East</label>
+        <input class="rightBox" type="text" name="east" id="east" required />
+
+        <label class="bottomLabel" for="south">South</label>
+        <input class="bottomBox" type="text" name="south" id="south" required />
+    </div>
+
+    <div th:replace=":: resetButtonContainer(fullLatLonExt)" />
+</div>
+
+<div id="pointSubset" class="tabPane sidebarInput" th:fragment="pointSubset">
+    <h5>Nearest to location (in decimal degrees)</h5>
+
+    <div class="verticalInputBoxesGrid vibg_2boxes">
+        <label class="vibg_label1" for="latitude">Latitude:</label>
+        <input class="vibg_box1" type="text" name="latitude" id="latitude" size="10" required/>
+
+        <label class="vibg_label2" for="longitude">Longitude:</label>
+        <input class="vibg_box2" type="text" name="longitude" id="longitude" size="10" required/>
+    </div>
+</div>
+
+<div id="timeSubsetInput" th:fragment="timeSubsetInput">
+    <div class="tabContainer">
+        <button type="button" onclick="selectTab(timeRangeSubset, this)" class="defaultButton">Time range</button>
+
+        <button type="button" onclick="selectTab(singleTimeSubset, this)">Single time</button>
+    </div>
+
+    <div id="timeRangeSubset" class="tabPane sidebarInput">
+        <div class="verticalInputBoxesGrid vibg_3boxes">
+            <label class="vibg_label1" for="time_start">Start:</label>
+            <input class="vibg_box1" type="text" name="time_start" id="time_start" size="27" required />
+
+            <label class="vibg_label2" for="time_end">End:</label>
+            <input class="vibg_box2" type="text" name="time_end" id="time_end" size="27" required />
+
+            <label class="vibg_label3" for="timeStride">Stride:</label>
+            <input class="vibg_box3" type="text" name="timeStride" id="timeStride" size="10" value="1" required />
+        </div>
+
+        <div th:replace=":: resetButtonContainer(fullTimeExt)" />
+    </div>
+
+    <div id="singleTimeSubset" class="tabPane sidebarInput">
+        <label for="time">Time:</label>
+        <input type="text" name="time" id="time" size="27" required />
+    </div>
+</div>
+
+<div id="outputFormatInput" class="sidebarInput" th:fragment="outputFormatInput">
+    <label for="accept">Format:</label>
+
+    <select id="accept" name="accept" size="1">
+        <option th:each="opt : ${accept}" th:value="${opt}" th:text="${opt}">format</option>
+    </select>
+</div>
+
+<div class="resetButtonContainer" th:fragment="resetButtonContainer(inputsMap)">
+    <button type="button" class="resetButton" th:onclick="|setInputValues(${inputsMap})|">
+        Reset to full extension
+    </button>
+</div>
+
+<!--/***************************************************************************************/-->
+
+<div class="requestBuilder" th:fragment="requestBuilder">
+    <h3>NCSS request URL:</h3>
+    <pre id="urlBuilder">THIS WILL BE REPLACED BY buildAccessUrl().</pre>
+</div>
+
+<div class="buttons" th:fragment="buttons">
+    <button type="submit">Submit</button>
+    <button type="button" onclick="resetForm()">Reset</button>
+</div>
+
+<div class="footer" th:fragment="footer">
+    <h3>
+        <a href="http://www.unidata.ucar.edu/software/thredds/current/tds/reference/services/NetcdfSubsetServiceReference.html">
+            NetCDF Subset Service Documentation
+        </a>
+    </h3>
+</div>
+</body>
+
+</body>
+</html>
diff --git a/tds/src/main/webapp/WEB-INF/templates/ncssGrid.html b/tds/src/main/webapp/WEB-INF/templates/ncssGrid.html
index cc3d92b0a9..b373aab36d 100644
--- a/tds/src/main/webapp/WEB-INF/templates/ncssGrid.html
+++ b/tds/src/main/webapp/WEB-INF/templates/ncssGrid.html
@@ -19,14 +19,14 @@ <h4>(<a href="ncssGridAsPoint.html" th:href="@{pointDataset.html}">Switch to Gri
 
     <!--/* Use the no-operation token to cause the fragment to use its existing value for the dataset description elem.
            See http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#using-the-no-operation-token. */-->
-    <div class="dataset" th:replace="templates/commonFragments :: dataset(_)" />
+    <div class="dataset" th:replace="templates/ncssFragments :: dataset(_)" />
 
     <div class="main" th:replace="templates/gridFragments :: main" />
 
     <div class="sidebar">
       <h3>Horizontal extent:</h3>
 
-      <div th:replace="templates/commonFragments :: map" />
+      <div th:replace="templates/ncssFragments :: map" />
 
       <h3>Horizontal subset:</h3>
 
@@ -38,7 +38,7 @@ <h3>Horizontal subset:</h3>
                   th:if="${gcd.horizCoordSys.isProjection()}">Proj X/Y box</button>
         </div>
 
-        <div th:replace="templates/commonFragments :: latLonSubset" />
+        <div th:replace="templates/ncssFragments :: latLonSubset" />
 
         <div id="coordinateSubset" class="tabPane sidebarInput" th:if="${gcd.horizCoordSys.isProjection()}">
           <h5>Bounding box (in projection coords)</h5>
@@ -57,7 +57,7 @@ <h5>Bounding box (in projection coords)</h5>
             <input class="bottomBox" type="text" name="miny" id="miny" required />
           </div>
 
-          <div th:replace="templates/commonFragments :: resetButtonContainer(fullProjExt)" />
+          <div th:replace="templates/ncssFragments :: resetButtonContainer(fullProjExt)" />
         </div>
       </div>
 
@@ -68,7 +68,7 @@ <h5>Bounding box (in projection coords)</h5>
 
       <h3>Time subset:</h3>
 
-      <div th:replace="templates/commonFragments :: timeSubsetInput" />
+      <div th:replace="templates/ncssFragments :: timeSubsetInput" />
 
       <h3>Vertical subset:</h3>
 
@@ -76,7 +76,7 @@ <h3>Vertical subset:</h3>
 
       <h3>Output format:</h3>
 
-      <div th:replace="templates/commonFragments :: outputFormatInput" />
+      <div th:replace="templates/ncssFragments :: outputFormatInput" />
 
       <h3>CF compliance:</h3>
 
@@ -86,11 +86,11 @@ <h3>CF compliance:</h3>
       </div>
     </div>
 
-    <div class="requestBuilder" th:replace="templates/commonFragments :: requestBuilder" />
+    <div class="requestBuilder" th:replace="templates/ncssFragments :: requestBuilder" />
 
-    <div class="buttons" th:replace="templates/commonFragments :: buttons" />
+    <div class="buttons" th:replace="templates/ncssFragments :: buttons" />
 
-    <div class="footer" th:replace="templates/commonFragments :: footer" />
+    <div class="footer" th:replace="templates/ncssFragments :: footer" />
   </div>
 </form>
 </body>
diff --git a/tds/src/main/webapp/WEB-INF/templates/ncssGridAsPoint.html b/tds/src/main/webapp/WEB-INF/templates/ncssGridAsPoint.html
index e817e59ca4..e44039e40d 100644
--- a/tds/src/main/webapp/WEB-INF/templates/ncssGridAsPoint.html
+++ b/tds/src/main/webapp/WEB-INF/templates/ncssGridAsPoint.html
@@ -19,14 +19,14 @@ <h4>(<a href="ncssGrid.html" th:href="@{dataset.html}">Switch to Grids</a>)</h4>
 
     <!--/* Use the no-operation token to cause the fragment to use its existing value for the dataset description elem.
            See http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#using-the-no-operation-token. */-->
-    <div class="dataset" th:replace="templates/commonFragments :: dataset(_)" />
+    <div class="dataset" th:replace="templates/ncssFragments :: dataset(_)" />
 
     <div class="main" th:replace="templates/gridFragments :: main" />
 
     <div class="sidebar">
       <h3>Horizontal extent:</h3>
 
-      <div th:replace="templates/commonFragments :: map" />
+      <div th:replace="templates/ncssFragments :: map" />
 
       <h3>Horizontal subset:</h3>
 
@@ -35,12 +35,12 @@ <h3>Horizontal subset:</h3>
           <button type="button" onclick="selectTab(pointSubset, this)" class="defaultButton">Lat/lon point</button>
         </div>
 
-        <div th:replace="templates/commonFragments :: pointSubset" />
+        <div th:replace="templates/ncssFragments :: pointSubset" />
       </div>
 
       <h3>Time subset:</h3>
 
-      <div th:replace="templates/commonFragments :: timeSubsetInput" />
+      <div th:replace="templates/ncssFragments :: timeSubsetInput" />
 
       <h3>Vertical subset:</h3>
 
@@ -48,14 +48,14 @@ <h3>Vertical subset:</h3>
 
       <h3>Output format:</h3>
 
-      <div th:replace="templates/commonFragments :: outputFormatInput" />
+      <div th:replace="templates/ncssFragments :: outputFormatInput" />
     </div>
 
-    <div class="requestBuilder" th:replace="templates/commonFragments :: requestBuilder" />
+    <div class="requestBuilder" th:replace="templates/ncssFragments :: requestBuilder" />
 
-    <div class="buttons" th:replace="templates/commonFragments :: buttons" />
+    <div class="buttons" th:replace="templates/ncssFragments :: buttons" />
 
-    <div class="footer" th:replace="templates/commonFragments :: footer" />
+    <div class="footer" th:replace="templates/ncssFragments :: footer" />
   </div>
 </form>
 </body>
diff --git a/tds/src/main/webapp/WEB-INF/templates/ncssPoint.html b/tds/src/main/webapp/WEB-INF/templates/ncssPoint.html
index 9b884d4695..f5af85e98f 100644
--- a/tds/src/main/webapp/WEB-INF/templates/ncssPoint.html
+++ b/tds/src/main/webapp/WEB-INF/templates/ncssPoint.html
@@ -16,14 +16,14 @@
 
     <!--/* Use the no-operation token to cause the fragment to use its existing value for the dataset description elem.
            See http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#using-the-no-operation-token. */-->
-    <div class="dataset" th:replace="templates/commonFragments :: dataset(_)" />
+    <div class="dataset" th:replace="templates/ncssFragments :: dataset(_)" />
 
     <div class="main" th:replace="templates/pointFragments :: main" />
 
     <div class="sidebar">
       <h3>Horizontal extent:</h3>
 
-      <div th:replace="templates/commonFragments :: map" />
+      <div th:replace="templates/ncssFragments :: map" />
 
       <h3>Horizontal subset:</h3>
 
@@ -32,23 +32,23 @@ <h3>Horizontal subset:</h3>
           <button type="button" onclick="selectTab(latLonSubset, this)" class="defaultButton">Lat/lon box</button>
         </div>
 
-        <div th:replace="templates/commonFragments :: latLonSubset" />
+        <div th:replace="templates/ncssFragments :: latLonSubset" />
       </div>
 
       <h3>Time subset:</h3>
 
-      <div th:replace="templates/commonFragments :: timeSubsetInput" />
+      <div th:replace="templates/ncssFragments :: timeSubsetInput" />
 
       <h3>Output format:</h3>
 
-      <div th:replace="templates/commonFragments :: outputFormatInput" />
+      <div th:replace="templates/ncssFragments :: outputFormatInput" />
     </div>
 
-    <div class="requestBuilder" th:replace="templates/commonFragments :: requestBuilder" />
+    <div class="requestBuilder" th:replace="templates/ncssFragments :: requestBuilder" />
 
-    <div class="buttons" th:replace="templates/commonFragments :: buttons" />
+    <div class="buttons" th:replace="templates/ncssFragments :: buttons" />
 
-    <div class="footer" th:replace="templates/commonFragments :: footer" />
+    <div class="footer" th:replace="templates/ncssFragments :: footer" />
   </div>
 </form>
 </body>
diff --git a/tds/src/main/webapp/WEB-INF/templates/ncssStation.html b/tds/src/main/webapp/WEB-INF/templates/ncssStation.html
index 4dd42d7b89..d1d1191f64 100644
--- a/tds/src/main/webapp/WEB-INF/templates/ncssStation.html
+++ b/tds/src/main/webapp/WEB-INF/templates/ncssStation.html
@@ -15,7 +15,7 @@
     <div class="header" th:replace="templates/commonFragments :: header(~{::title/text()}, ~{})" />
 
     <!--/* Pass the "h4" child to the fragment. */-->
-    <div class="dataset" th:replace="templates/commonFragments :: dataset(~{::div.dataset/h4})">
+    <div class="dataset" th:replace="templates/ncssFragments :: dataset(~{::div.dataset/h4})">
       <h4>(<a href="dataset.xml">Dataset Description</a> | <a href="station.xml">Station List</a>)</h4>
     </div>
 
@@ -24,7 +24,7 @@ <h4>(<a href="dataset.xml">Dataset Description</a> | <a href="station.xml">Stati
     <div class="sidebar">
       <h3>Horizontal extent:</h3>
 
-      <div th:replace="templates/commonFragments :: map" />
+      <div th:replace="templates/ncssFragments :: map" />
 
       <h3>Horizontal subset:</h3>
 
@@ -37,9 +37,9 @@ <h3>Horizontal subset:</h3>
           <button type="button" onclick="selectTab(stationSubset, this)">Stations</button>
         </div>
 
-        <div th:replace="templates/commonFragments :: latLonSubset" />
+        <div th:replace="templates/ncssFragments :: latLonSubset" />
 
-        <div th:replace="templates/commonFragments :: pointSubset" />
+        <div th:replace="templates/ncssFragments :: pointSubset" />
 
         <div id="stationSubset" class="tabPane sidebarInput">
           <h5>Comma-separated list of stations</h5>
@@ -50,18 +50,18 @@ <h5>Comma-separated list of stations</h5>
 
       <h3>Time subset:</h3>
 
-      <div th:replace="templates/commonFragments :: timeSubsetInput" />
+      <div th:replace="templates/ncssFragments :: timeSubsetInput" />
 
       <h3>Output format:</h3>
 
-      <div th:replace="templates/commonFragments :: outputFormatInput" />
+      <div th:replace="templates/ncssFragments :: outputFormatInput" />
     </div>
 
-    <div class="requestBuilder" th:replace="templates/commonFragments :: requestBuilder" />
+    <div class="requestBuilder" th:replace="templates/ncssFragments :: requestBuilder" />
 
-    <div class="buttons" th:replace="templates/commonFragments :: buttons" />
+    <div class="buttons" th:replace="templates/ncssFragments :: buttons" />
 
-    <div class="footer" th:replace="templates/commonFragments :: footer" />
+    <div class="footer" th:replace="templates/ncssFragments :: footer" />
   </div>
 </form>
 </body>
diff --git a/tds/src/main/webapp/tds.css b/tds/src/main/webapp/tds.css
index 6e8ffe58a1..1951da7a68 100644
--- a/tds/src/main/webapp/tds.css
+++ b/tds/src/main/webapp/tds.css
@@ -208,4 +208,30 @@ small.imageinc {
    text-align: justify;
 }
 
+div.header, div.footer {
+    color: #E3E4E6;
+    background-color: #06778F;
+    padding: 3px 20px;
+    border: 1px solid #CFCFCF;
+    border-style: outset;
+    margin-bottom: 8px;
+    box-sizing: border-box;
+}
+
+.header-logo {
+    float: left;
+    margin-top: 1.2em;
+}
+
+.header-info {
+    margin-left: 75px;
+}
+
+a.static {
+    color: #FFFFFF;
+}
+
+a.static:visited {
+    color: #FFFFFF;
+}