Skip to the content

Kansas State University

Advanced Features

The web templates include optional features for advanced developers. These features include additional stylesheets (like the options.css styles); color changes for navigation and tabs; photos and quote box additions; and server-side includes. You'll find the details below.

Cascading Style Sheets

K-State's standard stylesheet is automatically included in template pages. It contains pre-defined styles for the standard HTML you use to create your pages.

Naming conventions

All classes and IDs in the K-State standard stylesheet have been assigned names with the prefix "KSU_". Do not use this prefix if you create additional classes and/or IDs. Doing so may result in your styles overriding the K-State standard styles or vice versa.

Add your own stylesheet

You can create and add styles or a complete stylesheet to your template files. Be sure to note the naming conventions above when naming your styles. The two recommended ways of adding styles are

  1. In the head of the file. If you have one or two styles you want to add for a specific purpose, add them inside the head:
    <head>
     -- header info here --
     <style type="text/css">
      stylename { style:defintion;}
     </style>
    </head>
  2. As a separate stylesheet. If you have quite a few styles you want to use in your site, you can add a complete stylesheet in the head of your template:
    <head>
      <style type="text/css">@import url("/path/to/your/stylesheet.css");</style>
    </head>

Both of these should be added as the last item in the head of the file, just before the </head> tag. Be sure it is added after this code:
<!--#ksustd element="resources" format="2006" -->

Change colors with options.css
The options.css stylesheet provides built-in options to change colors in the template. Elements that can change color:
  • Left sidebar navigation (purple left column): background, text, links, bullets
  • Secondary sidebar (dark beige left column): background, text, links
  • Right column: background and text
  • Tabs: background, left bar on each tab, and text

Suggested color palette for page elements:

purple teal gold light purple beige light beige grey

Suggested colors for text:

white grey black

The hexidecimal codes for the colors are in the comments of the options.css stylesheet. Read the stylesheet's comments for details on what to change.

The options.css stylesheet must be in the head, following:
<!--#ksustd element="resources" format="2006" -->.

This code calls the K-State core stylesheets. Any additional styles must follow it in order to have priority over the core styles.

Use this code format to call your stylesheet:
<style type="text/css" media="screen">@import url("/yourdirectory/css/options.css");</style>

This path shows that a separate CSS directory must be created, and options.css and any other stylesheets you use must be inside this directory. (The process below will create the CSS directory and copy the options.css file to it.)

Copy the options.css stylesheet
To get the options.css file, type your unit's web directory in the space below and click Copy stylesheet. A CSS directory will be created in your web space and the options.css file will be copied into the directory. Call the stylesheet in the head of your document exactly as it has been referenced above, where "yourdirectory" is your unit's web space.


http://www.k-state.edu/

Server-side includes

Server-side includes can be used to display a common set of links and/or text on more than one page. For example, if you have the exact same links in the left column on multiple pages, you can create the text once, and "include" it in all the pages.

On the Template Selector, if you select the "Separate left navigation file" or "Add tab navigation," your template will be set up to use server-side includes. You can edit the sidebar.html or tab.html files found in the directory named "includes" in your web space.

How to make a server-side include:

  1. Create a new HTML file that contains only the code for the specific text or set of links you want to duplicate. Do not add HTML or body tags around the code.
  2. Put this newly created file in the same directory as your template page.
  3. In the template page, add the following line where you want the code in the new HTML file from Step 1 to appear:
    <!--#include virtual="filename.html"-->
    where "filename.html" is the name of the file you just created.

The sidebar include code looks like this:
<!--#include virtual="/yourdirectory/includes/sidebar.html" -->

Header and footer

The standard header and footer are inserted using server-side includes.

The header include looks like this:
<!--#ksustd element="tbar" unit="DirectoryName" title="Page Title/Department Name" format="2006"-->

The footer include looks like this:
<!--#ksustd element="bbar" unit="DirectoryName" format="2006"-->

where

  • "DirectoryName" is the name of your unit's web directory,
  • "Page Title/Department Name" is the name displayed in the upper left corner of the page, and
  • the other elements stay the same.

Template code details

See an example of the full template code with comments.

Fluid width vs. fixed width

The template default is fluid width. A fluid width is more flexible and allows users to decide how much of a browser window or page they prefer to view.

If you desire a fixed-width page, add class "KSU_fixed" to the end of the body tag's class attribute:
<body class="KSU_fixed">

Two-column format with empty left sidebar

If you prefer a two-column format, but don't have content for the left sidebar, you can add the following code inside the KSU_sidebar div:
<div id="KSU_emptyColumn"></div>

This will give you two columns with the beige sunflower column on the left.

Photo and quote box

To add a photo and/or quote box -- such as on the K-State second-level pages (examples: About K-State, Academics) -- add the following code sample code directly beneath the KSU_mainContent div:
<div id="KSU_photoBar">
<div class="KSU_photoBox"><img src="/KSU_resources/page-art/filename.jpg" alt="photo description" /></div>
<div class="KSU_bragBox"><p>Your quote goes here.</p></div>
</div>

where "filename.jpg" is the name of your photograph file, and "photo description" accurately describes the photo.

The photo bar is set up to show the maximum amount of content for an 800-pixel, fixed-width page.

2-column page photo bar choices:

3-column page photo bar choices:

  • One photo
  • Two photos
  • One quote (example)

Additional photos or quotes will not appear in the content. Also, note that the quote box does not remove text that overflows. You need to check your content to make sure it fits.

Photo images must be 170 width x 150 height pixels. Photos available for use are stored at: http://www.k-state.edu/KSU_resources/page-art/