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 4Fixed-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 (
|
|
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="http://www.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.).
- Examples
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 | Archived If you need these files, browse to /epafiles/templates/archive/. |
| 3.2.1 | 19 Oct 2006 | Archived |
| 3.2.1 | 28 Jun 2006 | Archived |
| 3.2 | 24 May 2006 | Archived |
| 2.1.1 | 22 Mar 2002 | Archived |