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.

Adding Custom HTML

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

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

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:

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>

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.