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:
[sourcecode language=’html’]

Athens County Public Libraries


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:

[sourcecode language=’css’] background:transparent url(../../images/koha-logo.gif) no-repeat scroll 0 50%;
border:0 none;
float:left !important;

The CSS for the <a> tag inside the <h1> hides the link text and sets the container, again, to match the image site:

[sourcecode language=’css’] h1#libraryname a {
border:0 none;
height:0 !important;
padding:40px 0 0;
[/sourcecode] 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:

[sourcecode language=’css’] #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:

[sourcecode language=’css’] h1#libraryname {
h1#libraryname a {
padding:80px 0 0;
#fluid {
margin-left: 224px;

Here is the result:



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.

14 thoughts on “Customizing Koha 3’s OPAC logo

  1. Lynn Henry

    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. Mike Mason

    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.

  3. David Peers

    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.

    1. oleonard Post author

      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.

  4. Isaac Petrascu

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

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

  5. Michael

    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 FilesWin32Padwin32pad.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.


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

    1. oleonard Post author

      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.

  6. Brad G.

    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.

    1. oleonard Post author

      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.

  7. monir

    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.


Leave a Reply

Your email address will not be published.