Koha OPAC part 2: from the top
Following on from the first look at the Koha OPAC elements, this post will explore some of the main UI features of Koha. Like the previous post, this covers making minor adjustments to the existing styles and sketches out some (very) rough implementations. Future updates will delve into more significant redesign options.
Big blue masthead
The main visual element of the default layout is that blue search bar (see it in action here), which includes a logo, search box and navigation. This is largely controlled by the #opac-main-search div and uses a background image for the gradient effect. http://your.url/opac-tmpl/prog/images/menu-background.gif The default background image is 30x150. You can replace this with solid colour or your own background image. (or cheat and use a gradient generator).
(clearly the lime green Cart button will need some work here).
Or you can use solid colour:
The logo
It’s more than likely that you will want to add your organisation's own branding to your OPAC so the top left corner seems as good a place as any to begin. Again, a good reference is Owen Leonard's blog (specifically here and here) where you can find out more about customising the branding using the opacheader preference.
If you’ve got a logo image, you can simply place that where the default Koha logo sits (via the opacsmallimage setting). Or you can remove the logo altogether. But, as you can see below, if your logo is a different size to the default koha logo then part of the image will get cut off. Even a small one like this:
So, either you need to resize your logo to match the default one (which is a teeny tiny, 120x38), or you need to adjust the logo properties in the #libraryname styling.
h1#libraryname { background:transparent url(../../images/koha-logo.gif) no-repeat scroll 0%; border: 0; float : left !important; margin:0; padding:0; width:120px; }
*Logo from Halloween collection YOOtheme
The rest of Opac Main Search
There are quite a few other elements within the #opac-main-search section, all of which can be styled to match the look of your website. You may wish to resize the drop down search options (#masthead_search) or the submit button (#searchsubmit). There's also the Cart and Lists buttons that can usually use some restyling. If you don't use the Cart or Lists options, these buttons can be hidden:
#cartmenulink, #listsmenulink { display: none; }
The row of additional search options is the #moresearches div.
For such an intrinsic part of the OPAC interface, the default search submit button is a bit underwhelming. We can supe this up a bit with some padding and a bit of CSS3 magic:
#searchsubmit { width: auto; padding: 9px 15px; background: #617798; border: 0; font-size: 14px; color: #FFFFFF; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
But if you resize the search button, it will no longer align with the rest of the search form, so we need to do some further adjustments to tidy things up:
#searchsubmit { background-color: #eeeeee; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #cccccc)); background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); background-image: linear-gradient(top, #eeeeee, #cccccc); border: 1px solid #ccc; border-bottom: 1px solid #bbb; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #444; font: bold 1em "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; line-height: 1; padding: 8px 0; text-align: center; text-shadow: 0 1px 0 #eee; width: 130px; } #transl1 { padding: 4px 0px; margin: 0 0.5em; } #masthead_search { font-size: 1.2em; padding: 6px; }
These are just the barest of changes and so far we haven't really addressed any UX design (or colour scheme) considerations.
There's plenty more you can do with the main search bar and I'll take another look at these options in future posts.