EPAFiles: Web Design
Updating ColdFusion Templates with Template 4
Note: EPA no longer updates this information, but it may be useful as a reference or resource.
EPA builds all web content in the Drupal WebCMS as of January 2013. All new microsites and resource directories will be created using Drupal WebCMS. There is still content on EPA's legacy servers and this content will be maintained there until it is transformed and moved into the Drupal WebCMS. This information on styles and look and feel only applies to the existing content using Template 4 or older versions of EPA's template. Information for building new content is found in the EPA Web Guide.
Note: These directions apply to ColdFusion pages. This documentation has been updated to template 4.
In general, if the documentation doesn't say anything about a specific section in the code, don't edit it.
1. Back Up
Back up your site files before switching templates. It helps if you create a test folder.
2. Get the Template(s) You Need
- Download the appropriate model template.
- Create a new form
- Import the HTML source code from Template 4.x
Depending on whether you use Fusebox or have developed your own template, you will need to copy the HTML code for the Template 3 into the header and footer files. If you were using a cfm file for the navigation side bar, this file will need to be included in the footer file.
Should you download the style sheets and JavaScript files?
3. Customize the Template for Your Area
You may have other ways of populating the various fields of information required in your forms; the following examples illustrate how NCEA creates the information.
Start with the <head> and <body>
<title>
NCEA created a variable with data from an Oracle database which servers as the title of the record and thus the page. We call it "pageName".
To reproduce that same information in the <title> section of the <head>, we use a computed text field that copies that information. Insert that field in the <title> section of the template so that the code in your header file looks like this:
<title><cfoutput>#pageName#</cfoutput> | NCEA | US EPA</title>
We recommend editing your title to follow EPA's web standard for title elements.
Metadata Elements
Metadata elements (meta tags) generally provide additional information about the document to search engines. These metadata elements will aid in building epa.gov's information architecture and our move to a Web Content Management System.
NCEA uses fields within the database for metadata.
As with the <title> field above, for the metadata information, create computed text fields which mirror the content in the <body>. The metadata code looks like this:
<meta name="keywords" content="<cfoutput>#qryRecs.keywords#</cfoutput>" />
There are a number of new metadata elements in Template 4.
Importing Local Style Sheet(s)
I have local styles. What do I do about them?
JavaScript
Do not remove the <script> elements calling the files epa-core.js or jquery.js. These files hold the code for the "New!" icon, the search suggest dropdown, the page last updated date (in the footer), and other functions the Agency may develop (including the ACSI survey). More on JavaScript in template 4.
Template Layout
Classes on the <body> element dictate which layout the browser renders. NCEA uses <body class="#layoutStyle#"> to update the style specification dynamically. For more information on possible layouts, see the template page.
EPA Site-wide Banner Announcements
If your page will become the home page for an area or a Program Office, in Dreamweaver, detach the page from the template and change "sitewidec" to "sitewideb". If this page is not a home page, leave it as "sitewidec". (If you're editing an AA/RA home page, the banner announcement will say "sitewidea". Do not edit.)
More on site-wide announcements.
Header <div id="header">
Search
Edit the search code with information for your area.
Content <div id="content">
Contact Us
Edit the Contact Us link so it points to your Contact Us page. Make sure your Contact Us page meets EPA specification. Email addresses must follow standards, too. NCEA uses a variable (#contactUsLink#) for this. This link should be the first item inside the first <p></p> of the <div id="area">.
Recent Additions
Recent additions have been moved to the area navigation (left sidebar).
Area Name
Add your area name to the template by editing the <div id="areaname> ... <p>. More on area names. NCEA uses a variable (#app_office_name#) for this. It is important to note that the template will not render as expected if there is no length for this element. Additionally, this should be inside the second <p></p> in the <div id="area">.
Using id=main, id=areanav within <div id="page">
Everything contained in the remainder of the page is within the <div id="page"> beginning with <div id="main">.
Breadcrumbs
Insert your breadcrumb-generating code here. NCEA uses a variable generated from the record name, which is used in breadcrumbs section in a header file. The code for the breadcrumbs looks like this:
<cfset crumbName="<li>#pageName#</li>">
The code in the header file will look something like this:
<li><a href="http://www.epa.gov/ord">Research & Development</a></li>
<li><a href="index.cfm">NCEA Home</a></li>
<cfoutput>#crumbName#</cfoutput>
You may want to use a few if statements to allow your header file to work for both the home page and the next level pages. Alternatively, it may include a file for breadcrumbs such as <cfinclude template="#breadcrumbLocation#">
If you are not using information from a database to generate breadcrumbs, you will need to set the breadcrumb name at the top of each page, because they're displayed in an included file.
Remove the > (>) separators, if they exist in your current template. The master style sheet inserts separators automatically.
Page Name
NCEA uses a dir_entry_name field from EIMS (i.e., the pageName variable) for the name of the page. Insert your page name field here, so that the code looks like this:
<!-- BEGIN PAGE NAME -->
<h1><cfoutput>#pageName#</cfoutput></h1>
<!-- END PAGE NAME -->
It is important to note that the pageName variable should be in the header file.
Tabs
If your page contains tabbed data, you can include the file location of the tabs or use a series of IF statements to create show them. Each tab should be in a series of <li> tags.
NCEA uses an include file that is given a dynamic variable name to include the correct file as needed. The variable #tabLocation# is defined using the absolute relative path from the domain (/ncea/location_of_file.cfm).
<ul id="tabs"> <cfinclude template="#tabLocation#"> </ul>
The code may look like:
<li><a href="nceariskassess.cfm?ActType=RiskAssess">Risk Paradigm</a></li> <li class="on><a href="healthri.cfm?ActType=RiskAssess">Human Health</a></li> <li><a href="ecologic.cfm?ActType=RiskAssess">Ecological</a></li>
Remove any <br> or you may have in the list.
Content
Insert the field you use for your page content here. NCEA uses a variable from a SQL query named qryRec to populate the content area. The code looks like this:
<cfoutput query="qryRecs"> <p>#variable1#</p> <p>#variable2#</p> </cfoutput>
Area Footer
If you have an Area Footer, add it. If not, delete the placeholder text. More on area footers.
Left sidebar (Area Navigation) <div id="area-nav">
The area navigation holds your sidebar links. This portion of the code is at the bottom of the template, and must remain there. (It will display last when styles are disabled in a browser.) In the code, the area navigation is an unordered list. When viewed in a capable browser, the style sheet displays the area links as expected.
Add your area sidebar links:
- Do not include line-breaks (<br />) or non-breaking spaces ( ). The style sheet automatically wraps and indents long text links.
- Each sidebar link is a separate list item (
<li>). - Begin with your area home page link (e.g., "Water Science Home"). If you didn't have one before, this is an excellent opportunity to add one.
- If your area is a "sub-area" (e.g., Water Quality Criteria is a sub-area of Water Science), include a link to your area home page (e.g., Water Science Home) and a link to the sub-area home page (e.g., Water Quality Criteria Home). Separate the two home pages with a horizontal rule (
<hr />) - The next three links point to the Basic Information, Where You Live, and Recent Additions pages.
- Do not include line-breaks (
<br />) or non-breaking spaces ( ). The style sheet automatically wraps and indents long text links. - Links to Kids pages now belong on TROPO pages only. Do not include one here.
More on what belongs in the sidebar.
Example of sidebar (areanav) links
<div id="area-nav"> <!-- BEGIN AREA NAVIGATION -->
<h4 class="skip">Local Navigation</h4>
<ul>
<li class="separator"><a href="../index.html">Regional Home</a><hr /></li>
<li><a href="careers/index.html">Careers</a>
<ul>
<li><a href="careers/legal/index.html">Legal jobs</a></li>
<li><a href="careers/index.html">Other jobs</a></li>
</ul>
</li>
<li><a href="library/index.html">Library</a></li>
</ul>
</div> <!-- END AREA NAVIGATION -->
Global Footer <div id="footer">
Contact Us
Edit the Contact Us link in the global footer so it points to your Contact Us page, ensuring that the link points to the same place as the Contact Us link at the top of the page.
4. Save, Test, Tinker
You'll have to tinker a bit to ensure the page looks exactly as you wish it to. Make sure that you open and close tags in the same file. It will ensure that when you update the file, you will not leave any tags open which can break the application. But other than appearance, these instructions should help you produce a page using the new template.
Check your template against the list of common issues. Do not modify any code other than what is necessary to meet the specification. Editing or removing any other elements can seriously degrade the page.
Edit your content. There are a number of styles you can use. Don't forget your contact us, comments, and thank you response pages.
Recommended: clean up your markup, including layout tables. Now that browsers handle CSS more consistently, we can use styles instead of tables to lay out Web pages.
You do need to verify that the code in your content section is XHTML 1.0 compliant.