Customizing Koha 3′s OPAC logo

koha3-opac-logoIn 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:

koha3-acpl-logo1 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:

koha3-acpl-logo2

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

14 Responses to “Customizing Koha 3′s OPAC logo”

  1. Lynn Henry Says:

    I’m not adept at html or java. Wondered if you could help me in customizing my catalog on koha. I’m not sure after reading several of the tutorials how to actually change the source code on the koha server.

  2. oleonard Says:

    Lynn, changing the source code on the server is a much bigger job than I can cover here. If changing the core functionality of Koha is something you require for your library and you don’t have the resources in-house to accomplish it I’d recommend looking into paid support: http://koha-community.org/support/paid-support/

  3. Mike Mason Says:

    Advice for newbies like me who know little about html: The code given above to enter into OPACUserCSS works fine, provided you DON’T include the line numbers in your cut-and-paste as I did! They are not part of the code, and they prevent it working.
    Just above the code are 3 icons. If you click on the left one (a notched page with ) you get the code without line numbers which you can cut and paste.

  4. David Peers Says:

    This blog helped me in narrowing down some problems with the latest release candidate, Why do they always seem to leave out vital documentation when they release a new version? It may be minor to them but not to me. I’m sure we’re not alone.

  5. Adalid Ortiz Says:

    Hi, i want help about to change de opac form background, color, buttons, text messages, etc. Could you give me a step by step instructions.

    Saludos cordiales.

  6. oleonard Says:

    I think you’ll get a lot of good ideas by browsing the customization posts on this site, but this isn’t the place for answering questions unrelated to this post. If you have specific questions, you might want to join the Koha mailing list and ask there.

  7. Isaac Petrascu Says:

    Usually Koha comes:

    h1#libraryname {
    174 background:transparent url(../../images/koha-logo)no repeat scroll 0%;
    175 border: 0;
    176 float : left !important;
    177 margin:0;
    178 padding:0;
    179 width:80px;

    you need to add:
    height;

    http://www.w3schools.com/CSS/pr_dim_width.asp you can check some ccs codes from the width

    the h1#libraryname a is for the main name of the page.

    if you need or dont need bordes on the image use the padding of ccs
    more information here :
    —–> http://www.w3schools.com/css/css_padding.asp

    By the way if you whant to change the name of the logo and use JPEG
    edit the opac.css in the opac directory

  8. Michael Says:

    You can use FileZilla along with Win32pad to edit everything directly rather than using the System Preferences.

    Hunt down and install both FileZilla and Win32pad.

    Edit your FileZilla settings to Use custom editor:
    “C:\Program Files\Win32Pad\win32pad.exe”

    Log into your server under root with port 22 which does the sftp.

    Upload your logo to /home/koha/kohaclone/koha-tmpl/opac-tmpl/prog/images

    Edit the opac.css to your hearts content. Navigate to the following location on your server. Then Right click View/Edit.

    /home/koha/kohaclone/koha-tmpl/opac-tmpl/prog/en/css/opac.css

    Change the (../../images/koha-logo.gif) with to your own logo gif or png will work. And all the appropriate Width and Padding (Height)

  9. oleonard Says:

    Michael, you’re correct: That procedure will work for Windows users who want to edit the OPAC’s default CSS file. However, doing so will cause you problems when it is time to upgrade Koha. The advantage of using system preferences is that these changes carry over from version to version. Editing the CSS directly is not recommended.

  10. Michael Says:

    How would you shift over your logo to the right a little?

  11. Brad G. Says:

    Is there a way to hide just the search bar but show all of the Library announcements (stuff in OPAC Main User Block and OPAC nav) until someone has logged in. I know I can turn off the page completely until someone logs in, but would like to let the patrons see the announcements and nav links without logging in, but not search without logging in.

  12. oleonard Says:

    There isn’t a way to do this without modifying Koha’s code. It sounds like a nice enhancement though. I would encourage you to pursue it if you have the resources.

  13. monir Says:

    How i can customize opac search & log in , password field. as i m new & already i have done our opac customization but i did not do change 2 parts, please help me.

  14. oleonard Says:

    monir your question could probably be better answered on the Koha mailing list (http://koha-community.org/support/koha-mailing-lists). If you do ask there, please include the version of Koha you’re using and a detailed explanation of what you’re trying to do.

Leave a Reply


Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported.