Customizing the Western Template

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

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 .

Change Pathnames and Default Information

  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.

Start Your New Site

New Pages

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)

Add Contact page

In the footer there is a link called Contact Us. This links to a page called contact.shtml. This can be a form to send email to your site maintainer or you can simply 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

Navigation

Put your navigation links in /includes/nav.html

Search

See our page on how to add Search after your site is established to get added to the search engine on campus

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:

  • 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
  • The visible banner is /resources/banner940x89.jpg so save-as jpg in this location when you are finished with your changes.

Images, CSS, and all that

Keep your CSS separate from the Template's CSS. 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.

Also see Using the jQuery Extras to learn more about using our Gallery, Slideshow, Call-out Boxes and Accordions.

If you have images you wish to use on your web site, use Adobe Photoshop to edit the images for the web before you begin. See Creating Web Images Using Adobe Photoshop.