eHelpOne of the first things you'll see when you view the template is a big, ugly notice reminding you to change some text defaults to text that better reflects your site. These were added in version 4.1 of the templates because many template implementers forgot to change them (here are some examples).
Here is what you need to do to fix them:
Additional customizations are first arranged by region of the page, and then, as a cross-reference, by individual file. All but the simplest customizations should only be attempted by individuals with some past experience with Dreamweaver templates, or by those who have a good understanding of HTML and CSS.
The banner graphic is the file img/home_top_header.jpg. If you replace it with your own image that is 750 pixels wide and 77 pixels tall, and leave the name the same, no other changes are necessary. If you wish to change any of this, the information is at the top of chrome.css in the "#banner" and "#banner img" declarations. The banner image is located in the style sheet so that it can be changed with an edit to a single file (if it were in the HTML, the template would have to be reapplied every time the image changed).
The purpose of this is to allow the user to click on the banner graphic to return, perhaps, to your site's home page. Unlike the banner graphic itself, this has to be in the HTML files, since it involves a link. The clickable region is a transparent graphic, by default 750 × 77 pixels, and it links to the index file (for example, index.html) in the same folder. This is the image for which you changed the "alt" attribute (above); you also changed the corresponding link text for old browsers.
If you wish to change the graphic, you must change each template file that you plan to use, near the top, following <div id="banner">. Change the href to the page you wish it to point to, and if you changed the height of the banner graphic, change the height here to the same number.
If you don't need the banner graphic to link, delete the link and the image, but be sure to leave the comment, which fixes a problem in older versions of Internet Explorer.
Site navigation has been placed in editable regions for a specific reason: best web practices dictate that no page should link to itself, since many users are confused by that. Thus, the navigation will not be identical among the pages (each one has the link removed to itself), and so it must be editable.
Because the top menu is used so infrequently, we haven't put as much effort into making it easy to use. The actual links for the top navigation are in <div id="topmenu"> in each template that has "_tm_" in its name; the number of items, their links, and their text content can be changed here, more easily in "Code view" than in "Design view".
The templates come with one link set to show the "current page" tab. this is accomplished by removing the <a href> and setting the <li> to class=inactive. Both changes are required to make a successful tab. The active links (that link to other pages), in contrast, each have an <a href> and no class on the <li>. We have found that the best method for using the top links is to set an <a href> on every link, with no class for the <li>, in the template, and then on each page, turn off its link to itself by removing the <a href> and changing the <li> to class=inactive.
The spacing of the top menu items is controlled in topmenu_full.css. The left and right padding of #topmenu li a and #topmenu li.inactive may need to be changed if you add or subtract items.
The menu is located in each Template that has a left column, in <div id="mainnav">. The items may be changed in either Code or Design view. Long items will wrap with a hanging indent, so there's no need to worry about them. Ordinarily there will be no need to change the stylesheet unless you wish to change the background color.
One level of indentation is permitted in "mainnav"; the list items are marked with square bullets.
Because the "away" navigation ordinarily doesn't link to pages within your site, it can be the same for all pages, and thus is in a non-editable region of the template.
Because this region can be hard to customize, all the markup is placed in the HTML file, and your changes will need to be duplicated among all the style sheets you use. Each line of the menu looks something like this, with the parts in bold being the parts you change:
<tr><td style="background-image: url('../img/icon_x.gif');"><a href="your_url">Your Text </a></td></tr>
"icon_x.gif" should be replaced by the file name of the icon you wish to use. A number are provided in the img folder. "your_url" should be replaced with the URL of the site you want the button to link to. "Your Text" should be replace with what you want the button to say. Repeat for each of the "away" links.
Ordinarily you won't need to change this, but if you want to include parameters so that Google only searches your specific site, you'll need to make a new graphic (like "Search eHelp" above) and add the line:
<input type=hidden name=hq value="inurl:csupomona inurl:yourstring">
where "yourstring" is a unique part of the URL of every page in your site (eHelp uses "ehelp" – see the source of this document for the exact syntax).
It's important to test your modification to make sure it is giving the pages you want..
The title at the top of the column is optional. It is an <h2> (although the stylesheet also supports the <h1> of earlier template versions. Below it can be <ul>s (such as the example), paragraph text, and images (up to 150 pixels wide). Menu items should remain in the editable region, but photos and other items common to all pages can be placed between <!-- TemplateEndEditable --></div> and <!-- rightnav -->.
No customization is normally needed. The page_heading editable region is within an <h1>. This generates a warning when the templates are saved; the warning can be ignored. The page heading can run to multiple lines, but it quickly becomes unattractive. Individual words or parts of words can be highlighted with class=goldletter.
No customization is noramlly needed. If you want un-bulleted lists (like the CPP home pages), un-comment the part of content_area.css that begins "/* this block is for CPP homepage-style lists" and comment out the part that begins "the uncommented block below is for I&IT-style lists".
Although the footer appears to be a single horizontal line, it contains an image, two paragraphs, and a list. The leftmost paragraph contains the copyright information. Remember that the copyright for personal pages and faculty instructional pages belongs to the creator; almost all other pages belong to Cal Poly Pomona.
The list consists of links that should appear on every page (such as contact information). It can most easily be edited in Code view.
The rightmost paragraph contains the "last modified" date, which updates automatically in Dreamweaver or Contribute. It can be eliminated (especially if you need the room for menu items), but ordinarily won't be modified.
Remember that changes to the footer need to be duplicated on every template you use.
Next stop, adding content.
