How to customize Koha OPAC interface

Mainly Koha OPAC is distributed into the following six blocks. The below-mentioned blocks can be customized using koha News Tools (koha version 21.05 and newer version).

Header
Main User Block
Left Navigation Upper
Left Navigation Bottom
Right Navigation
Footer

Let us do customize all the blocks one by one

Header

Create a header image and save it into the home folder of koha
Rename the image (e.g. header.jpg)
Open the terminal (ctrl+alt+t) and Run the following command to copy the header image in htdocs folder of the koha server:-

sudo cp /home/koha/header.jpg /usr/share/koha/opac/htdocs

Login to koha staff interface

Go to Tools→News→New Entry (HTML customization for koha version 21.11)→opacheader

⬇

Enter the following HTML codes in the Source code.

Now Save it and see the preview

Alternatively, if you don't want to a create banner image and want show your institute's header on your Koha OPAC, then copy the address of header (See the below screenshot) from your institutional website and simply paste it in source code.

Now customise the remaining blocks of koha by adding following HTML/ CSS codes:-

Left Navigation (Upper)

Open Tools→News→New Entry (HTML customization for koha version 21.11)→OpacNav

<h6>Important Links</h6>

<ul>

<li style="font-size: 14px;"><a href="https://www.rnpedia.com/">RNPedia(Nusring Notes & Community)</a></li>

<li style="font-size: 14px;"><a href="https://www.currentnursing.com/nursing_theory/">Nursing Theories(Open Access Articles)</a></li>

</ul>

<h6>Open Access E-Books</h6>

<ul>

<li style="font-size: 14px;"><a href="https://www.pdfdrive.com/">PDF Drive</a></li>

<li style="font-size: 14px;"><a href="https://www.gutenberg.org/">Project Gutenberg</a></li>

</ul>

<h6>Open Access E-Journals</h6>

<ul>

<li style="font-size: 14px;"><a href="https://www.journalguide.com/">Journal Guide</a></li>

<li style="font-size: 14px;"><a href="https://paperhive.org/">Paper Hive</a></li>

<li style="font-size: 14px;"><a href="https://www.knowledgeunlatched.org/">Knowlwdge Unlatched</a></li>

</ul>

<h6>Theses & dissertations</h6>

<ul>

<li style="font-size: 14px;"><a href="https://oatd.org/">Open Access Thesis & Dissertations</a></li>

</ul>

Left Navigation (Bottom)

Open Tools→News→New Entry (HTML customization for koha version 21.11)→OpacNavBottom

<pre style="text-align: center;">TOTAL VISITOR</pre>

Main User Block

Open Tools→News→New Entry (HTML customization for koha version 21.11)→OpacMainUserBlock

<center>Welcome to the Library</center> <img src="https://i.postimg.cc/YCJjZ5H8/library.jpg" width="100%" height="200" />

<h2> About Library </h2>

Write Here Welcome massagefor your library.

<style>

#poop {

text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;

font-style: bold;

font-size:2em;

font-weight:bold;

color: #ffffff;

</style>

<div id="poop"> <marquee behavior="scroll" direction="left"> It is recommended to change your default password after the 1st login. </marquee>

</div>

Right Navigation

Open Tools→News→New Entry (HTML customization for koha version 21.11)→OpacNavRight

<table style="border-collapse:collapse;border:none;">
<tbody>
<tr>
<td colspan="2" style="width: 225.15pt;border-top: 1pt solid rgb(79, 129, 189);border-right: 1pt solid rgb(79, 129, 189);border-left: 1pt solid rgb(79, 129, 189);border-image: initial;border-bottom: none;background: rgb(79, 129, 189);padding: 0cm 5.4pt;vertical-align: top;">
LIBRARY TIMINGS
</td>
</tr>
<tr>
<td style="width: 111.75pt;border-top: 1pt solid rgb(79, 129, 189);border-bottom: 1pt solid rgb(79, 129, 189);border-left: 1pt solid rgb(79, 129, 189);border-image: initial;border-right: none;padding: 0cm 5.4pt;vertical-align: top;">
Mon-Fri
</td>
<td style="width: 4cm;border-top: 1pt solid rgb(79, 129, 189);border-right: 1pt solid rgb(79, 129, 189);border-bottom: 1pt solid rgb(79, 129, 189);border-image: initial;border-left: none;padding: 0cm 5.4pt;vertical-align: top;">
9.00 A.M.-5.00 P.M.
</td>
</tr>
<tr>
<td style="width: 111.75pt;border-top: none;border-right: none;border-bottom: none;border-image: initial;border-left: 1pt solid rgb(79, 129, 189);padding: 0cm 5.4pt;vertical-align: top;">
Sat
</td>
<td style="width: 4cm;border-top: none;border-bottom: none;border-left: none;border-image: initial;border-right: 1pt solid rgb(79, 129, 189);padding: 0cm 5.4pt;vertical-align: top;">
9.00 A.M.-2.00 P.M.
</td>
</tr>
<tr>
<td style="width: 111.75pt;border-top: 1pt solid rgb(79, 129, 189);border-bottom: 1pt solid rgb(79, 129, 189);border-left: 1pt solid rgb(79, 129, 189);border-image: initial;border-right: none;padding: 0cm 5.4pt;vertical-align: top;">
Sun & Holiday
</td>
<td style="width: 4cm;border-top: 1pt solid rgb(79, 129, 189);border-right: 1pt solid rgb(79, 129, 189);border-bottom: 1pt solid rgb(79, 129, 189);border-image: initial;border-left: none;padding: 0cm 5.4pt;vertical-align: top;">
Closed
</td>
</tr>
</tbody>
</table>
 
<table style="border-collapse:collapse;border:none;">
<tbody>
<tr>
<td colspan="2" style="width: 225.15pt;border-top: 1pt solid rgb(79, 129, 189);border-right: 1pt solid rgb(79, 129, 189);border-left: 1pt solid rgb(79, 129, 189);border-image: initial;border-bottom: none;background: rgb(79, 129, 189);padding: 0cm 5.4pt;vertical-align: top;">
CIRCULATION PREVILEGE
</td>
</tr>
<tr>
<td style="width: 111.75pt;border-top: 1pt solid rgb(79, 129, 189);border-bottom: 1pt solid rgb(79, 129, 189);border-left: 1pt solid rgb(79, 129, 189);border-image: initial;border-right: none;padding: 0cm 5.4pt;vertical-align: top;">
Students
</td>
<td style="width: 4cm;border-top: 1pt solid rgb(79, 129, 189);border-right: 1pt solid rgb(79, 129, 189);border-bottom: 1pt solid rgb(79, 129, 189);border-image: initial;border-left: none;padding: 0cm 5.4pt;vertical-align: top;">
3 Books
</td>
</tr>
<tr>
<td style="width: 111.75pt;border-top: none;border-right: none;border-bottom: none;border-image: initial;border-left: 1pt solid rgb(79, 129, 189);padding: 0cm 5.4pt;vertical-align: top;">
Faculty
</td>
<td style="width: 4cm;border-top: none;border-bottom: none;border-left: none;border-image: initial;border-right: 1pt solid rgb(79, 129, 189);padding: 0cm 5.4pt;vertical-align: top;">
5 Books
</td>
</tr>
<tr>
<td style="width: 111.75pt;border-top: 1pt solid rgb(79, 129, 189);border-bottom: 1pt solid rgb(79, 129, 189);border-left: 1pt solid rgb(79, 129, 189);border-image: initial;border-right: none;padding: 0cm 5.4pt;vertical-align: top;">
Non- Teaching
</td>
<td style="width: 4cm;border-top: 1pt solid rgb(79, 129, 189);border-right: 1pt solid rgb(79, 129, 189);border-bottom: 1pt solid rgb(79, 129, 189);border-image: initial;border-left: none;padding: 0cm 5.4pt;vertical-align: top;">
2 Books
</td>
</tr>
</tbody>
</table>

Useful Links

<a href="https://www.indiannursingcouncil.org/">Indian Nursing Council</a>

<a href="https://dmer.haryana.gov.in/">DMER Haryana</a>

<a href="https://www.aicte-india.org/">AICTE</a>

<a href="https://delhinursingcouncil.in/DNC">Delhi Nursing Council</a>

<a href="https://www.indiannursingcouncil.org/">Indian Nursing Council</a>

<a href="https://ndl.iitkgp.ac.in/">National Digital Library</a>

<a href="https://shodhganga.inflibnet.ac.in/">Shodhganga</a>

Footer

Open Tools→News→New Entry (HTML customization for koha version 21.11)→Opaccredit

Change OPAC Background Color

Go to Administration→System Preferences→OPAC→OpacUserCss

copy the following tag in OpacUserCss

Body { background-color: orange}

Hide the Koha Logo and Login portion from the right navigation and

Add Barcode in search keyword of Koha OPAC search bar

Go to Administration→System Preferences→OPAC→OpacUserJs

Copy the following tag in OpacUserJs

$("#logo").hide();

$("#login").hide();

$("select[name='idx']").append("<option value='bc'>Accession No.</option>");

Reference:- Koha wiki, W3Schools

How to customize Koha OPAC interface

Header

Left Navigation (Upper)

Left Navigation (Bottom)

Main User Block

Right Navigation

Footer

Change OPAC Background Color

Hide the Koha Logo and Login portion from the right navigation and

Add Barcode in search keyword of Koha OPAC search bar

Posted by Vijender Kumar

Post a Comment

1 Comments

Popular Post

Installation of DSpace 7 on ubuntu 22.04 LTS

Easy steps to Install koha on Ubuntu/Debian

Koha SQL Reports

Import bulk MARC Records Using Command Line