Skip to the content

Kansas State University

IT Help Desk
Kansas State University
214 Hale Library
Manhattan, KS 66506
785-532-7722
800-865-6143 (toll-free)
helpdesk@k-state.edu

Using the templates

These instructions assume a basic knowledge of HTML and CSS. If you are familiar with web standards and CSS-driven layout, you will probably find the templates intuitive to use. Otherwise, please be patient, and resist the urge to use layout tables, spacer graphics, or font tags.

Setting up your template

Once you've used the Template Selector and have your template in your web directory, follow these steps to set up your template:

  1. Make a copy of your template, so the original is always available.

  2. Fill in the title of the page between the HTML title tags. Make sure the title of your page fully describes your page, is short, to the point, and able to stand alone when listed in a Google search, for example.

    Tip: Don't start your title with "K-State" or "Kansas State University". Your pages will look like they all have the same title. Note that when a browser window is minimized, you can only see part of the title. The same thing happens when you bookmark a site.

    Right: History department at K-State
    Not: Kansas State University History Department

  3. Fill in the "description" and "keywords" meta tags. The description should be one sentence that describes your site. Don't just repeat the title, but make reference to content on the page.

    The keywords should be the list of keywords for the site, as well as synonyms of topics on your page. This list should not include K-State, Kansas State University, wildcat, or other generic phrases. Those keywords are reserved for the homepage. If every page has the same keywords, it reduces the effectiveness of those words over the whole site.

    The current keyword standard is to use semicolons between keywords. Example: computing;information;technology;eID

  4. Check your unit/department title in the header. Your unit/department name should be the title in the upper left corner of the purple header. The header should remain consistent throughout your website.

    To change it, change the title element in the ksustd include in your template. Example: <!--#ksustd element="tbar" unit="infotech" title="Information technology" format="2006"-->

  5. Update the breadcrumbs. Edit the breadcrumbs in the breadcrumbs section. Breadcrumbs provide a hierarchical view of the site as well as links to follow back to previous pages. Breadcrumbs don't have to follow the directory structure of the site, but should make sense in the context of the information you're presenting.

  6. Update the contact information. If you're using the two- or three-column template, change the text between the <address> tags to show your unit's contacts. The university's standard address style is modeled in the template:

    office/department name
    Kansas State University
    office address
    city/state/zip
    area-phone-num
    e-address@k-state.edu

    If you're using the separate left navigation sidebar, update the contact information by editing the sidebar.html file in the includes directory.

  7. Add the navigation. Add your site's navigation structure to the template.

    Using the left navigation. The recommended method is to use left navigation with a separate sidebar file. For more information, see Left sidebar navigation.

    • If you're using a separate file, edit the sidebar.html file in the includes directory and add your navigation content. Otherwise, add the navigation content to the sidebar div in the template. The navigation must be added with standard unordered-list HTML. You can nest the lists to add subnavigation.
    • A navigation link can be the "active" or "current" link by adding KSU_left# to the class declarations on the body tag, where "#" is the number of the link, counting from the top, you want to be active. Example: <body class="KSU_left1">
    • If you choose to have a navigation element that does not have a link, use the class noLink on that list element. Example: <li class="noLink">

    Secondary or page-specific navigation. For secondary or page-specific navigation there are several options:

    • You can add submenus to the main navigation with a nested unordered list.
    • You can include a list of links in the beige area below the main navigation and above the unit contact information.
    • You can use the three-column template and use the third column for this navigation.

    Whichever option you choose, be sure to be consistent throughout the website. Once users understand where to find information on your pages, they will expect to find it in the same place on every page.

    Using tab navigation. Tab navigation is only recommended for sites with specific navigation criteria. Sites with seven or fewer navigation links that use short titles, one- to two-word phrases, might consider using tab navigation. If your navigation links are longer or you think you might want to add more navigation links in the future, it's best to stick with left navigation, which has more flexibility.

    • If tab navigation fits your site, edit the tabs.html file in the includes directory and add your navigation content.
    • If you use a two-line phrase, be sure to break it in the appropriate place with the <br /> tag. Each tab can be a maximum of two lines
    • You can have a maximum of nine tabs.
    • Once you have defined your tab navigation, use the left purple navigation area for the tab-specific links.
    • A tab can be the "active" or "current" tab by adding KSU_tab# to the class declarations on the body tag, where "#" is the number of the tab, from left to right, you want to be active. Example: <body class="KSU_tab1">
  8. Add the content. Place your content in the KSU_mainContent div.
    • h3 is the first heading for your content. (h1 is for "K-State" in the header, and h2 is for your department/unit name in the header.) Follow the heading styles by using h3-h6 in your content.
    • In order for your content to line up at the top of the page with the links in the left sidebar and the right sidebar, you'll need to add the class beginContent to the first tagged content. For example: <h3 class="beginContent">First heading</h3>
    • Use standard HTML code in your content. For example, <h3>, <h4>, <h5>, and <h6> for your headings 1-4, <p> </p> around paragraphs, and <ul> or <ol> for lists. For more information about using the K-State stylesheet and adding your own CSS, see Advanced features.

Converting pages

If you are converting an existing page to the 2006 template style, follow the directions above, then copy and paste your old content into the new template. Start out by copying just the content without additional style from the previous version. Then add style as necessary for your display. For more information about adding your own stylesheet, see Advanced features.