Showing posts with label Customization. Show all posts
Showing posts with label Customization. Show all posts

Monday, July 25, 2022

How to Change the OPAC Interface Color and Set the OPAC Background Image (OPAC Themeing)

 

Go to : Home › Administration › System preferences › OPAC › OpacUserCSS


OpacUserCSS open a tag for body and set the background to color:


body { 
background:#228599; 
}

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"); 
 }

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;
}

Go to : Home › Administration › System preferences › OPAC › opaccredits

<body>
<footer>
<div class="container"> <center> 
<font color="white"> Designed & Maintained by: 
<a href="https://www.youtube.com/channel/UC3wql6wxktbjRCdPMo9SXoA" target="_blank">Lib Power Tech</a></strong> 
<br> Lib Power Tech Library, <strong>Contact: <strong> libpowertech@gmail.com</strong></font></center></br>
</footer>
</body>


Finally, we will change the colour of the top header/navbar. 

#header-region, .navbar-inverse .navbar-inner { background:#5bad3f; }

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-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:#5bad3f; 
 .navbar-inverse .divider-vertical 
{
border-right-color: #993300; 
 } 
 .cartlabel, .listslabel 
 color: #2db300; 
 #members a 
{
 color: #8000ff; 
}
 #members a.logout 
color:#ff3300; 

How to koha OPAC New Arrivals Books Display

 

Koha CoverFlow (New Arrivals)

Create a SQL public Report

Create a report and please note down the report id (here is SQL statement for New Arrivals)
Reports › Create from SQL
Copy and paste the following line.

SELECT b.biblionumber, i.Barcode, SUBSTRING_INDEX(m.isbn, ' ', 1) AS isbn, b.title 
  FROM items i
  LEFT JOIN biblioitems m USING (biblioitemnumber)
  LEFT JOIN biblio b ON (i.biblionumber=b.biblionumber)
  WHERE DATE_SUB(CURDATE(),INTERVAL 15 DAY) <= i.dateaccessioned AND m.isbn IS NOT NULL AND m.isbn != ''
  GROUP BY biblionumber
  HAVING isbn != ""
  LIMIT 30

Koha CoverFlow Setup

Download the koha-plugin-coverflow

Enable Koha plugins

You must first Enable Koha plugin and some changes, so visit the video: https://youtu.be/9LJb7X0NXGo

Upload Plugin

Go to Administration > Manage plugins > Upload a plugin > Choose > koha-coverflow-plugin-v2.4.0.kpz and upload

Once the Koha coverflow plugin was install click on Configure

In the Image options Section
            Limit image size (height in pixels) 250
Limit title length (width in pixels) 150

In the mapping Section following line copy and paste

---
- id: 27
  selector: "#coverflow"
  options: 
  style: coverflow
- id: 27
  selector: ".coverflow_class"
  options:
  buttons: true
  autoplay: 3000
  style: wheel

 

NOTE: Where id: 20 is the report id please write your SQL report id

Web Server Configuration

Open Applications > System Tools > Terminal

Apply the following command

sudo su (Enter the mysql password)
sudo leafpad /etc/apache2/sites-enabled/library.conf

Add the following line at the bottom of the file. replace the library with your koha instance name

ScriptAlias /coverflow.pl "/var/lib/koha/library/plugins/Koha/Plugin/Com/ByWaterSolutions/CoverFlow/coverflow.pl"
Alias /plugin/ "/var/lib/koha/library/plugins/"
# The stanza below is needed for Apache 2.4+
<Directory /var/lib/koha/library/plugins/>
      Options Indexes FollowSymLinks
      AllowOverride None
      Require all granted
</Directory>

Restart memcached: 
sudo service memcached restart

Restart your webserver: 
sudo service apache2 restart

OPAC Config

Now go to Administrator > global system preferences > OpacMainUserBlock

I put the following line in the system preference OpacMainUserBlock:

<b><h2><center><u><font color="purple">New Arrivals</font></h2></b></u>
<span id="coverflow">Loading...</span></center>