Converting Your Pages to the 2009 Template
Step 1. Change the JS Menu Reference
This replaces the old 750-pixel wide drop-down menu with the new 900-pixel-wide menu.
To implement, change this code (approximately line 8):
<!--#include virtual="/menuinc.html" -->
Becomes:
<!--#include virtual="/menuinc2009.html" -->
Step 2: Change the top navbar and page width:
This change widens the overall page table and places the new version of the plain-HTML top menu bar under the javascript one, for those users not using Javascript. To implement, change this code (approximately lines 31-35):
<table width="754" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="750">
<!--#include virtual="/newtopnav.html" -->a
<table width="750" border="0" cellspacing="0" cellpadding="0">
To this:
<table width="904" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="900">
<!--#include virtual="/newtopnav2009.html" -->
<table width="900" border="0" cellspacing="0" cellpadding="0">
Step 3: Change the header code.
This change widens the top header, and creates a redundant link back to the USAID home page using the USAID Identity. To implement, change this code (approximately lines 43-45):
<td valign="top" width="228"><img src="/images/main/usaid_logoc.gif" width="228" height="117"
border=0 alt="USAID: From The American People"></td>
<td valign="top" width="334"><img src="/images/titles/ ...
To this:
<td valign="top" width="328"><a href="/"><img src="/images/main/usaid_logoc.gif" width="228" height="117"
border=0 alt="USAID: From The American People - Link to USAID Home Page"></a><img src="/images/main/titlespacer.gif" width="100" height="117" alt="" border="0"></td>
<td valign="top" width="384"><img src="/images/main/titlespacer.gif" width="50" height="117" alt="" border="0"><img src="/images/titles/ ...
Step 4: Widen the main content box
This change widens the body of the page, from the header down. To implement this change, change this code (approximately lines 52-54):
<td valign="top" colspan="4" width="750">
<!-- Start Left Sub Navigation and content boxes -->
<table width="750" border="0" cellspacing="0" cellpadding="0">
<tr><td valign="top" width="10"><img src="/images/spacer.gif" width="10" height="1"
border=0 alt=""></td><td class="content" width="740" valign="top">
To this:
<td valign="top" colspan="4" width="900">
<!-- Start Left Sub Navigation and content boxes -->
<table width="900" border="0" cellspacing="0" cellpadding="0">
<tr><td valign="top" width="10"><img src="/images/spacer.gif" width="10" height="1"
border=0 alt=""></td><td class="content" width="890" valign="top">
Step 5: Widen Footer
This change widens the page footer and inserts the new bottom-navigation include. To implement, change this code:
<table width="750" border="0" cellspacing="0" cellpadding="0">
<!--#include virtual="/newbottomnav.html" -->
To this:
<table width="900" border="0" cellspacing="0" cellpadding="0">
<!--#include virtual="/newbottomnav2009.html" -->
Step 6: Adjust Javascript menu
If you are using a Javascript sidebar menu, you will need to reposition the menu to fit the new template. To implement, change this code:
with(milonic=new menuname("mainmenu2")){
top = 145;
left = 562;
itemwidth = 188;
menuwidth = 188;
To this:
with(milonic=new menuname("mainmenu2")){
top = 145;
left = 712;
itemwidth = 188;
menuwidth = 188;
Additionally, you will need to change the color scheme from Red to DarkGray. In your sidebar menus, please replace all instances of #C2113A with #666666, and the lighter red color with #777777.
Step 7: Clean up modules
This change replicates the gradient look and feel from the USAID home page to the side modules, and changes the module header text to Gill Sans in compliance with USAID branding requirements. To implement, use the module_headers_2009.psd file to create a new top graphic. Then change this code (approximately lines 6-10):
<!-- Start module content box -->
<table border="0" cellspacing="0" cellpadding="0" width="188" bgcolor="002A6C">
<tr>
<td valign="top" width="188"><img src="/folder/subfolder/modules/related_mod.gif"
width="185" height="25" alt="Related Links">
To this:
<table border="0" cellspacing="0" cellpadding="0" width="188" class="Blue">
<tr>
<td valign="top" width="188"><img src="/folder/subfolder/modules/related_mod.gif" width="188" height="25" alt="Related Links">
If your module already correctly references a color class instead of a hard-coded hexadecimal value, you do not need to change this line. However, if your modules are using hard-coded bgcolor values, please change this attribute according to this guide:
| New Code | Old Code |
|---|
class="Blue" | bgcolor="#002a6c" |
class="LightBlue" | bgcolor="#336799" |
class="DarkGray" | bgcolor="#666666" |
class="Gray" | bgcolor="#dddddd" |
Under this new design, Red will be phased out as the top module color, and replaced with DarkGray. If you are using a red graphic header in your top navigation bar, you will need to change this in order to match the new stylesheet.
If you do not have access to Photoshop or the Gill Sans font and are unable to create the new module header, please contact us and we can help you with this, as well as any other questions you may have.
Back to Top ^
|
