How to customize Koha OPAC interface

Customized Koha OPAC looks like a professional website. 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 (using Canva), rename the image (e.g. header.jpg) and save it into the home folder of koha.

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

Now login to koha staff interface

Go to Tools → Additional tools → HTML customization → New Entry

1. Choose Opacheader from Display Location 2. Choose all Library or any specific library 3. Enter the title name 4. Click on the Source Code Icon

Enter the following HTML codes in the Source code box.

Now Save it and see the preview

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

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

Left Navigation (Upper)

Go to Tools → Additional tools → HTML customization → New Entry

1. Choose OpacNav from Display Location 2. Choose all Library or any specific library 3. Enter the title name 4. Click on the Source Code Icon

<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)

Go to Tools → Additional tools → HTML customization → New Entry

1. Choose OpacNavBottom from Display Location 2. Choose all Library or any specific library 3. Enter the title name 4. Click on the Source Code Icon

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

Main User Block

Go to Tools → Additional tools → HTML customization → New Entry

1. Choose OpacMainUserBlock from Display Location 2. Choose all Library or any specific library 3. Enter the title name 4. Click on the Source Code Icon

<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 massage for 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

Go to Tools → Additional tools → HTML customization → New Entry

1. Choose OpacNavRight from Display Location 2. Choose all Library or any specific library 3. Enter the title name 4. Click on the Source Code Icon

<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

Go to Tools → Additional tools → HTML customization → New Entry

1. Choose OpacCredits from Display Location 2. Choose all Library or any specific library 3. Enter the title name 4. Click on the Source Code Icon

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

Most Popular

Installation of DSpace 7 on ubuntu 22.04 LTS

Koha SQL Reports

Easy steps to Install koha on Ubuntu/Debian

Import bulk MARC Records Using Command Line

No Dues/Discharge Certificate for Library

Labels

Menu Footer Widget

Contact form

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

You may like these posts

Post a Comment

1 Comments

Most Popular

Installation of DSpace 7 on ubuntu 22.04 LTS

Koha SQL Reports

Easy steps to Install koha on Ubuntu/Debian

Import bulk MARC Records Using Command Line

No Dues/Discharge Certificate for Library

Labels

Menu Footer Widget

Contact form