Koha Blog

In 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:

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:

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.

Tags: Customization, OPAC, UI

This entry was posted on Thursday, February 26th, 2009 at 11:45 am and is filed under Koha UI. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.