Tips and tricks

Inserting a site ID graphic

Insert your own site ID graphic by overriding the global CSS site ID div tag <div id=siteid> with your own inline or external style sheet. The dimensions of your site ID graphic should be 73px (h) x 610px (w). Below is an example of the CSS:

#siteID {
background-image: url(images/siteid-red.jpg);
background-repeat: no-repeat;
}

Adding/deleting featured links

Featured links are not required, but up to three featured links may be displayed. If you do not want any featured links, delete the content between the <div id="featured"> tags. DO NOT delete the div tag itself. Removing the div tag will cause template spacing problems and make it more difficult to add featured links later.

If you only want one or two featured links, simply remove the <li> tag and the content between the <li> tag until you have the correct number of featured links.

See example below of what the HTML looks like with 1, 2, or 3 featured links:

1 Featured Link
<div id="featured">
<ul>
<li><a href="link1.html">Link 1</a></li>
</ul>
</div>

2 Featured Links
<div id="featured">
<ul>
<li><a href="link1.html">Link 1</a></li>
<li><a href="link1.html">Link 2 </a></li>
</ul>
</div>

3 Featured Links
<div id="featured">
<ul>
<li><a href="link1.html">Link 1</a></li>
<li><a href="link1.html">Link 2 </a></li>
<li><a href="link1.html">Link 3 </a></li>
</ul>
</div>

Adding primary navigation links

Click in the Primary Navigation Zone and type in the text you wish to appear as a link. It will not first appear in the correct format. When you highlight the text and make it a link, the text will automatically be formatted correctly.

To create “children” or secondary navigation links, insert a tab before each link to indent the text link. That will put the secondary link under the main link where it should appear and format it correctly. Remove the indent by using the delete key or “Shift Tab” combination.

Using the navigation styles

The navigation zone is dependent on two CSS styles or classes: the “navcurrentpage” and “navparentpath” classes.

The “navparentpath” class is applied to parent navigation links to highlight the navigation path to the current page. The parent links are highlighted as a change of color. The "navcurrentpage" class is applied to the current page navigation item to highlight the page currently displayed. The current page highlight places a color background behind the current page link.

For example, the page you are currently viewing (Tips & Tricks) has the “navparentpath” class applied to the “Support" link and "navcurrentpage” applied to the "Tips and Tricks" link.

Revising the design key

Follow these steps if you wish to revise a design currently in use:

Copy the design key from your Web page HTML code.
Paste the design key into the box “Paste existing key here,” located in the sidebar area of the Template Designer. The default page design displayed in the Template Designer will change to reflect your current design.
Select new design choices in the Template Designer for the components you wish to revise. The design key is automatically updated after each new selection.
Copy your new design key from the Template Designer.
Paste the design key into the HTML code of each of your Web pages. Utilize the “search and replace” feature in your Web development tool to facilitate this process. Your pages will now reflect your revised design.

This design key is shown in red:

<head>

<title>Your page title goes here </title>

<link rel="shortcut icon" href="http://wsu.edu/favicon.ICO" />

<link href="http://www.wsu.edu/navigatewsu/gen2/print.css" rel="stylesheet" type="text/css" media="print"/>

</head>

Using an external style sheet

If you decide to use an external style sheet include a link to it after the global style sheet as shown below in red.

<head>

<title>Your page title goes here </title>

<link rel="shortcut icon" href="http://wsu.edu/favicon.ICO" />

<link href="http://www.wsu.edu/navigatewsu/gen2/print.css" rel="stylesheet" type="text/css" media="print"/>

</head>

Preventing background images from being cropped

The div tag height matches the height of your content. You can make more of the div background image appear by adding height, content, or padding to the div.

Below are different examples of how this can be done.

Example 1 - Div height method

The div height for this example reflects the secondary column on the right of the page you are currently reading. Since the secondary column doesn't contain any content it will automatically collapse by default.

The background image height is 210px so the secondary column div height was set to be the same shown in blue below.

See an example of what the secondary column would look like If the height wasn't set at 210px.

#content #secondary {
background-image: url(images/secbg.jpg);
background-repeat: no-repeat;
background-position: left top;
height: 210px;
}

Example 2 - Padding method

The div height for this example reflects the primary navigation on the left of the page you are reading.

The background image height is 500px so the primary navigation div was set to a bottom padding of 250px, shown in blue below.

See an example of what the primary navigation would look like If the bottom padding wasn't set at 250px.

#content #nav {
background-image: url(images/bg-gradient.jpg);
background-repeat: repeat-x;
background-position: top;
padding-bottom: 250px;
}

Marketing Communications, PO Box 641227, Washington State University, Pullman WA 99164-1227, 509-335-7622, Contact Us

Graphic Identity Program

Web Support