How to customize Koha OPAC interface

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

Enter the following HTML codes in the Source code box.

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.bikash.com/">bikash</a></li>

<li style="font-size: 14px;"><a href="https://www.bikash.com/">(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>");

My Blog List

Saturday, April 5, 2025

How to customize Koha OPAC interface

No comments:

Post a Comment

LAW OF LIBRARY SCIENCE

Search This Blog

Labels

Blog Archive

About me

Popular Posts