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
- 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> - 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:
Suggested colors for text:
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.)
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:
- 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.
- Put this newly created file in the same directory as your template page.
- 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/