Office Template
This section covers the office template. This template will be used for the DOE Regional Offices and Golden Field Office sites. Only elements unique to the office template will be covered here. Elements that are common to all templates are covered in the program template.
The first part of this document covers the home page. The second part covers second-level pages.
Sample Template Code
Please contact Shauna Fjeld for sample template code and images.
Home Page
EERE Header
Same as program template.
Blue-Line Illustration
Blue-line illustrations are optional on office pages. See the program template for more information.
Office Header
The office header is essentially the same as the program header. The main difference is it has a blue stripe. Note that the office model does not include top-level navigation or a blue-line illustration.
Left Navigation
Left navigation is the main navigation for office sites (office sites don't use top navigation like program sites). The left navigation is graphical and has the capability to show three levels, with both on and off states. The office home page shows the first level only. As you drill down into a section, second- and third-level navigation may open up. Gray lines separate the top-level categories. Navigation labels should be left-aligned and third-level labels have a "-" in front of them. You can see a working example of left navigation on the left hand side of this page.
See more information on how left navigation should be used on EERE sites.
Program Photo
This image size must be 655 pixels wide x 55 pixels high. The most important content of the image should be located on the left side as this is background image that will reveal more or less depending on the user's browser resolution. The right side fades off into white.
Main Content
Content for your site goes in this section.
Search Box and Site Utilities
Same as program template.
Right Navigation
Same as program template.
Printable Version
The office printable version requirements are the same as the program printable version requirements.
Footer
Same as program template.
Second-Level Pages
This section covers the differences between home and second-level pages
Second-Level EERE Header
Same as program template.
Second-Level Blue-Line Illustration
See home page blue-line illustration for further specifications.
Second-Level Office Header
See home page header for further specifications.
Second-Level Left Navigation
On second-level office pages, the left navigation may open up to three levels of subnavigation, and an "Office Home" menu option is added to the top to allow users to navigate back to the home page. See home page left navigation for further specifications.
Second-Level Program Photo
Same as home page photo.
Second-Level Main Content
Content for your site goes in this section. There are two layout options for second-level pages: you can maintain the strict three-column layout similar to the home page, or you can span the second and third columns to allow for larger images or tables.
On the three-column layout, images and tables should be no wider than 322 pixels. On the two-column layout, images and tables should be no wider than 510 pixels.
Second-Level Search Box and Site Utilities
Same as program template.
Second-Level Right Navigation
Same as program template.
Second-Level Printable Version
The second-level office printable version requirements are the same as the program printable version requirements.
Second-Level Footer
Same as program template.
