Customizing the Western Template

Please get familiar with the Template Structure before attempting to customize it! (save yourself some agony)

  1. Go to https://bitbucket.org/wwuweb/template
  2. Select (download) towards bottom of box in area to right of screen.Download Template screen
  3. Save File into your web server's main folder
  4. Double-click to expand the zip file
  5. In Dreamweaver use Edit, Find and Replace to 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/. Be sure to select the options shown below in order to catch all occurrences of the string:Find and Replace
  6. Using the same options as above, change all instances of DepartmentName to yourdepartmentname . This is used to pre-fill the webpage titles with your department name.
  7. 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.
  8. 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)
  9. 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
  10. Put your navigation links in /includes/nav.html
  11. 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.
  12. 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 (or use Google Muli 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.
    3. 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.
    4. Also see Using the jQuery Extras
    5. 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.

    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 .

Page Updated 03.24.2014