Instructions for Customizing the Western Template

The NEW Western Template (as of Fall 2011) is now available. Please get familiar with the Template Structure before attempting to customize it! (save yourself some agony)

1. Click and save the template zip file into your web server's main folder
2. Change all instances of /western_template/ to /your_directory_name/ . For instance if you're setting up a new share on Campusweb called mynewsite you would Find / Replace /western_template/ to /mynewsite/
3. Change all instances of DepartmentName to yourdepartmentname . This is used to pre-fill the webpage titles with your department name.
4. Change all instances of webhelp@wwu.edu to the email address of your own webmaster. This gives a reliable place for people to report broken links, etc.
5. To create new pages use Dreamweaver and go to File, New..., Page From Template and choose one of the provided templates (one, two or three column, or a right sidebar)
6. Create a page called contact.shtml and put the contact information for your entire department there. You may even wish to include a map or other information about where you are located. If you wish to have a custom link to your building on the interactive Campus Map contact webhelp
7. Put your navigation links in /includes/nav.html
8. Modifying Search. If you have a larger site you may want to allow users to search directly on your site. The search box UNDER the banner is for local site searches. Modify search.html:
   1. Find the line:
      <input type="hidden" name="site" value="sharename"/>
   2. Change "sharename" to your share or directory name, for example:
      <input type="hidden" name="site" value="president"/>
   3. OR if you do not wish a local site search, then do NOT remove search.html but comment out or remove the code in that file.
9. Modifying the banner. If you do not have experience with Photoshop, please let us know and we will make a banner for you. If you do not own the Avenir font, please let us know and we will make the banner for you. If you are comfortable with Photoshop and have access to the Avenir font, please follow these conventions:
   1. The source for the banner is in /resources/source/banner940x89.psd . Layers are already set up for the department name and other useful layers. Conventions are a right-justified Avenir-font department name, and a full-color banner image of a detail that pertains to your department. A banner 89 pixels high is NOT a good candidate for a group photo, a building photo, or other highly detailed photo. Choose something simple and appealing or use the Sample Banner Images
   2. The visible banner is /resources/banner940x89.jpg so save-as jpg in this location when you are finished with your changes.

10. Cultivate good CSS habits and use /resources/custom.css to store any custom css that you wish to use on your site. Please do not modify any of the CSS in /resources/rsv as it will make it difficult for us to assist you (or your group in your absence) if things go sideways.

11. Also see Using the jQuery Extras

12. If you have images you wish to use on your web site, use either Adobe Photoshop or Macromedia Fireworks to edit the images for the web before you begin.

    • Creating Web-Safe Images Using Adobe Photoshop
    • Creating Web-Safe Images Using Macromedia Fireworks

Note that if you have an existing site built on an older template, it may be rather complex to convert this to the new template. We can help with this - contact us at webhelp@wwu.edu .