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.
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.
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
Change OPAC Background Color
Go to Administration→System Preferences→OPAC→OpacUserCss
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→OPAC→OpacUserJs
Copy the following tag in OpacUserJs
$("#logo").hide();
$("#login").hide();
$("select[name='idx']").append("");
Reference:- Koha wiki, W3Schools
Tags:
KohaOPAC Customization
