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.

<img src="http://Kohaopac IP/header.jpg" width="100%" height="100%" alt="" />


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.


<img src="your institution header image address" width="100%" height="100%" alt="" />


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><strong><span style="font-size: 18px;">Important Links</span></strong></h6>
<ul>
    <li style="font-size: 14px;"><a href="https://www.rnpedia.com/">RNPedia(Nusring Notes &amp; 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><span style="font-size: 18px;">Open Access E-Books</span></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.doabooks.org/">DOAB</a></li>
    <li style="font-size: 14px;"><a href="https://bookboon.com/">Book Boon</a></li>
    <li style="font-size: 14px;"><a href="https://www.gutenberg.org/">Project Gutenberg</a></li>
</ul>
<h6><span style="font-size: 18px;">Open Access E-Journals</span></h6>
<ul>
    <li style="font-size: 14px;"><a href="https://www.doaj.org/">DOAJ</a></li>
    <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><span style="font-size: 18px;">Theses &amp; dissertations</span></h6>
<ul>
    <li style="font-size: 14px;"><a href="https://oatd.org/">Open Access Thesis &amp; 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;"><strong><span style="font-size: 20px; text-shadow: rgba(136, 136, 136, 0.8) 3px 3px 2px; color: #b8312f;">TOTAL VISITOR</span></strong></pre>
<div><a href="https://www.freecounterstat.com" title="website counter"><img src="https://counter9.stat.ovh/private/freecounterstat.php?c=s2cqbbh1xck6ecszq698bn7ku9w2du23" border="0" title="website counter" alt="website counter" style="display: block; margin-left: auto; margin-right: auto;" /></a></div>

Main User Block

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

<center>Welcome to the Library</center><br /><img src="https://i.postimg.cc/YCJjZ5H8/library.jpg" width="100%" height="200" />
<h2><span align="center" style="color: #0c426f; font-size: x-large;"> <br />About Library </span></h2>
<p align="justify">Write Here Welcome massagefor your library.</p>

<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

<p style='margin-top:0cm;margin-right:0cm;margin-bottom:10.0pt;margin-left:0cm;line-height:115%;font-size:15px;font-family:"Calibri","sans-serif";'><span style="font-size:12px;line-height:115%;">&nbsp;</span></p>
<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;">
                <p style='margin-top:0cm;margin-right:0cm;margin-bottom:.0001pt;margin-left:0cm;line-height:normal;font-size:15px;font-family:"Calibri","sans-serif";text-align:center;'><strong><span style="font-size:19px;color:white;">LIBRARY TIMINGS</span></strong></p>
            </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;">
                <p style='margin-top:0cm;margin-right:0cm;margin-bottom:.0001pt;margin-left:0cm;line-height:  normal;font-size:15px;font-family:"Calibri","sans-serif";'><strong><span style="font-size:16px;">Mon-Fri</span></strong></p>
            </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;">
                <p style='margin-top:0cm;margin-right:0cm;margin-bottom:.0001pt;margin-left:0cm;line-height:  normal;font-size:15px;font-family:"Calibri","sans-serif";'><span style="font-size:16px;">9.00 A.M.-5.00 P.M.</span></p>
            </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;">
                <p style='margin-top:0cm;margin-right:0cm;margin-bottom:.0001pt;margin-left:0cm;line-height:  normal;font-size:15px;font-family:"Calibri","sans-serif";'><strong><span style="font-size:16px;">Sat</span></strong></p>
            </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;">
                <p style='margin-top:0cm;margin-right:0cm;margin-bottom:.0001pt;margin-left:0cm;line-height:  normal;font-size:15px;font-family:"Calibri","sans-serif";'><span style="font-size:16px;">9.00 A.M.-2.00 P.M.</span></p>
            </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;">
                <p style='margin-top:0cm;margin-right:0cm;margin-bottom:.0001pt;margin-left:0cm;line-height:  normal;font-size:15px;font-family:"Calibri","sans-serif";'><strong><span style="font-size:16px;">Sun &amp; Holiday</span></strong></p>
            </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;">
                <p style='margin-top:0cm;margin-right:0cm;margin-bottom:.0001pt;margin-left:0cm;line-height:  normal;font-size:15px;font-family:"Calibri","sans-serif";'><span style="font-size:16px;">Closed</span></p>
            </td>
        </tr>
    </tbody>
</table>
<p style='margin-top:0cm;margin-right:0cm;margin-bottom:10.0pt;margin-left:0cm;line-height:115%;font-size:15px;font-family:"Calibri","sans-serif";'>&nbsp;</p>
<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;">
                <p style='margin-top:0cm;margin-right:0cm;margin-bottom:.0001pt;margin-left:0cm;line-height:normal;font-size:15px;font-family:"Calibri","sans-serif";text-align:center;'><strong><span style="font-size:19px;color:white;">CIRCULATION PREVILEGE</span></strong></p>
            </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;">
                <p style='margin-top:0cm;margin-right:0cm;margin-bottom:.0001pt;margin-left:0cm;line-height:  normal;font-size:15px;font-family:"Calibri","sans-serif";'><strong><span style="font-size:16px;">Students</span></strong></p>
            </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;">
                <p style='margin-top:0cm;margin-right:0cm;margin-bottom:.0001pt;margin-left:0cm;line-height:  normal;font-size:15px;font-family:"Calibri","sans-serif";'><span style="font-size:16px;">3 Books</span></p>
            </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;">
                <p style='margin-top:0cm;margin-right:0cm;margin-bottom:.0001pt;margin-left:0cm;line-height:  normal;font-size:15px;font-family:"Calibri","sans-serif";'><strong><span style="font-size:16px;">Faculty</span></strong></p>
            </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;">
                <p style='margin-top:0cm;margin-right:0cm;margin-bottom:.0001pt;margin-left:0cm;line-height:  normal;font-size:15px;font-family:"Calibri","sans-serif";'><span style="font-size:16px;">5 Books</span></p>
            </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;">
                <p style='margin-top:0cm;margin-right:0cm;margin-bottom:.0001pt;margin-left:0cm;line-height:  normal;font-size:15px;font-family:"Calibri","sans-serif";'><strong><span style="font-size:16px;">Non- Teaching</span></strong></p>
            </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;">
                <p style='margin-top:0cm;margin-right:0cm;margin-bottom:.0001pt;margin-left:0cm;line-height:  normal;font-size:15px;font-family:"Calibri","sans-serif";'><span style="font-size:16px;">2 Books</span></p>
            </td>
        </tr>
    </tbody>
</table>

<p style='margin-top:0in;margin-right:0in;margin-bottom:10.0pt;margin-left:0in;line-height:115%;font-size:15px;font-family:"Calibri","sans-serif";text-align:center;'><br></p>
<p style='margin-top:0in;margin-right:0in;margin-bottom:10.0pt;margin-left:0in;line-height:115%;font-size:15px;font-family:"Calibri","sans-serif";text-align:center;'><span style='font-size: 20px; line-height: 115%; font-family: "Book Antiqua", "serif"; color: rgb(184, 49, 47);'><strong>&nbsp;Useful Links</strong></span></p>
<p style='margin-top:0in;margin-right:0in;margin-bottom:10.0pt;margin-left:0in;line-height:115%;font-size:15px;font-family:"Calibri","sans-serif";text-align:center;'><span style='font-size:13px;line-height:115%;font-family:"Book Antiqua","serif";color:#212529;'><a href="https://www.indiannursingcouncil.org/"><span style="color:#0074AD;text-decoration:none;">Indian Nursing Council</span></a></span></p>
<p style='margin-top:0in;margin-right:0in;margin-bottom:10.0pt;margin-left:0in;line-height:15.0pt;font-size:15px;font-family:"Calibri","sans-serif";text-align:center;'><span style='font-size:13px;font-family:"Book Antiqua","serif";color:#212529;'><a href="https://dmer.haryana.gov.in/"><span style="color:#0074AD;text-decoration:none;">DMER Haryana</span></a></span></p>
<p style='margin-top:0in;margin-right:0in;margin-bottom:10.0pt;margin-left:0in;line-height:115%;font-size:15px;font-family:"Calibri","sans-serif";text-align:center;'><span style="color:blue;text-decoration:underline;"><span style='font-size:13px;line-height:115%;font-family:"Book Antiqua","serif";color:#0074AD;text-decoration:none;'><a href="https://www.aicte-india.org/"><span style="color:#0074AD;text-decoration:none;">AICTE</span></a></span></span></p>
<p style='margin-top:0in;margin-right:0in;margin-bottom:10.0pt;margin-left:0in;line-height:115%;font-size:15px;font-family:"Calibri","sans-serif";text-align:center;'><span style='font-size:13px;line-height:115%;font-family:"Book Antiqua","serif";color:#212529;'><a href="https://delhinursingcouncil.in/DNC"><span style="color:#0074AD;text-decoration:none;">Delhi Nursing Council</span></a></span></p>
<p style='margin-top:0in;margin-right:0in;margin-bottom:10.0pt;margin-left:0in;line-height:115%;font-size:15px;font-family:"Calibri","sans-serif";text-align:center;'><span style='font-size:13px;line-height:115%;font-family:"Book Antiqua","serif";color:#212529;'><a href="https://www.indiannursingcouncil.org/"><span style="color:#0074AD;text-decoration:none;">Indian Nursing Council</span></a></span></p>
<p style='margin-top:0in;margin-right:0in;margin-bottom:10.0pt;margin-left:0in;line-height:115%;font-size:15px;font-family:"Calibri","sans-serif";text-align:center;'><span style="color:blue;text-decoration:underline;"><span style='font-size:13px;line-height:115%;font-family:"Book Antiqua","serif";color:#0074AD;text-decoration:none;'><a href="https://ndl.iitkgp.ac.in/"><span style="color:#0074AD;text-decoration:none;">National Digital Library</span></a></span></span></p>
<p style='margin-top:0in;margin-right:0in;margin-bottom:10.0pt;margin-left:0in;line-height:115%;font-size:15px;font-family:"Calibri","sans-serif";text-align:center;'><span style="color:blue;text-decoration:underline;"><span style='font-size:13px;line-height:115%;font-family:"Book Antiqua","serif";color:#0074AD;text-decoration:none;'><a href="https://shodhganga.inflibnet.ac.in/"><span style="color:#0074AD;text-decoration:none;">Shodhganga</span></a></span></span></p>
<p style='margin-top:0in;margin-right:0in;margin-bottom:10.0pt;margin-left:0in;line-height:115%;font-size:15px;font-family:"Calibri","sans-serif";text-align:center;'>&nbsp;</p>

Footer

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

<p></p>
<center>&copy; MANC, 2020. All rights reserved.<br /><span style="font-size: small;"><a >Maharaja Agrasen Nursing College,</a> Implemented and Customized by <a >Mr. Vijender Kumar</a></span></center>

Change OPAC Background Color

Go to Administration→System Preferences→OPACOpacUserCss    

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→OPACOpacUserJs

Copy the following tag in OpacUserJs

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

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

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

Reference:- Koha wiki, W3Schools

1 comment:

  1. This knowledge of customization of OPAC is very useful for me..So nice, I shall share in my friend circle

    ReplyDelete

Powered by Blogger.