The instructions below will help you customize your site and add additional instances of the many content types and styles seen in the default templates.
Now that you have chosen your style and have an understanding of your site's content and organization, it is time to customize the default template to suit your needs. It is expected that you have a basic knowledge of Adobe Contribute to use these templates. However, there are certain details of the templates that are best accomplished in a certain way. Follow these step-by-step instructions to accomplish some of specific details you see in the default templates:
- Creating a New Page
- Editing Global Navigation
- Editing Sub-Navigation
- Editing Related Links
- Back-to Buttons
Creating a New Page
Duplicate a Current Page
The first option is to duplicate a current page that is similar to a new page that you're creating. This option will save you time in editing because you're using a similar existing page as a foundation for the new page. First, browse to the page you wish to duplicate in your site. Choose File > New and then choose Copy of Current Page. Edit the page as needed. Save it with a new filename. If you wish to link existing pages to this new page, you will need to do so manually.
New Page From a Template
The second option is to start from the blank page template included with your site. Your templates have a folder in their file structure labeled "Templates." The file "blank_page.html" will be recognized by Contribute as a template file for your site. Choose File > New and select "blank_page.html" from the Templates folder. Click on the image to the above right to view the new page menu with template selected.
The page that will open will have the header, navigation, and footer of your template. It will include prompts to "place your content here" and "place your related links here." The "place your content here" prompt has been provided to make it easier to place your cursor correctly. Select "place your content here" and begin typing over it. If you accidentally select the content incorrectly or place your cursor outside of the editable area, the text you type will turn bright red. If this occurs, use your undos to step back to the point before the red text appears. Click on the image to the left to see an example of typing outside of the editable area.
Please note, Contribute does not provide graphic indicators to represent the structural layout of the site. Keep your eye out for text turning red throughout the time you work to avoid the program accidentally breaking your layout.
Editing the Global Navigation
Before you create new pages, you may need to edit your site's global navigation. The global navigation, like the rest of the site, is styled with CSS. If you click on any of the items of that navigation, you will see the "bulleted list" option highlight on your Contribute toolbar. The navigation is built using the structure of a list and the CSS maintains the menu styling. Please note that global navigation is always a link. If you were to select one of the items in the menu and remove its link, you would see that the text loses its proper styling and turns purple as a warning. To edit the name or link target of any of the navigation items, simply select the item and make your desired change using the Link Properties menu, as you would create any link using Contribute.
Creating a New Navigation Item
To create a new navigation item, you can do one of two things. The first option is to place your cursor after the last letter of the menu item directly above where you intend the new item to go. Hit enter and begin typing the text of your new item. You will see that the text is small and purple, indicating that it is not yet styled as a link. As soon as you select the text and turn it into a link, you will see the item receives its correct styling.
A second option to create a new navigation item is to select the entire item directly before where you want the new one placed, copy it and paste it, then change the link information from the Link Properties menu. If you move your mouse around a navigation item, but not quite over it, you will see your cursor change from a text select to a black pointer arrow. When you see that, click once and you will see a red outline around the entire menu item. Click on the image to the left to see an example of highlighting a menu item. Once you've got the item selected with a red outline, choose Edit > Copy, then hit the right arrow once to move your cursor, then hit the "enter" key, and then choose Edit > Paste. You will now have a duplicate of the item directly below the original. Select the text of the duplicate and change the link and text accordingly.
Deleting a Menu Item
Deleting a menu item is similar to the second method of creating a new one. It is accomplished most easily by selecting the whole item that you wish to remove with the black pointer mouse. Once it has a red outline around it, hit the "delete" key. The entire item will be removed. (You may need to hit the "delete" key a second time to remove the line underneath the menu item.)
Highlighting a Menu Item to Indicate Current Page
The global navigation is designed to indicate to the user which page they are currently on. It does so by highlighting the item that links to the current page in the navigation. While the templates are currently set up like this, the highlighting must be manually set for every page of the new page you create. To do so, simply select all the text of the corresponding item in the navigation and choose "current_page" from the style selection menu.
Editing Global Sub-Nav
By default, sub-navigation only appears on the template pages related to Research Projects. However, you can edit the text or link targets just as you would any other link on the site. To add sub-navigation to any page that does not have it by default, you must create a new item in the navigation list, apply the style of "sub_nav" to it, and then make sure the only items within it are links.
Place your cursor after the item directly above where you wish to have sub-navigation. Press "enter" and then type out the text of the first sub-item. This text will appear purple, indicating it is not yet a link. Select the purple text and choose the style "sub_nav" from the styles selection menu. The background color will change to indicate an area of sub-navigation. Click on the image to the left to see an example of this. Then, with the text still selected, make it a link by using the Link Properties menu. By creating a link, the text will automatically be styled correctly and a bullet will be added.
To add additional sub-navigation items, do not hit enter as may seem logical, but instead place your cursor at the end of the item you just created, and hit the right arrow key once. Begin typing the next sub-item and you will see that it appears in purple on the next line down. This next sub-item will already have the style of "sub_nav" applied to it. Simply make it a link and continue as needed.
Editing Related Links
Related links appear on the project detail pages in the default templates. Related links also can be added to the area below the global navigation menu on any page that requires them. Please note that since Contribute does not graphically represent layout elements, the space for related links on pages other than project detail pages is effectively "invisible" until a related links menu is added.
To add related links to a non-project-detail page, place your cursor slightly below the global navigation menu in line with its left side and begin typing the title of your related links menu (recommended title is "Related Links"). The resulting text should be purple. Click the image to the left to see an example of where your cursor should be placed. If the text you type appears elsewhere on the page or if it appears red, undo and attempt it again. It may help to refer to a page that has a related links menu already on it while you do this for the first time. Once you've started the menu in the right place and see that the title text is purple, select the text and choose "heading 3" from the style menu.
Now begin typing the text of your first related links menu item. Once it's typed, select it and make it a bulleted list. The background style of your menu will appear. The last step is to make your text a link, which will then apply the styling and the bullet. Hit "enter" and begin typing again to create additional items.
Detail pages, such as the events detail or the visiting faculty pages that are a part of your default templates, require a back-to button at the top of the page. This link must be added manually to all detail pages you create. Place your cursor at the top of the page and type "< back to" followed by the name of the section that the detail page falls within. Make sure that the text you type is not red. Select that line and make it link to the page the visitor should return to. While it is still selected, choose "Normal" from the style selection menu and then choose "backto_button". This will apply the correct styling for the back-to button.
Creating Two Columns
The pages in the template that have two columns use an HTML table to create their layout. However, to assure the correct styling, each column requires that a CSS style is applied to it manually. By default, a blank page template is one column and you will need to manually add the two column layout if the page requires it.
To start, create a table consisting of 1 row and 2 columns, no cell-padding, no cell-spacing, and no border. Type something in each of the two columns, as the styles don't apply correctly if the columns are empty. Place your cursor over the top border of the left column so that it changes into a bold downward pointing arrow. Click and you will select the entire column. Choose "twocolumn_left" from the style selection menu. Click on the image to the right to see an example of this being applied to the left column. Repeat these steps for the right column, selecting "twocolumn_right" from the style selection menu. Once you have applied the styles to each column, continue adding your content.
To create a table that is meant to display information, like the example on the default project detail pages, you simply need to create a table with as many columns and rows as necessary. To select the whole table, click on the top left corner of the table. Alternatively, click in a table cell and then select Table>Select Table. Choose the "datatable" style from the style selection menu. You do not need to apply cell-padding, cell-spacing, or any border from the table properties menu. You will however need to designate that the top row of the table is a header. The CSS stylesheets will then appropriately style your table header and cells automatically.
Images are almost entirely controlled by the Image Properties menu in Contribute. CSS is not used to position or add padding to images. Images with text wrapped around them, as on this instruction page, are positioned to the left or right by setting the "Align" option from the Image Properties menu. This setting also adds the correct horizontal and/or vertical padding. It is best to size your images to their final dimensions using your photo editing software. It is also possible to size the images from the Image Properties menu, but doing so can potentially increase loading times if the original images are very large, distort images if the originals are small, or even break your layout. No images on your site should be wider than 520px to ensure proper display in smaller browser windows. If you need to represent a large image, do so by creating a thumbnail that links to the larger image, as done on the galleries page of the default template.
If you would like to use any stock images of Thayer, as shown on the template's default homepage for example, you can choose from a selection of images that have been properly sized. Please proceed to Step 05: Thayer Imagery.
To add a horizontal rule, select Insert > Horizontal Rule. Please note that the rule does not have any padding above or below it automatically. You will need to manually add space above and below by hitting enter.