Home

Adding the Truss header and footer to catalog.ucsc.edu

1. Remove old header and footer HTML

Any custom HTML for the old header and footer should be removed from templates to avoid conflicts with the new header. Below is a screenshot of the areas that should be removed.

2. Add the Truss CSS and Javascript file links to the bottom of the site's page template (footer area).

This code should be at the bottom of the page HTML source, after any <trss-* component tags you add in the following steps.

<!-- Script and style to include Truss components -->
<script type="module" src="https://truss.ucsc.edu/ucsc-trss/ucsc-trss.esm.js"></script>
<link rel="stylesheet" href="https://truss.ucsc.edu/ucsc-trss/ucsc-trss.css">

3. Add the header code

Add this code snippet where ever you want the UCSC global header to display.

<trss-ucsc-header use-logo="true" use-search="false" style="--trss-content-width: 1080px"></trss-ucsc-header>

4. Add the footer code

Add this code snippet where ever you want the UCSC global footer to display. Be sure this code comes before the script and link tags you added in step 2.

<trss-ucsc-footer has-sammy="true"></trss-ucsc-footer>

Important

Note that <trss- is correct. The project is named "Truss," but the components are all prefixed with "trss" (truss without the 'u').

5. Check that everything works as expected

The page should look like this.