Tag Archives: UI

Adding a Left-hand Navigation Menu

On of the options we have for customizing Koha’s OPAC is to add a custom menu to the left-hand column. Just like with the opacheader preference, this is done by adding HTML markup to a system preference: OpacNav (Koha has an annoying lack of consistency when it comes to system preference capitalization).

If you’ve just installed Koha for the first time there is probably some default text in your OpacNav preference, “Important links here.” This bit of example content might lead to questions like “Important links where?,” but it’s just a way to point out one of your customization options. If you delete the contents of OpacNav, the left-hand column will go away on most pages. The exception is the facets column on the search results page and menus on user pages when you’re logged in.

The Athens County Public Libraries OPAC has no OpacNav content for a couple of reasons: First, our site-wide navigation is in the horizontal menu in the OPAC header; Second, having a resident left-hand sidebar takes up valuable screen real estate. I’d rather be able to give plenty of room for the content the user is looking for.

Other libraries choose to add content to the OpacNav preference because it fits their users’ expectations (as it did ours in our previous designs). Luckily OpacNav is just as flexible as opacheader in terms of creating the look and feel you want.

Creating the custom menu

OpacNav is even easier than opacheader because its position in the template doesn’t lead to any float/clearing problems like we saw in the opacheader article. Let’s start again at Listamatic for a good self-contained vertical list design. I’m going to pick a fairly simple one: Bieler Batiste’s list. The HTML gets pasted into the OpacNav preference:


<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

Paste the CSS into your custom stylesheet (specified in opaccolorstylesheet) or paste it into the OPACUserCSS preference:


#navlist li
{
display: inline;
/* for IE5 and IE6 */
}

#navlist
{
width: 7em;
/* to display the list horizontaly */
font-family: sans-serif;
margin: 0 0 0 3em;
padding: 0;
border-top: 1px #000 solid;
border-left: 1px #000 solid;
border-right: 1px #000 solid;
}

#navlist a
{
width: 99.99%;
/* extend the sensible area to the maximum with IE5 */
display: block;
background-color: #fff;
border-bottom: 1px #000 solid;
text-align: center;
text-decoration: none;
color: #000;
}

#navlist a:hover { background-color: orange; }
#navlist a:visited { color: #000; }

koha3-opacnav

Easily done. The next thing you have to consider, though, is how your custom menu is going to interact with the other menu users will see when they’re logged in and looking at their account pages.

The User Menu

The user menu is the menu you’ll see on some pages if you’re logged in. The menu links you to your account summary page (your checkouts, overdues, and holds), your fines, user tags, etc. The user menu, when it appears, will appear underneath the menu you added to OpacNav.

After you’ve added a custom menu, log in to your OPAC and see how it looks on the user pages.

koha3-opacnav-usermenu It looks fine, but why not take a few extra steps to integrate it better with the look of the existing menu. I’m going to tweak these properties to help match the user menu:

  1. border color
  2. margin
  3. padding
  4. width

Here’s the updated CSS:


#navcontainer {
margin-right:0.5em;
padding-top:1em;
}
#navlist li {
display: inline;
/* for IE5 and IE6 */
}

#navlist {
width: 9em;
/* to display the list horizontaly */
font-family: sans-serif;
margin: 0 0 0 1em;
padding: 0;
border-top: 1px #979797 solid;
border-left: 1px #979797 solid;
border-right: 1px #979797 solid;
}

#navlist a {
width: 99.99%;
/* extend the sensible area to the maximum with IE5 */
display: block;
background-color: #fff;
border-bottom: 1px #979797 solid;
text-align: center;
text-decoration: none;
color: #006699;
}

#navlist a:hover { background-color: #D4E2FF; }

koha3-opacnav-usermenu2

That’s the basics. Browse through the Listamatic site for more ideas. And remember, you’re not limited to just navigation links when you’re customizing OpacNav. You can add any kind of static content. The Rockingham Free Public Library lists their hours. The Polytechnic Institute of NYU’s Bern Dibner Library has a Meebo widget for instant chatting between OPAC user and library staff [edit: At least they used to. 7-15-2010].

It’s a narrow canvas, but it’s open for just about anything you can think of.

Adding a custom header to Koha 3’s OPAC

In the last post I covered customizing the Koha logo in the OPAC. Now let’s look at another way to change the look of your OPAC, the opacheader system preference.

The opacheader system preference lets you embed custom markup within the structure of OPAC pages. It controls the area of the page above the persistent blue search bar and below the menu at the top that contains login information (either “Log in…” or “Logged in as…”):

<div id="members">
<ul><li><a href="/cgi-bin/koha/opac-user.pl">Log in to Your Account</a></li></ul>
</div>

<!-- opacheader markup will be embedded here -->

<div id="opac-main-search" class="yui-g">
<h1 id="libraryname"><a href="/cgi-bin/koha/opac-main.pl">Athens County Public Libraries</a></h1>
<div id="fluid">
<div id="fluid-offset">
<form name="searchform" method="get" action="/cgi-bin/koha/opac-search.pl" id="searchform">

This placement gives us all the freedom we need to add a library name, a larger logo, or even additional menus.  That’s what I’ve done with the Athens County Library System’s OPAC. A custom OPAC logo sits above a version of the persistent navigation menus that appear on every page of the Athens County Library System web site. Visitors to our OPAC see elements which are visually consistent with our web site and can keep oriented with the same navigation scheme.

koha3-opacheader-0

Adding Custom HTML

The simplest use of the opacheader preference would be to add a simple heading:

<h1>Springfield Free Public Library Catalog</h1>

koha3-opacheader-1

How about a menu like we have on ACPL’s OPAC? Let’s pick something from Listamatic, a terrifc source of inspriation when building menus with HTML and CSS. For this example we’ll try the Rollover horizontal list navbar. First we grab the HTML and save it in the opacheader system pref:

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

Next grab the CSS and add that to the OPACUserCSS system pref:

#navcontainer ul {
padding-left: 0;
margin-left: 0;
background-color: #036;
color: White;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a {
padding: 0.2em 1em;
background-color: #036;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}

#navcontainer ul li a:hover {
background-color: #369;
color: #fff;
}

Now let’s check our work:

koha3-opacheader-3

Close, but not quite. The new menu is overlapping the search menu. Floats in the menu CSS are causing the menu not to clear. Luckily there is a float-clearing class in the default OPAC CSS we can apply here: we’ll add class="clearfix" to the menu container’s markup:

<div id="navcontainer" class="clearfix">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

koha3-opacheader-4

Of course that’s a fairly basic menu with minimal styling. Browse the other menus on the Listamatic site for more ideas. To duplicate the rounded-tab look on ACPL’s menus, check out the sliding-doors technique on A List Apart.

Customizing Koha 3’s OPAC logo

koha3-opac-logoIn Koha 3, the Koha logo is embedded in the blue search bar which appears on every page. The source for the logo image, as in Koha 2, can be changed via a system preference: opacsmallimage. The difference in Koha 3 is that the display of the logo is much more tightly integrated with the layout of the page, making it a little trickier to embed a custom image. The logo is displayed using an image-replacement technique with the intention of creating more semantic and accessible markup. The HTML consists of an h1 tag and a link:

<h1 id="libraryname">
<a href="/cgi-bin/koha/opac-main.pl">Athens County Public Libraries</a>
</h1>

The CSS for the <h1> tag defines a background image for the element and a fixed width to match the image that will appear in its place:

background:transparent url(../../images/koha-logo.gif) no-repeat scroll 0 50%;
border:0 none;
float:left !important;
margin:0;
padding:0;
width:120px;

The CSS for the <a> tag inside the <h1> hides the link text and sets the container, again, to match the image site:

h1#libraryname a {
border:0 none;
cursor:pointer;
display:block;
height:0 !important;
margin:0;
overflow:hidden;
padding:40px 0 0;
text-decoration:none;
width:120px;
}

Notice that the first padding value matches the height of the koha logo image, and the width value matches the image height.

There’s one more setting that fits together with these to place all these pieces together. One of the containers that fits together to make the search bar is <div id=”fluid”>, a container that holds all the elements to the right of the logo. div#fluid has a left margin that matches the width of the logo:

#fluid {
margin-left: 124px;
margin-top : .4em;
padding-left : 1em;
}

Using a custom logo

Okay, so what does all this mean for the purposes of adding a custom logo? Let’s use as an example a custom logo for the Athens County Public Libraries, 200 pixels x 80 pixels. We’ll put the image on the web somewhere and point the opacsmallimage system pref to that location.  Here are the results:

koha3-acpl-logo1 As you can see, the image is the wrong size for the “container” formed by the CSS. In order to make it fit we have to redefine the container. We’ll do that by entering some CSS into the OPACUserCSS sytem preference:

h1#libraryname {
width:220px;
}
h1#libraryname a {
padding:80px 0 0;
width:220px;
}
#fluid {
margin-left: 224px;
}

Here is the result:

koha3-acpl-logo2

Recommendations

This technique gives you some freedom to customize, but care should be taken when using logos that are very much bigger than the default Koha logo. In the example above, using an image as wide as 220 pixels pushed the width of the search bar contents so wide that the contents wrapped when the browser was resized to 800 x 600 pixels. Best practices will be determined by your audience and their expectations for how your site will appear in their browser.