src/hg/htdocs/template.html adb8b54c6cc3845fc987eabae0edd6cb777247c2

adb8b54c6cc3845fc987eabae0edd6cb777247c2
kate
  Mon Jan 30 16:55:39 2017 -0800
Add class for text centered in table columns. refs #18540

diff --git src/hg/htdocs/template.html src/hg/htdocs/template.html
index bd9428d..ca7dd32 100755
--- src/hg/htdocs/template.html
+++ src/hg/htdocs/template.html
@@ -1,176 +1,180 @@
 <!DOCTYPE html>
 
 <!-- template.html: Example HTML for a Genome Browser static page -->
 
 <!-- Style recommendations
 1. Capitalization: use only lowercase for HTML element names, attributes and values
 2. Quotes: Use double quotes for attribute values
 3. Whitespace: Use a new line for every block list or table element
 4. Indentation: Indent every child element 2 spaces
 5. Special characters: Don't use entity references (set editor to UTF-8), except < &
 6. Limit lines to a maximum of 100 characters
 -->
 
 <!-- Page header -->
 <!--#set var="TITLE" value="UCSC Genome Browser: Citing Us" -->
 <!--#set var="ROOT" value="." -->
 
 <!-- Relative paths to support mirror sites with non-standard GB docs install -->
 <!--#include virtual="$ROOT/inc/gbPageStart.html" -->
 
 <!-- Page content -->
 <h1>Sample Genome Browser Static Page (h1)</h1>
 <p>
 This is a standard paragraph ('p' tag) of explanatory text.
 The next part of the page demonstrates how to create a multi-column layout 
 using the grid layout feature of bootstrap.css, a widely used stylesheet which is now 
 included in the browser static pages.
 </p>
 
 <!-- Sections -->
 <!-- In this example, two of same size, so use 6 columns of 12 total in grid -->
 
 <div class="row">
 
 <!-- Left column -->
   <div class="col-md-6">
     <h2>Page section (h2)</h2>
     <p>
     This is one of two subsections, formatted as equal-sized columns.
     The bootstrap grid contains 12 columns; column widths are specified using 
     classes 'col-md-1' through 'col-md-12'. 
     This example contains two divs, each assigned class 'col-md-6', within a 'row' div.
     </p>
     <p>
     NOTE: The two columns are displayed only on wide screens.  On small screens, the sections will be
     stacked vertically (a feature of bootstrap responsive layout).
     </p>
 
 
       <h3>Subsection (h3)</h3>
     <p>
     This is the next level, a subsection.  Use an 'h3' tag for this. To structure content
     below this level use a list, table, or titled paragraph:
     </p>
 
     <h6>Titled paragraph</h6>
     <p>
     Use the 'h6' tag at any level in the section hierarchy to precede a paragraph with a bolded title.
     </p>
 
       <h3>Lists</h3>
 <p>
 The description of lists below is formatted as an HTML definition list. Use this format when defining terms or phrases.  (You will not see this much in our current pages -- instead, this type of text was usually styled ad-hoc using 'strong' and 'br' tags).
 </p>
 <dl>
 <dt>Definition list</dt>
 <dd>
 Use the 'dl' tag to enclose the full list, then 'dt' for each item term, and 'dd' for each item definition.
 </dd>
 <dt>Bulleted list</dt>
 Use the 'ul' (unordered list tag) to enclose the full list, then 'li' for each list item.
 <dd>
 <dd>
 <dt>Numbered list</dt>
 <dd>
 Use the 'ol' (ordered list) tag to enclose the full list, then 'li' for each list item.
 </dd>
 
 </dl>
   </div>
 
 <!-- Right column -->
   <div class="col-md-6">
     <h2>Another section</h2>
 
 <!-- Subsections -->
       <h3>List Examples</h3>
         <p>
         Here is a bulleted list ('ul' and 'li' elements). To suppress the 'bullet' add the
         class 'gbsNoBullet' to the 'ul' tag.
         </p>
 <!-- Bulleted list example -->
       <ul>
         <li>red</li>
         <li>white</li>
         <li>blue</li>
       </ul>
 <p>
 
 <!-- Numbered list example -->
     <p>
     Here is a numbered list ('ol' and 'li' elements):
     </p>
     <ol>
       <li>
       <strong>chrom</strong> - The name of the chromosome (e.g. chr3, chrY, chr2_random) or 
       scaffold (e.g. scaffold10671).</li>
       <li>
       <strong>chromStart</strong> - The starting position of the feature in the chromosome or 
       scaffold.  The first base in a chromosome is numbered 0.</li>
       <li>
       <strong>chromEnd</strong> - The ending position of the feature in the chromosome or scaffold. 
       The <em>chromEnd</em> base is not included in the display of the feature. 
       For example, the first 100 bases of a chromosome are defined 
       as <em>chromStart=0, chromEnd=100</em>, and span the bases numbered 0-99.</li>
     </ol>
 
         <h3>Tables</h3>
     <p>
     Here is a table ('table', 'tr', 'th', and 'td' elements):
     </p>
 
 <!-- Table example -->
     <table>
       <tr>
         <th>Type</th>
         <th>Total</th>
       </tr>
       <tr>
         <td>Chromosomes</td>
         <td>261</td>
       </tr>
       <tr>
         <td>Haplotypes</td>
         <td>261</td>
       </tr>
       <tr>
         <td>Unlocalized contigs</td>
         <td>1270</td>
       </tr>
     </table>
 
+    <p>
+    To horizontally center the text in each table cell, add the class 'gbsCenterText' to the table element.
+    </p>
+
 <!-- Preformatted code example -->
       <h3>Code</h3>
     <p>
     Here is some code in a preformatted section ('pre' and 'code' tags):
     </p>
 
 <pre><code>sudo -i
 bash browserSetup.sh install</code></pre>
 
 <p>
 And here is some text with a <code>bit of code</code> embedded (just the 'code' tag)..
 </p>
 
   </div> <!-- end column -->
 </div>   <!-- end row -->
 
 <h2>Section with a picture and caption</h2>
 <p>
 Use the 'img' tag to include the picture file, which is typically in .jpg or .png format.
 Images should normally have their 'width' and 'height' attributes set in the 'img' lement.
 To right-align the image add the 'gbsAlignRight' class.
 The caption is a 'p' element, which is assigned the 'gbsCaption' class.
 </p>
 <div class="row">
   <div class="col-md-12">
       <img src= "images/gbstaff16.jpg" width=499 height=299 alt="Genome Browser staff">
     <p class="gbsCaption">
     Browser staff in native habitat.
     </p>
   </div>
 </div>
 
 <!--#include virtual="$ROOT/inc/gbPageEnd.html" -->