OPAC CUSTOMISATION – CSS, HTML SOURCE CODE (from v20.11 onwards)

Prepared for National Virtual Workshop on Koha ILS Nov. 1-10 2021

Opacheader

Using HTML only

<img src="https://i.postimg.cc/DfWXFYfN/sn-removebg-preview.png" alt="Smiley face" width="70" height="70" style="vertical-align: middle;" /> <b style="color: blue;">SREE NARAYANA COLLEGE LIBRARY & RESOURCE CENTER</b>

Using a Banner

Opacnews

<div style="width: device; text-align: left; border: solid 0px #02c8f9; border-radius: 1px; height: 250px; background: -moz-linear-gradient(top, transparent 80%, #0c426f 100%); padding: 6px; line-height: 12px; color: #333399; font-size: 12px;"><marquee onmouseover="this.stop();" onmouseout="this.start();" direction="up" scrollamount="2" height="200"><br /># Notice for Subscribing E-resource of @ N-LIST of INFLIBNET. <br /># All final year students are requested to return library books before June-2021 <br /># Quotations are invited. Please contact library office. </marquee></div>

</center><hr />

OpacMainUserBlock

<center>Welcome to Demo Central Library</center><br /><img src="/usr/share/koha/opac/htdocs/opac-tmpl/bootstrap/images/main.jpg" width="100%" height="333" />

<h2><span align="center" style="color: #0c426f; font-size: x-large;"> <br />About Library </span></h2>

<p align="justify">The college offers one of the best college libraries in the state of Kerala. The library is a fully automated library. The mission of the college library is to facilitate the creation of new knowledge through the acquisition, organization, and dissemination of knowledge resources and provide value-added services. It has an excellent collection of books, journals, periodicals, nonbook materials in the field of management studies, English literature, sociology, and general books, etc.</p>

<h4>Services Provided</h4>

The library provides the following services.

<ul>

<li>Loan Service</li>

<li>Reference Service</li>

<li>Digital Library Service</li>

<li>New Addition Alert Service</li>

<li>User Education</li>

<li>Current Awareness Service</li>

</ul>

OpacUserCSS

.OpacNavRight_en_header {

border: solid;

border-radius: 20px;

background-color: #1EA5E9;

color: white;

text-align: center;

font-weight: bold;

padding-top: 10px;

padding-bottom: 10px;

font-size: 14px;}

#moresearches li a{

display:inline-block;

color:white;

border:1px solid #CCC;

background:#1EA5E9;

box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);

cursor:pointer;

vertical-align:middle;

font-weight: bold;

padding: 2px;

text-align: center;

border-radius:5px;

}

#moresearches{

text-align: center !important;}

.table tbody tr.warning > td {

background-color: #1EA5E9;

}

.table td, .table th {

line-height: 135%;

}

.table th, .table td {

padding: 8px;

line-height: 20px;

text-align: left;

vertical-align: top;

border-top: 1px solid #dddddd;

}

OpacNav

<h6>Important Links</h6>

<li><a href="http://www.digitallibrary.hec.edu.pk">Digital Library</a></li>

<li><a href="https://youtube.com/">Google</a></li>

<li><a href="https://fb.com/">Facebook</a></li></ul>

<h6>E_Resources</h6>

<li><a href="http://www.digitallibrary.hec.edu.pk">Digital Library</a></li>

<li><a href="https://youtube.com/">Google</a></li>

<li><a href="https://fb.com/">Facebook</a></li>

</ul>

OpacNavBottom

<center><b>OPAC VISIT COUNT</b><p>

OpacNavRight

<thead>

</tr>

</thead>

<tbody>

<td style="color: #ffffff; width: 178.667px; height: 15px;" colspan="2"><center>Library Time</center></td>

</tr>

</tr>

<td style="color: #ffffff; width: 178.667px; height: 15px;" colspan="2"><center>Allowed Circulation Books</center></td>

</tr>

<td style="width: 56.3833px; height: 15px;">Students</td>

</tr>

<td style="width: 56.3833px; height: 15px;">Teachers</td>

<td style="text-align: center; width: 119.283px; height: 15px;">3 books</td>

</tr>

<td style="width: 56.3833px; height: 15px;">Others</td>

</tr>

</tbody>

</table>

<thead>

</tr>

</thead>

<tbody>

<td style="color: #ffffff; width: 178.667px; height: 15px;" colspan="2"><center>Useful links</center></td>

</tr>

<td style="width: 56.3833px; height: 15px;"><a href="http://www.digitallibrary.hec.edu.pk">Digital Library</a></td>

</tr>

<td style="width: 56.3833px; height: 15px;"><a href="https://ndl.iitkgp.ac.in/">National Digital Library</a></td>

</tr>

<td style="width: 56.3833px; height: 15px;"><a href="http://nopr.niscair.res.in/">NISCAIR Online Periodicals</a></td>

</tr>

</tr>

</tr>

<td style="width: 56.3833px; height: 15px;"><a href="http://www.springeropen.com/books">SpringerOpen Books</a></td>

</tr>

<td style="width: 56.3833px; height: 15px;"><a href="http://www.springeropen.com/journals">SpringerOpen Journals</a></td>

</tr>

<td style="width: 56.3833px; height: 15px;"><a href="https://archive.org/">Internet Archive</a></td>

</tr>

</tbody>

</table>

OpacCredit

<div class="text-center">© <script>document.write(new Date().getFullYear())</script> <a href="https://gfgc.kar.nic.in/talakadu"  target="_blank " class="footer_lnk">Government First Grade College</a>. All Rights Reserved.</div>

</div>

<div class="text-center">Implemented by <a href="https://maheshpalamuttath.info/" target="_blank" class="footer_lnk" target="_blank" rel="noopener">Mahesh Palamuttath</a></div>

</div>

OpacLoginInstructions

<p style="font-size: 15px;">Log in with your username and password to know your personal, library details, fines, and other transactions. Username is your library card number (Admission number) password is 123. Change your default password after your first login</p>

<p>Example</p>

<p>Username: GEMS1001<br />Password: 123</p>

</center>

Add New Links in OpacMoreSearch

<a href="/cgi-bin/koha/opac-search.pl">E-Resources</a>

</li>

<a href="/cgi-bin/koha/opac-search.pl">About Library</a>

</li>

<a href="/cgi-bin/koha/opac-search.pl">Register</a>

</li>

<a href="/cgi-bin/koha/opac-search.pl">Gallery</a>

</li>