Flossie 2012: FOSS for libraries

23 more things: the next chapter

23 Things has really caught on in the world of library skills training since its inception all the way back in 2006. It’s one of those uniquely-library developments that ticks quite a few boxes in how to best support (and adapt) self-directed online training. Some of the more recent versions are 23things.wetpaint.com and CPD 23. 

But while the model has proved a raging success for library staff wanting to keep up with social media tools, there’s still a gap for more advanced technical skills training.

It’s with that in mind that the idea for 23 [more] things arose. This is something that was discussed further at the last LibTeachMeet event in London and was partially influenced by #libcodeyear. 

There is a Trello board charting the development and ideas around it but it would be great to hear from anyone who’s interested in participating or has suggestions for particular skills they’d like to see included.

GeekGirlMeetup #GGM12

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.

The Koha OPAC part one: under the hood

The default OPAC for the Koha Library Management System has a clean and simple design, leaving plenty of room for customisation. There are a few options built into the staff client for tweaking your site but the easiest way to make significant changes is by modifying the CSS. This is the start of a series of posts based on my notes from customising the Koha OPAC over the last couple of years (so all errors and best practice fails are my own) and as a result of a current project to overhaul a Koha catalogue.

It’s at least partly inspired by Move the Web Forward (and partly by a vague new year’s resolution to improve my documentation habits). While the first couple of posts will focus on options for making minor adjustments to the OPAC, the later ones will move towards some proof of concept experiments with the Koha OPAC.

A tour of the elements

Before making any changes, it’s a good idea to familiarise yourself with the structure and elements of the Koha OPAC. Koha uses the Yahoo! UI Library for its layout (for both the staff client and the OPAC) which is why you’ll see a lot of references to YUI classes in the CSS overview (below). I won’t be looking at the YUI structure in any detail, but if you’d like to find out more, Owen Leonard has some really great posts explaining the setup.

System Preferences

To make changes to your OPAC design, you can add custom CSS via System Preferences in the staff client.  There are a couple of different fields that let you apply custom code to your OPAC and there’s a neat illustration of these in the manual. Making a lot of edits this way can get a bit cumbersome, particularly if you’re making quite major changes or iterating development over a period of time. In cases like this you may want to add your own stylesheets and there are a couple of different ways you can do this. 


Stylesheets

The main stylesheet for the Koha OPAC is opac.css (found at: /usr/share/koha/opac/htdocs/opac-tmpl/prog/en/css/opac.css in a standard install). This is the one that’s specified in the OPACUserCSS setting by default. You can replace it with your own stylesheet if you want to start entirely from scratch. 

If you’d rather add some of your own styles without losing all of the existing ones you can use an additional stylesheet via the opaccolorstylesheet field. This initially points to the color.css file, an empty file in the default theme directory. You can either add your own style code to color.css or specify an entirely different stylesheet by changing this setting. There’s a good explanation about custom stylesheets in the the Koha manual. 

Putting the pieces together 

So adding a main page heading, for example, can just be a matter of adding text (including HTML tags) to the opacheader field in the System Preferences. Then you can use your own styles to customise this. For example, 

#header-wrapper h1 {
font-family: Palatino, “Palatino Linotype”, “Hoefler Text”, Times, “Times New Roman”, serif;
font-size: 2.5em;
padding-bottom: 0.5em;
text-shadow: 2px 2px #ccc;
}

And you will get something like this: 

Sure, it’s nothing to write home about but you get the idea. 

And then there were divs

The main element is the opac-main div. Some other elements that are going to come in handy are div #header-wrapper, div #opac-main-search, #libraryname and #opacnav and the next post will look at these in a bit more detail. 

Cheatlist #1 - Rapid prototyping

A progressive list of useful cheats, shortcuts and toolkits to help get the job done quickly - no wheel reinvention required.

• MockFlow for a quick mockup

• Foundation CSS Framework (by Zurb)
• (runner-up: Twitter Bootstrap)
• Kuler for colour schemes

• Placehold.it for placeholder images
• IconFinder for icon ..finding.