OPAC Modifications
OPAC Header Image in Intranet
sudo cp /home/koha/header.png /usr/share/koha/opac/htdocs
OPAC User JS
$("select[name='idx']").append("<option value='bc'>Accession No.</option>");
$("#login").hide();
$("#logo").hide();
OPAC Interface Color and Set the OPAC Background Image
Go to : Home › Administration › System preferences › OPAC › OpacUserCSS
Final Full coding Style available in the end
OpacUserCSS open a tag for body and set the background to color:
body {
background:#FFF8D6;
}
OpacUserCSS open a tag for body and set the background to Image:
body {
background-image: url("http://www.lecturemaker.com/wp-content/uploads/2013/07/HP_paper.gif");
background-color: #F4ECF7;
}
Next try changing the standard link colour:
a, a:visited
{
color:#3366ff;
}
To change the link colour on mouse over.
/*change link hover property*/
a:hover {
color:#900C3F;
}
The footer is a good place to put copyright and contact information if you want to display that on the OPAC.
#opaccredits {
background: linear-gradient(180deg, #8b0000 0%, #990000 32%, #900C3F 64%, #8b0000 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8b0000', endColorstr='#8b0000', GradientType=1 ); padding: 10px; color:#fff;
}
change the colour of the top header/navbar.
#header-region, .navbar-inverse .navbar-inner { background:#63F1F8; }
You might notice that the dividers keeping the text nicely spaced on the header are still black like the header background was before we changed the colour.
.navbar-inverse .divider-vertical
{
border-right-color: #993300;
}
The text on the header is also now unreadable so we need to change the font colour in order to make in readable.
.cartlabel, .listslabel
{
color: #2db300;
}
#members a
{
color: #8000ff;
}
OPAC User Login / logout link a darker red.
#members a.logout
{
color:#ff3300;
}
Final Full coding Style sheet
body
{
background:#FFF8D6;
}
{
background-image: url("http://www.lecturemaker.com/wp-content/uploads/2013/07/HP_paper.gif"); background-color: #F4ECF7;
}
a, a:visited { color:#3366ff;
}
/*change link hover property*/ a:hover
{
color:#900C3F;
}
#opaccredits
{
background: linear-gradient(180deg, #8b0000 0%, #990000 32%, #900C3F 64%, #8b0000 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8b0000', endColorstr='#8b0000', GradientType=1 ); padding: 10px; color:#fff;
}
#header-region, .navbar-inverse .navbar-inner
{
background:#63F1F8;
}
.navbar-inverse .divider-vertical
{
border-right-color: #993300;
}
.cartlabel, .listslabel
{
color: #2db300;
}
#members a
{
color: #8000ff;
}
#members a.logout
{
color:#ff3300;
}
OPAC Youtube video auto play
<center><iframe width="300" height="200" src="https://www.youtube.com/embed/VhwL27RSzFg?autoplay=1&mute=1">
</iframe></center>
Header OPAC
<center><a href=Koha OPAC Web Address target="_blank" rel="noopener"><img
Src=Image address title="Library Name" width="auto" height="auto"/></a></center>
<h4><center>Library Name Display as Heading</h4></center>
or
<marquee align="center" behavior="alternate" direction="left" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="6" style="font-size: 14px; color: #dd0b18; font-family: Arial;"> <b> Ready to Access Free Library and Information Center</b> </marquee>
Display New Arrivals on OPAC
Manual Method | Specifies the URL of the image (src)
<p>Please tab the cover image for biblio record.</p>
<br><marquee behavior="scroll" direction="left">
<a target="_self" href="/cgi-bin/koha/opac-detail.pl?biblionumber=651"><img src="https://books.google.com/books/content?id=Df81PQAACAAJ&printsec=frontcover&img=1&zoom=1" alt="" border="0"></a>
<a target="_self" href="/cgi-bin/koha/opac-detail.pl?biblionumber=658"><img src="https://books.google.com/books/content?id=m55nAAAAMAAJ&printsec=frontcover&img=1&zoom=1" alt="" border="0"></a>
</marquee>
Opac Main User Block
<p align="justify"><h4>..:: Welcome to Library Name ::..</br></br></p align="justify"></h5><p align="justify">You are at the Summon Search of Library Name. Summon is a new kind of database or library search engine that includes records of print and electronic books, book contents, journals, theses and dissertations, videos lectures, and more.<br><br> The new system easy the searching and browsing of all resources of Library Name through the simple and advanced search options; the simple search engine is limited to, search by the keyword, title, author, subject, ISBN, series and the call number while the advanced search brings the Boolean operators and also limit the date-range of publications, item types, languages, locations, libraries and the availability.<br><br>Furthermore, all electronic resources can be accessed on-campus only, while registered members are allowed to log in with their ID and password, and after login, they can modify their personal details along with password change; members are also permitted to view the summary of their checked out items, fine paid, reading and search history and can submit on-line recommendations for purchasing of books or journals.<br><br>Kindly contact us at <a href="mailto:Your Email ID">Your Email ID</a> or <a href="mailto: Your Email ID "> Your Email ID </a> for further details.<hr></h7>
OPAC NAV Important Links
<h6>Important Links</h6>
<ul class="unstyled">
<li><a href="http://www.digitallibrary..com">Digital Library</a></li>
<li><a href="https://youtube.com">Youtube</a></li>
<li><a href="https://fb.com/">facebook</a></li>
</ul>
<a href="
https://demo.com/" target="_blank" rel="noopener"><img src="
https://lh5.googleusercontent.com/WyXnDfAsvcLhFDI8LX20NWQaLws7_wxqHl29vBvhtnR-42249G7e2bsWjD0Slg11s6N06d2Ax6LmdNMLTJ6Q9VroSEV6P5u66983iUEgtxEUTIN8NRedUFldnH1DFQI5mw=w1280" width="300" height="309" alt="" style="float: right;" /></a>
Enable Quote of the Day feature
Koha > Administration > Global System Preferences > OPAC > QuoteOfTheDay > Enable
Add CSS
Koha > Administration > Global System Preferences > OPAC > OPACUserCSS
Add following CSS query.
#daily-quote {
background-color:#FFFFFF;
border:2px solid #000000;
border-radius:15px 15px 15px 15px;
margin:0 0px 0px;
text-align:center;
width:auto;
}
#daily-quote-text{
color: Green;
font-weight: bold;
}
#daily-quote-source {
color: Red;
font-weight: bold;
}
Save it
Upload the quotes file
Koha > Tools > Edit quotes for QOTD feature > Import quotes
Model File: https://drive.google.com/file/d/1u5soG4dYsq0PKcjoumutvDJVz75HFfv_/view
OPAC More Search
<style>
.dropbtn {
background-color: white;
color: #54B6FF;
padding: px;
font-size: 13px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 150px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: transparent;
}
</style>
|
<div class="dropdown"><button class="dropbtn">E-Books</button>
<div class="dropdown-content"><a href="https://www.sciencedirect.com/" target="_blank" rel="noopener">Academic Press</a> <a href="https://www.bloomsburycollections.com/search" target="_blank" rel="noopener">Bloomsbury</a> <a href="https://www.sciencedirect.com/browse/journals-and-books" target="_blank" rel="noopener">Butterworth</a> <a href="https://www.cambridge.org/core/what-we-publish/books" target="_blank" rel="noopener">Cambridge</a> <a href="https://www.degruyter.com/" target="_blank" rel="noopener">De Gruyter</a> <a href="http://www.sciencedirect.com" target="_blank" rel="noopener">Elsevier</a> <a href="https://www.sciencedirect.com/browse/journals-and-books" target="_blank" rel="noopener">Gulf Professional Publishing</a> <a href="https://link.springer.com/" target="_blank" rel="noopener">Humana Press</a> <a href="http://mcgrawhilleducation.pdn.ipublishcentral.com/bookshelf" target="_blank" rel="noopener">McGraw Hill</a> <a href="https://www.sciencedirect.com/browse/journals-and-books" target="_blank" rel="noopener">Newnes</a> <a href="https://ebookcentral.proquest.com/lib/psgct/" target="_blank" rel="noopener">Pearson</a> <a href="https://about.proquest.com/en/products-services/ebooks-main" target="_blank" rel="noopener">Pearson</a> <a href="https://www.worldscientific.com/page/worldscibooks" target="_blank" rel="noopener">Vieweg+ Teubner Verlag</a></div>
</div>
|
<div class="dropdown"><button class="dropbtn">E-Journals</button>
<div class="dropdown-content"><a href="http://ascelibrary.org" target="_blank" rel="noopener">ASCE</a> <a href="http://asmedigitalcollection.asme.org/journals.aspx" target="_blank" rel="noopener"> ASME</a> <a href="http://enterprise.astm.org" target="_blank" rel="noopener">ASTM</a> <a href="http://ieeexplore.ieee.org" target="_blank" rel="noopener">IEEE</a> <a href="https://www.scopus.com/" target="_blank" rel="noopener">SCOPUS</a></div>
</div>
|
<div class="dropdown"><button class="dropbtn">Remote Access</button>
<div class="dropdown-content"><a href="https://psgtech.knimbus.com/" target="_blank" rel="noopener">Knimbus</a> <a href="https://idp.psgtech.ac.in/" target="_blank" rel="noopener"> INFED</a></div>
</div>
|
Enhanced Digital Library Virtual Interface OPAC
User JS
// eBook results
$("#userresults").ready(function(){
$("#userresults table td").each(function(i){
td = $(this);
var pgbks_link = td.find("a[href^='https://doaj.org/toc']");
var linkc = pgbks_link.parent();
var pgbks_link = pgbks_link.attr("href");
if(pgbks_link){
$("td:eq("+i+") span.availability,td:eq("+i+") span.actions").hide();
linkc.html('<a class="ebook" href="'+pgbks_link+'"><img src="https://lh4.googleusercontent.com/Tsij938Mxo5xDpEK4LNXJoj5LSN6tA6jIQDcUFeJeraWIPxusy4QawNkHEeatXkQvNJiHvFz9zKiI0CtmUdY8f0=w1280" alt="Tab here for eBook" width="200" height="25" /></a>');
}
});
});
// eBook detail
$("span.online_resources").ready(function(){
var pgbks_link = $("span.online_resources a[href^='https://doaj.org/toc']").attr("href");
if(pgbks_link){
$("#holdings").html('<a href="'+pgbks_link+'"><img src="https://lh4.googleusercontent.com/Tsij938Mxo5xDpEK4LNXJoj5LSN6tA6jIQDcUFeJeraWIPxusy4QawNkHEeatXkQvNJiHvFz9zKiI0CtmUdY8f0=w1280" alt="Tab here for eBook" width="300" height="50" /></a>');
}
});
/* ---------------------------------------------------------------------------- */
// E-Journal results
$("#userresults").ready(function(){
$("#userresults table td").each(function(i){
td = $(this);
var pgbks_link = td.find("a[href^='http://link.springer.com']");
var linkc = pgbks_link.parent();
var pgbks_link = pgbks_link.attr("href");
if(pgbks_link){
$("td:eq("+i+") span.availability,td:eq("+i+") span.actions").hide();
linkc.html('<a class="ebook" href="'+pgbks_link+'"><img src="https://lh3.googleusercontent.com/k_Gvt985TAisv59DBViDw1nCKYsuRTiBUmEOSUZVQmigK7HiPk1Em7cqxCwSVHWAPP912Xo47Zbs_wqJFlVCDs4=w1280" alt="Tab here for E-Journal" width="200" height="25" /></a>');
}
});
});
// E-Journal detail
$("span.online_resources").ready(function(){
var pgbks_link = $("span.online_resources a[href^='http://link.springer.com']").attr("href");
if(pgbks_link){
$("#holdings").html('<a href="'+pgbks_link+'"><img src="https://lh3.googleusercontent.com/k_Gvt985TAisv59DBViDw1nCKYsuRTiBUmEOSUZVQmigK7HiPk1Em7cqxCwSVHWAPP912Xo47Zbs_wqJFlVCDs4=w1280" alt="Tab here for E-Journal" width="300" height="50" /></a>');
}
});
/* ---------------------------------------------------------------------------- */
// E-Thesis results
$("#userresults").ready(function(){
$("#userresults table td").each(function(i){
td = $(this);
var pgbks_link = td.find("a[href^='https://www.tandfonline.com']");
var linkc = pgbks_link.parent();
var pgbks_link = pgbks_link.attr("href");
if(pgbks_link){
$("td:eq("+i+") span.availability,td:eq("+i+") span.actions").hide();
linkc.html('<a class="ebook" href="'+pgbks_link+'"><img src="https://lh3.googleusercontent.com/x_uCPUycp-5WDThKUHC4j7TZFZRgewYxafkyb1-QDq1594B3l41E2-pJFPou1AlaLj8bN8LgRL2gc8oZBn_rN_8=w1280" alt="Tab here for E-Thesis" width="200" height="25" /></a>');
}
});
});
// E-Thesis detail
$("span.online_resources").ready(function(){
var pgbks_link = $("span.online_resources a[href^='https://www.tandfonline.com']").attr("href");
if(pgbks_link){
$("#holdings").html('<a href="'+pgbks_link+'"><img src="https://lh3.googleusercontent.com/x_uCPUycp-5WDThKUHC4j7TZFZRgewYxafkyb1-QDq1594B3l41E2-pJFPou1AlaLj8bN8LgRL2gc8oZBn_rN_8=w1280" alt=" Tab here for E-Thesis" width="300" height="50" /></a>');
}
});
/* ---------------------------------------------------------------------------- */
OPACUserCSS
/*page background and font*/
body {
background-color: #fff;
font-family: sans-serif;
font-size: 14px;
}
/*header background*/
#opacheader {
background-color: #fff;
margin-top: 5px;
}
/*padding around header image*/
#opacheader img {
padding-top:15px;
padding-bottom:15px;
padding-left:10px;
}
/*link color*/
a, a:hover, a:focus {
color: #5a2374 !important;
}
/* center more searches bar */
#moresearches {
text-align: center;
}
/*Change navbar color*/
.navbar-inverse .navbar-inner {
background-image: linear-gradient(to bottom, #5a2374, #5a2374);
border-color: #5a2374;
background-color: #5a2374;
}
/*change navbar font to white*/
.navbar-inverse .brand, .navbar-inverse .nav > li > a, #members a {
color: #fff !important;
}
/*remove black bars from nav bar*/
.navbar-inverse .divider-vertical {
border-left-color: #5a2374;
border-right-color: #5a2374;
}
/*searchbox background*/
.mastheadsearch {
background: linear-gradient(to bottom, #5a2374 38%, #5a2374 100%) repeat scroll 0% 0% transparent;
}
/*search label made white*/
.mastheadsearch label {
color: white;
}
/*Search button color*/
.btn-primary {
color: #000;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);
background-color: #F2F2EF !important;
background-image: linear-gradient(to bottom, #F2F2EF, #5a2374) !important;
}
#bib_holds {
border: 2px solid #5a2374;
border-radius: 15px 15px 15px 15px;
font-weight: bold;
padding-left: 10px;
}
-----
OPACUserCSS
#opac-main-search {
background: #151b54;
margin: 7px 0;
padding: 15px;
}
body {
background-color: #E5E4E2;
}
.main {
background-color: #E5E4E2;
border: 1px solid #E5E4E2;
margin: 15px;
padding: 1rem 0;
}
HTML button
<a href="https://youtube.com"><button type="button">Facebook</button></a>
CSS button
<style>
.button {
border: none;
color: white;
padding: 12px 80px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.button1:hover {
background-color: #008CBA;
color: white;
}
.button2 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.button2:hover {
background-color: #008CBA;
color: white;
}
.button3 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.button3:hover {
background-color: #008CBA;
color: white;
}
.button4 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.button4:hover {
background-color: #008CBA;
color: white;
}
.button5 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.button5:hover {
background-color: #008CBA;
color: white;
}
.button6 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.button6:hover {
background-color: #008CBA;
color: white;
}
.button7 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.button7:hover {
background-color: #008CBA;
color: white;
}
</style>
<h2>Important links here</h2>
<a href="https://youtube.com"" target="_blank"><button class="button button1">Facebook</button></a> <br />
<a href="https://youtube.com"" target="_blank"><button class="button button2">Facebook</button></a><br />
<a href="https://youtube.com"" target="_blank"><button class="button button3">Facebook</button></a><br />
<a href="https://youtube.com"" target="_blank"><button class="button button4">Facebook</button></a><br />
<a href="https://youtube.com"" target="_blank"><button class="button button5">Facebook</button></a><br />
<a href="https://youtube.com"" target="_blank"><button class="button button6">Facebook</button></a><br />
<a href="https://youtube.com"" target="_blank"><button class="button button7">Facebook</button></a>
https://catalog.slocanlibrary.ca/cgi-bin/koha/opac-search.pl?advsearch=1&weight_search=1&do=Search&limit=mc-itype%2Cphr%3ABK&sort_by=relevance
OPAC Credits
<p><br><center>© RAFLIMTS, 2019. All rights reserved.<br><font size="2">(<a
href="http://wiki.koha-community.org/wiki/KohaUsers/SouthAsian#table_row_4">Koha-ILS,</a>
Implemented and Customized by <a href="https://pk.linkedin.com/pub/furrukh-hussain-
zai/a2/1/598">Mr. Furrukh Hussain Zai</a> for Ready Access to Free Library and Information Management Technologies in
2019)</font></center></p>
OPAC Calendar View in Tools News HTML Edit
<!DOCTYPE html>
<html>
<center>
<h2 style="color:DodgerBlue;">Calendar</h2>
<script language="javascript" type="text/javascript">
var day_of_week = new Array('Sun','Mon','Tue','Wed','Thu','Fri','Sat');
var month_of_year = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
// DECLARE AND INITIALIZE VARIABLES
var Calendar = new Date();
var year = Calendar.getFullYear(); // Returns year
var month = Calendar.getMonth(); // Returns month (0-11)
var today = Calendar.getDate(); // Returns day (1-31)
var weekday = Calendar.getDay(); // Returns day (1-31)
var DAYS_OF_WEEK = 7; // "constant" for number of days in a week
var DAYS_OF_MONTH = 31; // "constant" for number of days in a month
var cal; // Used for printing
Calendar.setDate(1); // Start the calendar day at '1'
Calendar.setMonth(month); // Start the calendar month at now
/* VARIABLES FOR FORMATTING
NOTE: You can format the 'BORDER', 'BGCOLOR', 'CELLPADDING', 'BORDERCOLOR'
tags to customize your caledanr's look. */
var TR_start = '<TR>';
var TR_end = '</TR>';
var highlight_start = '<TD WIDTH="30"><TABLE CELLSPACING=0 BORDER=1 BGCOLOR=DEDEFF BORDERCOLOR=CCCCCC><TR><TD WIDTH=20><B><CENTER>';
var highlight_end = '</CENTER></TD></TR></TABLE></B>';
var TD_start = '<TD WIDTH="30"><CENTER>';
var TD_end = '</CENTER></TD>';
/* BEGIN CODE FOR CALENDAR
NOTE: You can format the 'BORDER', 'BGCOLOR', 'CELLPADDING', 'BORDERCOLOR'
tags to customize your calendar's look.*/
cal = '<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=0 BORDERCOLOR=BBBBBB><TR><TD>';
cal += '<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=2>' + TR_start;
cal += '<TD COLSPAN="' + DAYS_OF_WEEK + '" BGCOLOR="#EFEFEF"><CENTER><B>';
cal += month_of_year[month] + ' ' + year + '</B>' + TD_end + TR_end;
cal += TR_start;
// DO NOT EDIT BELOW THIS POINT //
// LOOPS FOR EACH DAY OF WEEK
for(index=0; index < DAYS_OF_WEEK; index++)
{
// BOLD TODAY'S DAY OF WEEK
if(weekday == index)
cal += TD_start + '<B>' + day_of_week[index] + '</B>' + TD_end;
// PRINTS DAY
else
cal += TD_start + day_of_week[index] + TD_end;
}
cal += TD_end + TR_end;
cal += TR_start;
// FILL IN BLANK GAPS UNTIL TODAY'S DAY
for(index=0; index < Calendar.getDay(); index++)
cal += TD_start + ' ' + TD_end;
// LOOPS FOR EACH DAY IN CALENDAR
for(index=0; index < DAYS_OF_MONTH; index++)
{
if( Calendar.getDate() > index )
{
// RETURNS THE NEXT DAY TO PRINT
week_day =Calendar.getDay();
// START NEW ROW FOR FIRST DAY OF WEEK
if(week_day == 0)
cal += TR_start;
if(week_day != DAYS_OF_WEEK)
{
// SET VARIABLE INSIDE LOOP FOR INCREMENTING PURPOSES
var day = Calendar.getDate();
// HIGHLIGHT TODAY'S DATE
if( today==Calendar.getDate() )
cal += highlight_start + day + highlight_end + TD_end;
// PRINTS DAY
else
cal += TD_start + day + TD_end;
}
// END ROW FOR LAST DAY OF WEEK
if(week_day == DAYS_OF_WEEK)
cal += TR_end;
}
// INCREMENTS UNTIL END OF THE MONTH
Calendar.setDate(Calendar.getDate()+1);
}// end for loop
cal += '</TD></TR></TABLE></TABLE>';
// PRINT CALENDAR
document.write(cal);
// End -->
</script>
</center><br />
<div style="clear: both;"></div>
</html>
Koha OPAC Side Scroll Nav
<style>
#mySidenav a {
position: absolute;
left: -40px;
transition: 0.3s;
padding: 15px;
width: 100px;
text-decoration: none;
font-size: 20px;
color: white;
border-radius: 0 5px 5px 0;
}
#mySidenav a:hover {
left: 0;
}
#
about {
top: 20px;
background-color: #04AA6D;
}
#
blog {
top: 80px;
background-color: #2196F3;
}
#
projects {
top: 140px;
background-color: #f44336;
}
#
contact {
top: 200px;
background-color: #555
}
</style>
<div id="mySidenav" class="sidenav">
<a href="LINK" id="about" target="_blank" rel="noopener">NAME</a>
<a href="LINK/" id="blog" target="_blank" rel="noopener">NAME</a>
<a href="LINK" id="projects" target="_blank" rel="noopener">NAME</a>
<a href="
LINK" id="
contact " target="_blank" rel="noopener">
NAME</a></div>
<div style="margin-left: 80px;"></div>
Comments
Post a Comment