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 85px (h) x 775px (w). Below is an example of the CSS:

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 0, 1, 2, or 3 featured 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.

The navigation zone is dependent on one CSS style or class: the “navcurrentpage.”

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.

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

1. Copy the design key from your Web page HTML code.
2. 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.
3. 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.
4. Copy your new design key from the Template Designer.
5. 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:

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

Tab navigation may be used in special cases to complement the site's primary navigation. This is a simple static tab navigation version, not dynamic (such as JavaScript, Spry, AJAX, etc.).

• Item one
• Item two
• Item three
• Item four
• Item five

HTML code

CSS code

Linking to the central style sheet or creating your own

You can either copy the CSS to create your own inline or external style sheet or link to the central style sheet, by pasting this path in your source code above the closing </head> tag:

<link href="http://identity.wsu.edu/web/tips/CSS/tabnav.CSS" rel="stylesheet" type="text/CSS" />

Download the CSS

How the class works

The class, current <class="current"> is applied to the first tab. This allows the tab to have the on-state or current page appearance. If you want the second tab to have the current page appearance, remove the class from the tab. Otherwise, you will have two open tabs (below) which will be confusing to your audience.

• Item one
• Item two
• Item three
• Item four
• Item five

Note: The tab navigation above is not correct. Only one tab should have an on-state or current page appearance at a time.

The CSS style button creates or renders a button without using an image. It contains an on-state and over-state function.

Read More

HTML code

<a href="#" class="morebtn">Read More</a>

CSS code

a.morebtn {
background-color: #26bcd7;
text-decoration: none;
color: #FFFFFF;
border: 1px dotted #888f97;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}
a.morebtn:hover {
background-color: #FFFFFF;
text-decoration: none;
color: #26BCD7;
}

This CSS news spotlight is designed to highlight a date. The width, padding, margins, etc. can be customized.

Mar

24

2008

Your real news promo or spotlight ad would go here on this line.

More »

Download the repeated background gradient graphic used in the news div

HTML code

<div id="news">
<div id="date">
<h2><strong>Mar</strong></h2>
<h1><strong>24</strong></strong></h1>
<h3><strong>2008</strong></strong></h3>
</div>
<p><a href="032408.aspx"><strong>Your real news promo or </strong>spotlight ad would go here on this line.</a></p>
<p><a href="#">More</a> <span class="bold4">&raquo;</span></p>
</div>

CSS code

#news {
width: 340px;
border: 1px dotted #888f97;
margin-bottom: 10px;
background-image: url(../images/bg-news.jpg);
background-repeat: repeat-x;
background-position: left top;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 0px;
}
#news a:link {
text-decoration: none;
}
#news a:visited {
text-decoration: none;
}
#date {
background-color: #FFFFFF;
padding: 5px;
width: 40px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
float: left;
text-align: center;
margin-top: 0px;
border: 1px dotted #888f97;
}
#date h1 {
font-size: x-large;
font-weight: bold;
padding: 0px;
margin: 0px;
color: #26bcd7;
}
#date h2 {
font-size: medium;
padding: 0px;
margin: 0px;
color: #b7bcc0;
}
#date h3 {
font-size: small;
margin: 0px;
padding: 0px;
color: #b7bcc0;
}

This effect makes an image look as if it is a bordered photograph. It also has a subtle rollover or hover state.

HTML code

<a href="#"><img src="images/img-campus.jpg" alt="" width="250" height="150" /></a>

CSS code

#content img {
padding: 5px;
border: 1px dotted #888f97;
}
#content a img {
background-color: #ffffff;
}
#content a:hover img {
background-color: #e2f4f8;
}

Important

The above method will apply this effect to all images. Change the <img> in the CSS to a class and apply to a specific image.

HTML code

<a href="#"><img src="images/img-campus.jpg" alt="" width="250" height="150" class="img" /></a>

CSS code

#content .img {
padding: 5px;
border: 1px dotted #888f97;
}
#content a .img {
background-color: #ffffff;
}
#content a:hover .img {
background-color: #e2f4f8;
}

Create a div tag to contain your .swf file. This is generally named <slideshow>. The image replacement works with all or customized .swf files, not just with SlideShowPro.

Note: You will need to create an image to replace the .swf if JavaScript is disabled.

CSS code

#slideshow {
background: url(../images/img-replacement.jpg) no-repeat;
width: 610px;
height: 276px;
}

The div tag width and height must be set at the size of the replacement image height and width.

Place the JavaScript above the </head> like:

</head>
<script src="Scripts/swfobject.js" type="text/javascript">
</script>

Download the .js file

Include the JavaScript below the slideshow div tag. Replace YourFileName.swf with your own file and change the 610 (w) and 276 (h) to the replacement image size.

<div id="slideshow"></div>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("YourFileName.swf", "intro", "610", "276", "8", "#ffffff");
so.write("slideshow");
// ]]>
</script>