Librarian Adda: June 2019

Create web page on main user blok in koha

Create web pages in Koha (Koha as a CMS)

Users can publish pages on Koha OPAC and OPAC can act as a tiny library web site. I have tried this feature on Koha 3.22.10 version. Very detailed documentation available at Koha Wiki. Here is Koha OPAC with few pages; http://mgucat.mgu.ac.in

A page in OPAC to describe library collection.

Edit Pages.pl file
Open Applications > Accessories > Terminal

sudo su
cd /usr/share/koha/opac/cgi-bin/opac
cp opac-main.pl pages.pl

Open following file,

leafpad /usr/share/koha/opac/cgi-bin/opac/pages.pl

Find following line,

Line 34 (Approximately)

Comment following line by adding #

#template_name => "opac-main.tmpl",

Add the following line below,

template_name => "pages.tt",

Next,
Find following piece of code, line 60 (Approximately)

$template->param(
           koha_news       => $all_koha_news,
           koha_news_count => $koha_news_count,
           display_daily_quote => C4::Context->preference('QuoteOfTheDay'),
           daily_quote         => $quote,
           );

Add following piece of code below,

my $page = "page_" . $input->param('p');            # go for "p" value in URL and do the concatenation
           my $preference = C4::Context->preference($page);    # Go for preference
           $template->{VARS}->{'page_test'} = $preference;     # pass variable to template pages.tt

Save and close the file.

Change user permission of pages.pl file,

chmod 755 pages.pl

Editing the pages template
Make copy of opac-main.tt and rename it to pages.tt

cd /usr/share/koha/opac/htdocs/opac-tmpl/bootstrap/en/modules

cp opac-main.tt pages.tt

Open pages.tt file in a text editor;

leafpad /usr/share/koha/opac/htdocs/opac-tmpl/bootstrap/en/modules/pages.tt

Find following pice of code at line 68 (approximately)

[% IF ( OpacMainUserBlock ) %]<div id="opacmainuserblock">[% OpacMainUserBlock %]</div>[% END %]

Replace with following lines,

[% IF ( page_test ) %]<div id="opacmainuserblock">[% page_test %]</div>[% END %]

Save and close the file.

Open following file,

sudo leafpad /etc/koha/apache-shared.conf

Add following line at line 12,

ScriptAlias /pages.pl "/usr/share/koha/opac/cgi-bin/opac/pages.pl"

Save and close the file.

Restart Apache

/etc/init.d/apache2 restart

Create first page
Koha > Administration > System preferences > Local use < New preference

Create a sample page.

Add more pages by creating new system preference. The page title should begin with "page_" (e.g. page_collection).

Try new page on browser http://127.0.1.1/pages.pl?p=test

You can place links anywhere in Koha.
For exmaple, links on left side of OPAC.

Add following HTML tag in System Preferences > OPAC > opacnav

<a href="http://127.0.1.1/pages.pl?p=test">Services</a>

The page link will appear in OPAC left navigation space.

Reference
Koha Geek

To stop login the right-hand column of the OPAC’s main page

Placed in

OPACUserCSS

#login {
display: none;
}
#login {
background-color : #FFF;
position : absolute;
top : 0;
right : 0;
padding-top : 5px;
width : 22em;
}
#auth fieldset,
#auth fieldset.brief {
border : none;
display : inline;
margin : 0;
padding : 0;
}
#auth input {
font-size : 75%;
}
#auth legend {
display : none;
}
#auth label {
display : inline;
font-size : 85%;
}
#auth li,
#auth ol {
display : inline;
}
#login #userid, #login #password {
width:auto;
}
#auth fieldset.action input {
margin: 0;
padding : 0;
}
#auth fieldset.action {
margin-bottom : -5px;
}
#opac-main-search {
margin-top : 1.5em;
}

opac credits

<!DOCTYPE html>
<html>
<body>

<h3 style="background-color:#f97d09;"><center><font color="white"><font size="5">Implemented and maintained by Central Library</h3>

<div id="histats_counter"></div>

<script type="text/javascript">var _Hasync= _Hasync|| [];
_Hasync.push(['Histats.start', '1,4269332,4,9,110,60,00011100']);
_Hasync.push(['Histats.fasi', '1']);
_Hasync.push(['Histats.track_hits', '']);
(function() {
var hs = document.createElement('script'); hs.type = 'text/javascript'; hs.async = true;
hs.src = ('//s10.histats.com/js15_as.js');
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(hs);
})();</script>
<noscript><a href="/" target="_blank"><img src="//sstatic1.histats.com/0.gif?4269332&101" alt="hit tracker" border="0"></a></noscript>

</body>
</html>

Main user block

<marquee><font size="4" color="#278d27"><b><i>Welcome to Central Library OPAC....</marquee>
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-content w3-section" style="max-width:700px">

<img class="mySlides w3-animate-fading" src="library.jpg" style="width:100%">
<img class="mySlides w3-animate-fading" src="library1.jpg" style="width:100%">
<img class="mySlides w3-animate-fading" src="library3.jpg" style="width:100%">
<img class="mySlides w3-animate-fading" src="library4.jpg" style="width:100%">
<img class="mySlides w3-animate-fading" src="library5.jpg" style="width:100%">
<img class="mySlides w3-animate-fading" src="library6.jpg" style="width:100%">
<img class="mySlides w3-animate-fading" src="library7.jpg" style="width:100%">
<img class="mySlides w3-animate-fading" src="library2.jpg" style="width:100%">
</div>

<script>
var myIndex = 0;
carousel();

function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 9000);
}
</script>

</body>
</html>

opac nav right

<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}

td, th {
border: 3px solid white;
text-align: left;
padding: 8px;
}

tr:nth-child(even) {
background-color: #f97d09;
}
</style>
</head>
<body>

<table style="width:100%">

<tr>
    <th><center><font size="4" color="green"><b><u>Library Timing</th>

</tr>
<tr>
    <td><center><font color="white"><b>Monday-Friday 9.00am-10.00pm<br>Saturday & Sunday 9.00am-6.00pm<br>Library remain closed only national hoilidays</td>

</tr>
   <tr>
    <th><center><font size="4" color="green"><b><u>Membership Benefits</th>

</tr>
<tr>
    <td><center><font color="white"><b>Students- 3 books<br>Faculty- 5 books<br>Non-teaching- 2 books</td>

</tr>

<tr>
    <th><center><font size="4" color="green"><b><u>Contact Us</th></tr>
    <tr>
    <td><center><font color="white"><b>email-addalibrarian@gmail.com<br>Mobile-9064252623</td>

</tr>
</table>

</body>
</html>

opac buttom

<div class="mapouter"><div class="gmap_canvas"><iframe width="200" height="200" id="gmap_canvas" src="https://maps.google.com/maps?q=BPCL%20Nit%20Rourkela&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>Google Maps Generator by <a href="https://www.embedgooglemap.net">embedgooglemap.net</a></div><style>.mapouter{position:relative;text-align:right;height:200px;width:200px;}.gmap_canvas {overflow:hidden;background:none!important;height:200px;width:200px;}</style></div>

Opac nav

<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}

td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;

background-color:#f97d09;
</style>
</head>
<body>

<table>
<tr>
    <td><center><a href="http://library.nitrkl.ac.in/"><font color="white"><b>Home</td>

</tr>
<tr>
    <td><center><a href="http://library.nitrkl.ac.in/"><font color="white"><b>About Library</td>

</tr>

<tr>
    <td><center><font color="white"><b>Circulation Rules</td>

</tr>
<tr>
    <td><center><font color="white"><b>e-Resources</td>

</tr>
<tr>
    <td><center><font color="white"><b>Library Team</td>

</tr>
<tr>
    <td><center><font color="white"><b>Useful Links</td>

</tr>

</table>

</body>
</html>

opac user js for showing acc no

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

opac user css

.mastheadsearch {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: .8em;
margin: .5em 0;
background: #FF6600;
/* Old browsers */

background: -moz-linear-gradient(top, #FF6600 38%, #a7a7a2 100%);