Template Guide — Customizing Templates
There are several areas in which you'll need to edit the HTML within the templates in order to tailor the look and feel of the site to your needs.
Page Title
The page title of each page is editable so that the title that displays in the browser can be customized to the contents of each specific page. The page title editable region also contains meta tags, which are optionally used to provide a description and keywords about the page's contents (more on using meta tags).
Attributes to customize:
- title: this is the title of the page, and should describe the page's contents and include "The University of Alabama"
- <meta name="description" content=""/>: contains a short description of your web site
- <meta name="keywords" content=""/>: contains key words about your web site
Example:
<meta name="description" content="The Web Guide is a primer for building web sites at The University of Alabama." /> <meta name="keywords" content="web,templates,e-mail,images,standards,policies" /> <title>UA Web Guide - The University of Alabama</title>
Header
In the header of each template, you will need to update several attributes of the H2, otherwise known as the wordmark. In code view, you will find this around line 18.
Attributes to customize:
- href: this is the home page of your website. Ex: http://sitename.ua.edu
- title: this is the name of your organization
- text: should match the title text from above
Example:
<h2><a href="http://sitename.ua.edu" id="wordmark" title="Organization Name Here">Organization Name Here</a></h2>
Primary Navigation
The main menu contains six menu items in primary navigation by default, but you may customize the number of menu items to suit your needs. Different web sites may require more or less primary navigation choices, depending on the content of your site. We have built the templates to accomodate this need by providing a quick and easy solution for adding or reducing the number of nav items, and changing the width of those menu items so that they are evenly distributed across the menu bar. For best results, we recommend using between 5 and 8 main navigation items, as more items can make the menu bar appear crowded.
First, we'll demonstrate how to change the number of menu items. The primary navigation of the templates is located in a div with ID “main-nav” in the .dwt files. In code view, you will find this around line 20.
Attributes to customize:
- <ul class=”menu_6”>: change the number in this class to match the number of list items <li> you have.
- <li id="item1">: increment each list item <li> in your menu with a unique id based on its position.
The default menu in the templates contains six list items, so the <ul class="menu_6">, and each list item is incremented with an id equal to "item1", "item2", "item3", etc., as below.
<ul class="menu_6"> <li id="item1"><a href="#">Nav Item 1</a></li> <li id="item2"><a href="#">Nav Item 2</a></li> <li id="item3"><a href="#">Nav Item 3</a></li> <li id="item4"><a href="#">Nav Item 4</a></li> <li id="item5"><a href="#">Nav Item 5</a></li> <li id="item6"><a href="#">Nav Item 6</a></li> </ul>
Say, for example, you decided that your web site requires eight main navigation items. In order to accommodate this change, you would need to change the class of the <ul> to "menu_8" and add two additional <li>'s, both with unique id's, to the code. See example below:
<ul class="menu_8"> <li id="item1"><a href="#">Nav Item 1</a></li> <li id="item2"><a href="#">Nav Item 2</a></li> <li id="item3"><a href="#">Nav Item 3</a></li> <li id="item4"><a href="#">Nav Item 4</a></li> <li id="item5"><a href="#">Nav Item 5</a></li> <li id="item6"><a href="#">Nav Item 6</a></li> <li id="item7"><a href="#">Nav Item 6</a></li> <li id="item8"><a href="#">Nav Item 6</a></li> </ul>
If you only wanted five nav items, then your code would look like this:
<ul class="menu_5"> <li id="item1"><a href="#">Nav Item 1</a></li> <li id="item2"><a href="#">Nav Item 2</a></li> <li id="item3"><a href="#">Nav Item 3</a></li> <li id="item4"><a href="#">Nav Item 4</a></li>
<li id="item5"><a href="#">Nav Item 5</a></li> </ul>
Next, let's discuss how these list items are distributed across the menu bar. The CSS for the template controls how many pixels are allocated by default to each nav item depending on which <ul> class you choose, so the list items themselves should distribute evenly across the navigation bar regardless of how many items you choose. Each list item has an identical default width so that the items themselves are all the same width. However, often the words used in menu items are of variable length, such as "About", "Academic Programs", "Giving", "Resources and Links", etc. So because these list items are of equal width, how they will appear by default depends on the words that are chosen for each list item.
Please note that you are not required to take the following steps to customize your menu - the menus should work fine without these steps, as long as the words you choose for your menu items aren't too long. The following steps are optional extra steps that allow web designers to have greater control over their menu and ensure that the list items distribute evenly across the menu bar.
So let's say you have choose six menu items for your web site, and the words chosen for those menu items are variable length, so that some are much longer than others.
- About the College
- Academic Programs
- Giving
- News
- Resources and Links
- Contact
The default code for this would look like this:
<ul class="menu_6"> <li id="item1"><a href="#">About the College</a></li> <li id="item2"><a href="#">Academic Programs</a></li> <li id="item3"><a href="#">Giving</a></li> <li id="item4"><a href="#">News</a></li>
<li id="item5"><a href="#">Resources and Links</a></li> <li id="item6"><a href="#">Contact</a></li> </ul>
Each list item's width is set in the CSS based on which id it has declared in the <li>. By default, the standard width for list items in "menu_6" is 162 pixels. Because the list items are of equal length by default, but the words inside the list items are of different length, the menu may appear unevenly distributed, as shown here:
Notice the extra space around the shorter items "Giving" and "News", and then how little space there is between the items "About the College" and "Academic Programs". This method certainly works, but may not be ideal for the visual appeal of your site, since the variable length of the words make the menu appear to be unevenly distributed.
There is an easy way to fix this issue by customizing the width of each list item in your menu. As mentioned above, each list item has a special "id" that is unique to it. In the CSS, there is a default width for both the menu option you have chosen and each list item within that menu. Adjusting the width of individual list item classes will override the default width in the menu, thereby allowing you to totally customize how the menu appears on the page.
Open the CSS file style.css, and search for the menu class that corresponds to the menu you have chosen. In the above example, we are using "menu_6", so the CSS for that menu class are as follows:
/* Default item width for menu_6 is 162px */
/* WIDTH OF ALL ITEMS MUST TOTAL NO MORE THAN 972px */ ul.menu6 li {width:162px;} .menu_6 li#item1 {width:162px;} .menu_6 li#item2 {width:162px;} .menu_6 li#item3 {width:162px;} .menu_6 li#item4 {width:162px;} .menu_6 li#item5 {width:162px;} .menu_6 li#item6 {width:162px;}
As you can see, the default width for the overall "menu6" class is identical to the class for each list item id within that class. For "menu_6", that default width is 162px. You'll also notice in the comments at the top of the code that the width of all of the items below must total no more than 972px. This number is the maximum allowed width of the menu, and you are able to customize the width of each list item individually so long as the TOTAL width of the list items doesn't add up to more than 972px.
So in order to more evenly distribute the look of menu, you may begin tinkering with the width of each list item's id in order to find the right width for each item. Each id corresponds to one of your list items on your menu, as shown in the html code earlier. We would recommend you start by removing pixels from the shorter items, and adding the exact number of pixels you removed back to the longer items. You can then tweak and adjust the length of the item id's until you find the right mixture. Using trial and error and reloading your page in the browser is the best method for determining the correct width for your items. Below is our customized menu class, and an example of how the menu now appears with the adjusted widths.
/* Default item width for menu_6 is 162px */
/* WIDTH OF ALL ITEMS MUST TOTAL NO MORE THAN 972px */
ul.menu6 li {width:162px;}
.menu_6 li#item1 {width:197px;}
.menu_6 li#item2 {width:201px;}
.menu_6 li#item3 {width:130px;}
.menu_6 li#item4 {width:130px;}
.menu_6 li#item5 {width:172px;}
.menu_6 li#item6 {width:142px;}
As you can see, the menu now appears much better visually because the list items appear to be evenly distributed across the menu. And the total width of the menu is equal to 972px, so the code is correct. Certainly, this is a subjective process to find "what looks right", but that is a process with which all web designers should be quite familiar.
This method has been tested cross-browser and should work correctly for you as long as you:
- Assign the right menu class to your <ul> for the number of list items you want to use
- Have unique id's for each list item, incremented from 1 to the number of the menu class you choose
- Ensure that the total width of each <li> adds up to no more than 972px.
Secondary Navigation
The secondary navigation works a little differently than the primary navigation, as it simply aligns all of your nav items to the right side of the secondary nav bar, and distributes them in a uniform manner. No distinctions are necessary to make in the code about how many nav items you are using, like primary navigation. But there is one thing you need to know when working with the secondary navigation bar.
Every <li> except the last one needs to have the class=”slash” included. As you may have deduced from the class name, this adds a slash on the end of the nav item. This slash is used to separate the nav items from each other, so we don't need one of the last nav item. So that's why it should not use the class="slash."
Attributes to customize:
- class=”slash”: this must be in every <li> except the last one.
Example:
<ul> <li class="slash"><a href="#">Secondary Nav 1</a></li> <li class="slash"><a href="#">Secondary Nav 2</a></li> <li class="slash"><a href="#">Secondary Nav 3</a></li> <li class="slash"><a href="#">Secondary Nav 4</a></li> <li class="slash"><a href="#">Secondary Nav 5</a></li> <li><a href="#">Secondary Nav 6</a></li> </ul>
As shown on the UA Home Page, the secondary navigation is best utilized as a "targeted" menu, meaning as navigation to audience-specific pages. But the menu is customizable to meet whatever navigation needs you may have. The number of secondary nav items you use is up to you, but we would recommend using between four and six items, depending on the length of the words used in each.
Footer
In the footer section of each template, there is a space for links. Generally these links are of an administrative nature - link to contact information, disclaimers, policies, etc. For your template, you will need to update these links to be specific to your site. The only requirement for this area is that you link to a Disclaimer, per the UA Web Policy. We have provided a link in this area to the main Disclaimer page on UA.edu - you may either choose to keep this link, or customize this link to point to your own site-specific disclaimer.
For the remaining links in the space, you will be able to customize them to your needs. The footer is sized to fit the entire page, so you may use this space for as many links as you need, although we would recommend between 4 and 8 links at the most. If you do not need as many links, simply delete the ones you do not use.
Attributes to customize:
- href: this is the link you want to point to
- text: this is the text that will be displayed for each link, respectively
Example:
<p id="links"><a href="#">Footer Link 1</a> | <a href="#">Footer Link 2</a> | <a href="#">Footer Link 3</a> | <a href="#">Footer Link 4</a> | <a href="#">Footer Link 5</a> | <a href="http://www.ua.edu/disclaimer.html">Disclaimer</a></p>
The second line of the footer contains contact information and link to the Copyright Statement for The University of Alabama. You are free to customize this line to be the contact information of your organization, should you desire to do so. Listing contact information at the bottom of each page is mandatory as part of the usage of the templates and per the UA Web Policy.
Functional Footer (Optional)
In each template package, there are a two templates that include an additional section in the footer which we refer to as the "functional footer". This area can be used in a number of ways, including as an additional option for positioning key content or most-used links on every page of the site. This links list can be used to link to popular pages or resources, house further subnavigation of the site, or even link to off-site resources. For a good example of its usage, refer to the footer on UA News in the home and interior pages.
Note that you have the option of which footer to use - you can use the standard footer or the functional footer. But regardless of which option you choose, we request that you include at least the portion of the standard footer that includes contact information, copyright statement link, and disclaimer link, per the UA Web Policy.