Monthly Archives: April 2009

New SQL Repository on the Koha Wiki

Koha users have begun building a library of useful SQL statements for use in building Koha reports. It’s on the Koha Wiki. You can add your own or put in a request for a report you’d like to know how to do. If you’d like to contribute you can either register on the site or use OpenID to log in. If you’ve never edited a wiki before, be sure to check out the the Wiki’s help page on editing before you jump in.

Moving around your book covers

I often hear people ask if they can have their book covers on the left-hand side of the search results list. This is one of the aspects of Koha 2.x that some people miss. Because the search results are in a table, you can’t simply change something in the CSS to move the images to the other side of the screen. Without changing the template itself, what can we do?

Usually my response is live with it, but it occurred to me yesterday that jQuery could handle this:

$(document).ready(function(){
$(".searchresults tr td:last-child").each(function () {
$(this).prependTo($(this).parent());
});
});

After the standard leading “(document).ready” stuff, the script starts by looking for elements inside anything with a class “searchresults.” That’s a <div> that surrounds the search results table. We’re looking for any <td> which is the “last child” of a <tr>. That is, the last table cell in each table row. jQuery’s each() function lets us loop over each instance of those last-child <td>’s that we find and perform some action on it.


$(this).prependTo($(this).parent());

This is the action we’re performing for each <td> our script matches. “$(this)” is how we identify the matched <td>. Then we use the prependTo() function to “cut” that <td> and “paste” it at the beginning of the row. Notice the element we’re prepending to is “$(this).parent().” parent() selects the element which “contains” $(this): <tr> contains <td>, so we’re moving our <td> to the beginning of the row.

Paste the script into your opacuserjs system preference and try a search. It works in my test, but don’t take my word for it. Test carefully and let me know if you see any problems with it.

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.