Jump to main content or area navigation.

Contact Us

EPAFiles: Web Design

Updating Oracle 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 pages generated by Oracle in Template 4.

  1. Back Up
  2. Get the Template You Need
  3. Customize the Template for Your Area
  4. Do a Final Check
  5. Save, Compile, Commit, and Test

1. Back Up

Back up your site file(s) before switching templates. Or use a development server. Here's a demo development page.

2. Get the Template You Need

Download Template 4 in SQL format (change the extension).

Should you download the style sheets and JavaScript files?

Top of page

3. Customize the Template for Your Area

Start with the <head> and <body>

<title>

Follow the EPA standard for title tags.

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.

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?

Top of page

Start with the <head> and <body>

<title>

Edit the <title> tag to match the title of your document. There should be three parts to the title:

<title>Your Page Name Here | Area Name Here | US EPA</title>
<title>Household Waste | Region 9 | US EPA</title>

We recommend that your template include " | Area Name | US EPA", so that only the title needs to be completed for each page. Follow EPA's web standard for title elements.

Dreamweaver has a title panel at the top of the screen in the Design View where the title can be modified.

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.

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. 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.

Top of page

Header <div id="header">

Search

Edit the search code with information for your area.

Top of page

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. 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. This name should be inside the second <p></p> in the <div id="area">.

Example: For Pesticides, change this htp.p('<p>Page Title<p>'); to htp.p('<p>Pesticides<p>');.

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">.

Content

Insert your SQL script(s) and content(s).

If you plan to apply a local style sheet, do so in the <head> section of the template code. The master style sheet includes styles for some of the basic elements used on EPA Web pages, so check for available styles first before creating something new.

  • All page content will be inside the "content" div, which cannot be altered or removed, not even with CSS (especially not with CSS).
  • The Page Name uses the H1 style by EPA specification. Do not apply a different style.
  • The area footer is in the content section.
Area Footer

If you have an Area Footer, add it. If not, delete the placeholder text. More on area footers.

Top of page

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 (&nbsp;). 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 (&nbsp;). 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 -->

Top of page

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.

Top of page

4. Do a Final Check

Gotchas

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.

5. Save, Compile, Commit, and Test

Top of page

For help with your epa.gov web design, contact the Web Template Workgroup.

Jump to main content.