Skip Navigation

The ENGR Template
 

Basic Customization

The customizations that can be done relatively easily are detailed in this section. Before attempting any customization, please read Modifying Template Files below. Basic Customizations are processes that you will likely need to do to make the template look and work as you need it. These are tasks for site administrators, and cannot be done in Contribute. Most of these require relatively little experience with Dreamweaver or Fireworks:

  • Personalizing the Navigation Bars
  • Creating New Backgrounds
  • Creating New Navigation Buttons
  • Changing the Style Sheet

These customizations can be done with other software packages but may not be as simple depending on compatibility and features. Altering library items automatically updates the pages that use them if you work in Dreamweaver. Library items may loose their usefulness in other packages.

Modifying Template Files

Before altering any files, you need to be aware of the purposes behind the included folders. Files in these folders are overwritten when you download updates to the template:

  • Library - folder for Dreamweaver library items. These are blocks of HTML that you can put on any page in the site, and Dreamweaver will update all copies of the library item when you change the original. You can safely edit these files. Template update files released in he future will not directly overwrite these files.

    It is important to note that if you create or modify roll-over images in library items you must delete the script and body tags generated by Dreamweaver before saving the file and updating other files that use the Library item. Failing to do this may cause Dreamweaver to later complain about the formatting of your documents and may cause the roll-overs to not work right. You can leave the meta tag Dreamweaver generates.
     
  • Interface - folder containing the media files that are part of the standard template. Before being customized, these files should be moved into the provided Media folder using Dreamweaver. Files that are commonly customized are the style sheets, background images, and navigation buttons. Be sure to allow Dreamweaver to update links in your site to these files. Template updates may overwrite any files in the Interface folder.
     
  • Templates - folder for Dreamweaver template documents. You can safely edit these files. Template update files released in he future will not directly overwrite these files.
     
  • Media - folder for media files specific to your site. You can safely edit these files. Template update files released in he future will not directly overwrite these files.

Personalizing the Navigation Bars

Personalizing the Navigation Bar happens in two steps. You can alter the bar by editing the library items provided, editing a copy, creating a new library item from scratch, or detaching the library item in the document you are working with. The above choices allow you to change the contents of the Navigation Bar. When altering this bar, keep the height constraints for this area in mind (18 pixels). You can use plain text links in this area, the P.NavigationBar style will be applied to this text. This helps to insure that the text will fit the vertical constraints of the editable area. Visualy it is best not to mix text and image links.

To create new image links for the navigation bar, see Creating New Buttons.

The provided library items for navigation are Main Navigation.lbi , Sub Navigation.lbi, and Home Link.lbi. These items must be with care since they contain image rollovers.

Navigation Logos.lbi contains links back to larger groups. The version provided includes links for the University and College, but more can be added as needed. The area this library item appears in has a height constraint of 16 pixels. You can use plain text links in this area, the P.LogoBar style will be applied to this text. This helps to insure that the text will fit the vertical constraints of the editable area. Visualy it is best not to mix text and image links and the university is very picky about using the correct font (Universe Condensed Light) with the "NC State University" text.

Creating New Backgrounds

Before you alter the background it is recommended that you move any files you intend to alter from the Interface folder to Media inside of contribute and allow Dreamweaver to update links. You can find the origial images for the background in:

Interface/css/backgrounds

The fireworks source file is kept in the Interface directory:

Interface/source/
tabsandbg.png

The background for the top of the page can be any image, but one that is aproximately 250 pixels high and repeats horizontaly is recommended. It should probaby also fade to, or otherwise blend with the background color of the "#main" style which is white (#FFFFFF) by default.

For your convineicne you may want to save a copy of the file you use to create the background image in:

Media/source/

and export it into the folder

Media/css/backgrounds

Creating New Buttons

Before you alter the buttons it is recommended that you move any files you intend to alter from the Interface folder to Media inside of contribute and allow Dreamweaver to update links.

To create new buttons for your navigation bar and footer, you will need to open the original Fireworks source files. The main site links are in:

Interface/source/headerandfoot.png

the sub navigation images are in:

Interface/headerlinks.png

You can alter the text of any of the exiting buttons, resize the slice that defines that button, and rename the slice to create a new image link for your site. Once you have done this, you can right-click on the slice and export it to create your new button. Save the file in:

Media/graphics/links/

You should also save the altered source file to:

Media/source/

You can now add this image to your Navigation Bar. Be sure to provide alt-text for this image to maintain ADA compliance for your site.

Use the Rollover Image, in the Common Components Tab, in Dreamweaver to make your images rollovers. When working with library items, be sure to take the scripts and body tag that Dreamweaver generates out before saving. Dreamweaver will then automatically put the scripts and onload body tag properties in all files that use the library item.

There are still plans to provide a PHP script in a later version of the Template what will allow image buttons to automatically be generated.

Changing the Style Sheet

Altering the style sheet will quickly allow you to redefine text colors, fonts, styles, and sizes. First, in Dreamweaver, move the file(s) in Interface/css to Media/css. Dreamweaver will prompt you to update files in the site. This step is best done before putting your content on the template since the changes will be applied to the templates only.

To edit these files in Dreamweaver, double click on the file or open any document in the site and find the Design Panel. Click on the Edit Styles radio button. Select which style sheet or style you want to edit from the list, and click on the Edit button. It looks like a pencil over text.

The engrbasic_css file contains the definition to rendering all tags and uses CSS1 syntax. This document is used by browsers that are CSS1 and CSS2 aware.

The engrlayout_css file contains the definition for layout with the template and uses CSS2 features. This file is inaccessible by browsers that support CSS1 but not CSS2.

Finally, engrlayout_colortabs_css contains the definition for displaying the "dog-earred page" tables of the template in a variety of colors. It can be taken out of templates that do not need it to save load time. The library items for using these pages are in the Library folder. To use them insert the item in a page and click the Detach From Original button. To change the color of the tab select the table tag and change the class to one of the provided colors. ou will need to manually change the image for the dog-earred corner to match, but all other changes are automatic. The tables will also automaticly "stack" if one appears directly below another giving the illusion of depth.

For more information on altering the style sheet see Advanced Customization