KU Style Sheet Navigation Column Styles

Class: ku_hr_nav
Tags: <div>
A horizontal rule with spacing above and below, in a color that matches the template color scheme and sized for use in the navigation column. This <div> is intended to be empty - it should have no HTML content within it. Usage:

<p> This is one paragraph </p>
<div class="ku_hr_nav"></div>
<p> This is another paragraph </p>

The navigation column in this page uses "ku_hr_nav" just above the "View HTML Source" link.
Working Example

ID: ku_currentpage
Tags: <div>
This <div> should be used to enclose the "Home" link at the top of the navigation column. The use of a "Home" link is not required by any means, but when it is used, this style will set it apart from the links below it with some extra vertical spacing and a horizontal rule.

The navigation column in this page uses "ku_currentpage".
Working Example

ID: ku_leftlinks
Tags: <div>
This <div> should be used to enclose all the menu links in the navigation column. This establishes some basic style rules for menu links which are different from normal links within your page's content panel. Menu links should always look the same color, never changing color once they've been "visited," for example.

The navigation column in this page uses "ku_leftlinks" at the top of the nav column.
Working Example

Class: ku_currentlink
Tags: <a>
This class, when applied to a link in the navigation column, will make that link display in boldface as a visual cue that this link is the one currently being viewed.

This brings up a puzzle: When there's only one navigation include file, how would the "ku_currentlink" class be applied to the correct page, since that same navigation file is used for all the pages in the site? The answer is to use an advanced Server-Side Includes directive, which allows you to say "only do this action in certain circumstances." First, let's look at some sample code and then examine it piece by piece.

<div id="ku_currentpage"><a href="/site/how/index.shtml">KU Web Template</a></div>
<div id="ku_leftlinks">
	<strong>Central IT Servers</strong><br />
	<a href="/site/how/central/index.shtml" <!--#if expr="$DOCUMENT_URI=/central\/index.shtml/" -->class='ku_currentlink'<!--#endif -->>General Instructions</a><br />
	<a href="/site/how/sitesettings.shtml" <!--#if expr="$DOCUMENT_URI=/sitesettings/" -->class="ku_currentlink"<!--#endif -->>Site Settings File</a><br />
	...
</div>

The key is to insert a clause like this inside the <a> tag:
<!--#if expr="..." -->...<!--#endif -->
This is the SSI directive that can be used to insert optional text. There are two pieces that need to be filled in. First:
expr="$DOCUMENT_URI=/SomeTextHere/"
You will need to replace "SomeTextHere" with text of your own choosing. What should you type in its place? You should enter a distinct portion of the link's URL. In the code sample above, the second link uses "sitesettings" as the text since that word only occurs in the link to that specific page - it isn't found in any of the other links. This is important because it keeps the "ku_currentlink" class from being activated on more than one link at once. In the first link in the code sample, the page filename is "index.shtml" which could occur in many places, and the portion of the url just before it is "central", which also occurs in several links. So, both pieces are placed into the /.../ section.
Important: Notice that the text you enter is marked off by / /. If you enter any text between the /'s, you need to put a \ in front of it. See the first link in the code sample for an example. That SSI directive needs to use "central/index.shtml", so the internal / has a \ in front of it.

The second piece you need to fill in (the second "..." in the example above) is the code to make the link highlight. The code you've already finished will decide when to highlight the link, so all that remains is the CSS instruction to make it happen:
class="ku_currentlink"

The navigation column in this page uses "ku_selectedlink" for all the menu links which refer to pages within this documentation set. "ku_selectedlink" is identical in usage to "ku_currentlink" (see below), so this example is helpful for both CSS classes.
Working Example

Class: ku_selectedlink
Tags: <a>
This class, when applied to a link in the navigation column, will make that link display in boldface as a visual cue that this link is the one currently being viewed.

This class is exactly like "ku_currentlink" described above, except that "ku_selectedlink" will only work for links within a <div id="ku_leftlinks"> block.

The navigation column in this page uses "ku_selectedlink" for all the menu links which refer to pages within this documentation set.
Working Example