Jump to main content or area navigation.

Contact Us

EPAFiles: Web Design

Sample Templates

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.

Development Note

To save files: right-click the link to the file you want to save and choose "Save Target/Link As...". In the dialog box that pops up, set Save as type to "All Files." Edit the file extension to .html. For .dwt files, change the file extension to .dwt (not .html).

Note: If you are using a template that predates the current tabbed template, you do not have the full set of functionality available in the current template.


Template 4

Site Samples How to Use

Sites using Template 4

Fixed-width (960px) with a 180px-wide sidebar and a 740px-wide content column. Includes breadcrumbs. No "Language links" above search box. Two-column and sidebarless templates as needed.

The basic page template will be the most used template on our sites so we are providing a Dreamweaver Template (.dwt) file.

  • Homepage
    • Banner is not required. If a banner is used max width is 700 pixels.
    • QuickFinder (Optional)
      • Limit of 20 items
    • Right column
      • "Top 3" box is the first item
        • Top 3 can be questions, popular pages, tasks or something else
        • If a map is used (e.g. geoss, water), "Top 3" box is 2nd
      • No area navigation in right hand sidebar
  • Basic Pages
    • White space is yours to use as needed
    • Don't use two-column template just to align boxes. It can be done with the basic template.

Top of page


Detailed description of the Template

EPA's new web template ("OneEPA") is a big change from our previous template ("v3"). Not only is the color palette different, but the design philosophy differs, too. Changes include:

  • Fixed width: 960px
  • Clear separation between "Agency"-stuff ("chrome") and your content ("whitespace")
  • Central JavaScript repository (jQuery framework)
  • Dropdown menus link to Agency Information Architecture

You'll be happy to know:

  • EPA styles will continue to work without any work on your part.
  • The editable regions in the OneEPA template are the same as template 3.
  • The instructions for creating a page are nearly the same for the OneEPA template.
  • Note: the change using a <hr /> in the sidebar.
    • <li class="separator"><a href="https://www3.epa.gov/epafiles/">EPA Web Design Home<hr /></li>
    • Add the separator class to the <li> element and put the <hr /> inside the <li> element.

Other Templates

  • Sidebarless template (wide)
    • To be used when you have wide content that needs the entire screen space.
    • You can not put your entire site into the sidebarless template unless it's an application presenting data (Oracle, Cold Fusion)
  • Two-column template
    • Used when there is significan right sidebar content and the boxes just won't behave. (It happens!)
    • Do not use it to align boxes to the right.
  • Dynamic templates documentation have not been updated for OneEPA Web.

We've got a number of examples and some how-tos. These include using the central jQuery framework to build your own interactions (such as tabs, panels, tablesorters, etc.).

Top of page


Version History

Template Version History
Version # Version Date Description of Changes
OneEPA November 2010

A move into a consistent look-and-feel with EPA's home page and across all EPA.gov pages. New structure warranted new designs for each kind of site.

New "tabs" for the Top-4 IA links (Learn the Issues, Sci&Tech, Laws&Regs, About EPA) and drop-down IA menus.

All AA/RA top-level designs have been removed.

4.1.1 and 3.2.2 05 Aug 2010

We have removed the EPA-all and Area-only search options. All search boxes should search All EPA.

In addition, we've added Google Search Appliance-specific code.

4 15 May 2009 Many
3.2.1 21 May 2008 ArchivedEPA no longer updates the information at this link, but it may be useful as a reference or resource. If you need these files, browse to /epafiles/templates/archive/.
3.2.1 19 Oct 2006 ArchivedEPA no longer updates the information at this link, but it may be useful as a reference or resource.
3.2.1 28 Jun 2006 ArchivedEPA no longer updates the information at this link, but it may be useful as a reference or resource.
3.2 24 May 2006 ArchivedEPA no longer updates the information at this link, but it may be useful as a reference or resource.
2.1.1 22 Mar 2002 ArchivedEPA no longer updates the information at this link, but it may be useful as a reference or resource.

Top of page

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

Jump to main content.