Static web page templates

Static Webpages templates

The following are templates and references to be used when creating static webpages. These are for pages with repeatable patterns, not unique pages such as those for file format descriptions

Homepage

Upper content including links

Collections area

<h1 style="text-align: center"><strong>Collections</strong></h1>
The homepage card template, max-width 4 cards
<div class="section-icon-row-major">
<div class="section-icon"><a href="pafe link UUID"><img class="dinner card alignnone [+ image class reference]" title="hover title" src="image link for the card, needs to be square" alt="alt render title" width="160" height="160" align="alignnone" /></a></div>
&nbsp;
</div>

Lower text

Agencies homepage

Creates a flip card look and feel per agency. The back of each card includes a short name for each collection applicable. set for 4 cards wide on computers, 1 card wide on mobile devices.

<h1 style="text-align: center"><strong>Texas State Agencies</strong></h1>
The records in the Texas Digital Archive are organized primarily by the State Agency responsible for the creation of the records. In cases where the agency name has changed over time, the current name of the agency is used. If a state agency has become defunct, and no current state agency exists that is responsible for the records, then the last applicable agency name is used.
Click on the logo for the State Agency for more information about the Agency and records held in the Texas Digital Archive.
<div class="collections">
<h1 style="text-align: center"><strong>Collections in the TDA</strong></h1>
<h4 style="text-align: center"><strong>Hover Over an Agency Icon for a list of available records in that agency</strong></h4>
<div class="section-icon-row-major">
<div class="section-icon">
<a href="agency page uuid url"><div class="flip-card"><div class="flip-card-inner"><div class="flip-card-front">
<img class="dinner card card2 alignnone [image class that applies]" title="Hover title of agency" src="flip card image" alt="alt-render name" width="125" height="180" /></div><div class="flip-card-back"><p>Collections</p><ul><li>Collection 1</li><li>collection 2</li><li>collection 3</li></ul></div></div></div></a>
</div>
&nbsp;
</div>

Top of agency/major division page

If not an agency, describes division of the TDA, such as manuscripts and provides anchor links to parts of page. If an agency, provides short description of agency and provides links to each collection for that agency. Links to section of same page, not external pages. Not agencies pages may not have have a logo at the top, agency pages always do.

<h1 style="text-align: center"><strong>Agency or division name</strong></h1>
<img class="[image class] size-medium" title="Agency name" src="link for uploaded agency logo" alt="alt-render title" width="300" height="300" />Agency name
<h2><strong>Agency/section Information</strong></h2>
AGENCY DESCRIPTION IN 1-2 PARAGRAPHS
<p class="collectionList"><span class="collectionItem"> <a href="#[anchor name]">collection1</a> </span>|<span class="collectionItem"> <a href="#[anchor name]">collection2</a> </span>| <a href="#[anchor name]">collection3</a> </span> </p><hr />

Finding aid section

Finding aid sections are mostly generated using stylesheet. This explains their structure. Each finding aid WILL have an image associated with it. Icon images alternate align-left and align-right. Icons are always no greater than 250px on the long side.

<h2 style="text-align: center" id="link id for relative link bar"><strong>Collection name including date range</strong></h2>
<img class="wp-image-7550 size-full" title="title for icon image" src="link to chosen icon" alt="Oyster Training 2" width="150" height="150" /> Caption
<strong>Creator: </strong>Creator name, no trailing period
<strong>Title: </strong>Unittitle
<strong>Dates:</strong>Date range collapsed in start-end
<strong>Abstract:</strong>Minimal description from finding aid abstract

<a href="link into the TDA records" target="_blank" rel="noopener noreferrer">Click here to enter the records</a>

<a href="link to the TARO finding aid" target="_blank" rel="noopener noreferrer">Click here to access the online finding aid</a>
<hr />