Koha OPAC Interface Designing 1: Customizing Header, Footer, Navigation, Main Body, Theme, and more

[Applause] [Music] [Music] hello and very warm welcome to RAF flames this is for Rufus and and today we are going to learn an important topic in Koha operational and administrative skills series its interface designing of coha grabovac by OPEC we mean the online public access catalog the catalog of Koha is based on web and it's using bootstrap in that's mean it is adjustable on all size of devices screen for example you have mobile for example you have laptop for example you have normal computer size of a screen so all the TV you have it is adjustable on all size of Spain so and it can be designed effectively with HTML CSS and J's I mean the JavaScript and it can be customized through the global system preferences so this is actually a part of global system preferences and we will design the interface of Kohath pag through the global system preferences so let me open my web browser and there you can see I just open the cohort demo or you can open your system but for practice purposes I would recommend to use for demo just need to write koha demo in your web browser and there you can click on the faux hawk community website alternatively you can visit the community site and there you will find the Koha demo on the Quahog community side so let me open one staff interface and the foot pack of that to login with its staff interface you need to use this login password and also I would recommend to use tohe manual if you want to learn more about fauxhawk it's Koha manual for 19.1 one you just need to write in your web browser and the very first link is about the poha map so there you can see the info ha manual you can learn more about the OPAC in global system preferences let me login this hey the demo site this is one of the demo I mean it's actually in staff interface and this is actually the poha web browser I mean the OPAC web browser so there we have a back pack is catalog new name its act the online public access catalog but this is actually the catalog of poha that's available on web and your and it's actually online public access catalog but you can limit this to your stock only I mean to your patterns only by default you can see the Oh patch something look like this there you can see this is actually the bootstrap theme and this theme is actually adjustable on all sides of the screen for example either you have mobile either you have a laptop whatever the size of your screen it is adjustable on all size of you can see this anyhow so there we have administration and administration we have global system preferences in global system preferences we have a pack and in effect we have these preferences I mean the features advanced search options appearance features open URL payment policy privacy restricted page self registration and shelf proud so there you can see we have these preferences and we are more concerned with the appearance right now but I will discuss all of them to show you more options about Cova so this video is really very important and I would recommend to finally watch this completely so here we have advanced search options so there you can see it has two preferences I mean the two values so you can see let me open the advanced search here and there you can see a lots of options are available to search sometimes this actually confuse your patterns to select what or what not so you can limit this by using this option for example advanced up back advanced search option so you can select all of them or you can uncheck you example sorting for example subtypes for example languages you are not multilingual you can uncheck this and you can save this so now see what happened here so few options are hide actually I mean sorting languages they all have to fight from this effect but this is actually the advanced search but I would recommend to use all of them as it is then we come to the appearance appearance is more important in appearance the first value is above the pebbly or default view what is Biblio default view if someone searched in your bag for example i just right this is just an example so if someone searched in your bag so he or she will see the search result in three styles and seed in three style but by default what you want to open first I mean the normal view the Matthew and the IASB DVD for example this is the mark you and this is actually is BD view I mean the international standard bibliographic description you so what you you want to provide to your patterns when they search something but this is normal so there you can select I mean for example simple form mark form all is beating so I would recommend to use simple as it is then the important value is actually here we have a hide loss item so you can hide loss item if you want to hide on default search and detail pages so you can hide this but the important value here we have lab rename then you can see the poha online catalog you can replace this with your lab rename for example this is one example average this is not the real Larry's died Public Library so you can replace this with your library name example see what happened here now it has changed to Z Public Library Catalog and even you can actually change this catalog ah if you go to poha server and there you need to work on this template and you can commit this catalog word and you can write your library name as it is this is actually the main page and then advanced and the search result on all pages you will display this oh ha I mean your library theme it's a public library or you can use your library name whatever so the OPAC additional stylesheet you can use additional stylesheet in the CSS stylesheet cascading style sheets this is actually cascading so you can use cascading style sheets I mean these ESS a side sheet if you have I'll show you when we will come to the CSS option so I'll show you how you can change this statute this is a coupon and then we have a pack add masked hat labrie pull down this is actually master hat so they pull down let me show you you have two options on main page of your pack this exactly to select the field what you want to skirt and this is actually the search bar write your Kure and if you want to display if you are if you have multiple libraries for example you have number of branches and you want to display all of them on your front page so you can do this you just need to use this Oh FAQ masthead library pulldown and you just need to add this and all your branch libraries or all your spa bloggers will display you can see this all libraries so pattern can select anyone where he want to search that particular book then we have another option or a path base URL so you can use your pack you are el but the important is actually pack credits Oh pack credits is actually a footer area there the bottom area of your foot pad here we have few areas for example this one is actually the Hatter this is actually the left navigation this is white navigation this is a main user block and here we have the footer area I mean the credit area so you can write the credits I mean the who has implemented for here or your institution name so you can use this portion of paid purpose so let me write one and you can make it more fancy by using HTML script so let me write one all this is just a simple form all right reserved to ref lifts and here this is actually just a simple form now see what happened here but if I want to make this more fancy I want to use HTML script here so I have pure script for you so if you need do the script you can contact me you can write your email address in the comment box and I will email you all these script so let me open this so this is one script actually let me change this so let me show you okay there you have to write the library name and you have to write your URL if you have some particular URL you want to show there okay this is one script where I have implemented Koha so let me copy this let me paste here now I have paste the script here you can see this is actually the script it's paragraph the space center the value will come in Center and then you need to close this and then the URL you want to write let me show you the result first now see what happened here there you can see this is actually the library name where I have implemented oh hi all right reserve the poha URL train its poha ILS implemented and customized by me for the university name and here this is actually one script that I have and you can contact me and I'll email you if you want and you can use your own by using HTML script you can write your own more battle so if someone click here they will he or she will reach my website and there is another web site I'm in my profile area so if you want to write something like this so you can contact me this is actually the credit area or you can meet I mean you can provide whatever you want to provide within the credit areas so if you are actually a system lab and you are implemented poha in your library or you are just a librarian or you have implemented for her there you must have to write a credit your name indicated box but that your university or your institution must allow you to display your name ok back custom search you can add some search by the HTML I mean custom search box but we are skipping this ah back display eight five six you as image it eight five six is actually mark tag for the URL so you can display URL as as an image both on detail page and the result pages on both you can use this option and after this we have another important area it's called opac favicon pack favicon is actually this icon this icon Kay icon on the top tab of your web browser so you can see this and if you want to replace this icon you just need to provide the image address in the favicon box for example this image is actually the logo of my organization just right-click with your mouse and copy image address and you need to provide that image address in in this favicon Bob this is image address and save this now you will see the K logo will replace by the particular image he has replaced after the favicon we have another important area we call it a pack header and opac header let me tell you this is by default the back of koha and this area after the koha logo and this book bag this area is called the OPAC header and this area I'm in this search bar and this area is called masked pad and then we have left navigation and we have white navigation and we have credits down the bottom and then the middle area is called the main user block so for example let me show you one a pack of green each University with permission of Asif my friend so this is actually the other area there you can add your logo similar like this and this is the left navigation and here we have right navigation this is called main user block and this area is called the credits or footer so to add your institutional logo you need to provide some HTML script here or CSS you can or you can use html5 script for moving object as the header so I have pure script here let me show you Helder and if you want this script so you can contact me you can drop your email address or the whatsapp number in the comments so I'll share it so there you can see let me explain you force and then the result is actually like this this is the rhythm of this particular a script so there you need to provide the web address of your oh how fact for example this is the web address of your Quahog back all you even you use localhost you need to provide the localhost or if you have some IP address then you need to provide that IP at this well let us assume this is the web address for the air if we have the vectors this is just an example to just paste that web address and then target will be blank what does it mean blank if someone click on that particular image this will open in new tab the target will be blank and image address what image you want to place here as the logo for example let's select this just click write with your mouse and copy image address and then title if someone mouse over on your this image what title will come up for example you can see this within each library and information it's all set with the title will be this one example to mean eh loudly this is just an example and what Hadding you want to display after a logo like this okay Electric Cooperative here let me copy this here see what happened when I save this you can see this in each university library and then an if someone click on this the pack will be opening new tab but this way you can add any header or if you want to just use heading not the logo you can do this this way actually you can walk on this header portion and after we had ER we have here we have one feature it's not bhakti I don't think this is actually concerned with appearance but let me show you I mean let me explain you this is actually a pack highlighted words not highlighted words this is something like this if someone searched your Oh pack whatever the terms he put there that this the term will be display as highlighted to leave it as it is highlighted or if you want to provide some stop word for example these words are restricted I mean not allowed in your effect for example like this no one can search like this so so you can stop them this is just an example so you can actually stop these word research in your pack and then we have a pack holding default short field first column of the table in this is something live as it is or you can change this with your holding library with your home library and then we have effect koha URL see maybe you have noticed for powered by Papa this actually displayed on your back and if you want to hide this so you just need to don't show oh ha I mean oh pack oh ha URL and it will be hide and this is up to you you can modify poha because it's completely open source after the poha of pack I mean Oh pack poha URL we have another important area Oh back logging instruction so if someone fire to log in this portion you can provide the logging instruction Oh pack maintenance let me show you what is maintenance sometime you you're a is not available for public or you're a is under the maintenance or you want to upgrade your system then you have to display some certain message and you wouldn't like to display I mean you're a available to your public so you can actually show this message show save here maintenance now you see what happened here the system maintenance the koha online catalog is offline for system maintenance we will be back soon if you have any questions please contact the site at but this way actually you can dissipate this message or if you want to provide some custom message from some custom knows notice so you can add for example tear patterns this is just an example all library catalog is not available you too I hope this spelling is right and I'm not looking at the spelling right now Pete the first message built up and similar way you can work on custom message if there is some problem with your back so you can display this after the maintenance we have a very important area we call it main user block so you can display your some text like this on your back some slideshow on your back in the middle area on new arrival or whatever you want to display within this main user block so you can provide whatever you want to provide within this main in the talk for example let me add this Thanks in the main user block let's see what happened by default you can see this is welcome to poha catalog some other language I don't know what language is it you see let me put my and you can actually modify this justify so you can move it to Central and then adding full welcome to library name you can provide your library name there similar like this you can add your library name and then some space enter enter and then this if I aligned and the heading 5 again this is actually adding food ok then new paragraph and paragraph will stay justified and because of whatever you want to write you can add and you can provide your email address but this is script I have if you need this step you can have this let me save this see what happened here P this is the main user block and in this similar way you can add some numerals there or some slideshow or some images or whatever you want to display within main user block I'll show you later how you can add a newer hours there automatically or manual if you want to add some new arrival what will be the script to add the new arrivals here and but actually it's a lengthy topic so we will discuss this later how you can add new arrivals in details or the slideshow how you can add slideshow needles we in some other video so move forward after this we have another important area there you can see the OPAC maximum item display by default this is 50 I think it's quite enough opak more searches I think leave it blank effect my summary HTML I think we leave it default and then we have a pack navigation navigation is actually the left navigation this area is called actually pack navigation and then we have four pack navigation bottom after this after this area let me add few navigation here navigation is actually used for some important links for example I click here or digital library this is just a link it could be a link is a simple text and let me save this see what happened so there you can see click here or digital library now if I want to provide some simple links how I'll do that I have fuel actually navigations I have few scripts here you can see this is one script actually HTML simple script and this copy here see what happened let me explain if you want to learn important links in heading 6 and then it's actually unstyled and there I have actually put a link of HCC digital library and text would be displayed digital library and then the address of my channel and then heading will come as reference and then the address of my channel back Facebook and then adding would come as Facebook so you can do this and if you need this script you can contact me so let me show you what result bit about C if someone click it will go to the digital library maybe I put the wrong wrong URL next up one click this will talk with it is so similar you can add some important links here and you can actually make it more stylish you can provide some style so you can see how you can work on HTML so this is quite easy actually and then navigation after the navigation or even you can add some pictures example let me show you again the unique universe catalog so you can add picture something like this so I have one trip here I have a strip so you can use this a strip in bottom navigation this is here we have left navigation and bottom navigation just after the left navigation you can add this step here see what happened here see so this way you can make your catalogue more pin fancy and more attractive and you can design the interface of your Grabow pack more effectively through the global system preferences of Europe admin then after this we have opak no result found if there is no results on what message will be displayed to your patterns you can provide some a effect play music I believe it is a pack public so by default your bag is available for public if you want to make it for your patterns only for private only you can do this so there you can see a pack public if you make it disabled then it will work in private mode and then your patterns must have to love it Oh pack result library what will be the result library your home library leave it is as it is a pack result sidebar there's no need to work on this but if you want to you can cook it go back show checkout name if you want to display the checkout name with your back so you can who actually check out that particular book or whatever the item as I said a pack theme by default is put a strap and this is actually some important area oppai user CSS and OFAC user yes and then thank you the summary let it be default and then we have a fact XML details display so if you leave it blank XML actually will not appear something like this let me show you a few third this is just an example I'm telling you but there you can see this result is come with this particular type look if you make it leave empty then this result will come in a simple format this is quite simple but if you want to display XML mark features so you just need to click default default then wave it and ring then result will come something like this see this is some customized pump through the XML mark there you can see this Go Go this tax this is up to you we will discuss user Oh pack user CSS and J's in detail so let me complete all these things and then I'll show you how you can work on this so this is actually the appearance and we have talked advanced search options we have talked appearance and now features well a pack user CSS and J's we will discuss in loss of this this particular video and then features okay Oh pad acquisition details if you want to display the acquisition details with the search result you can do this the display I mean from where you have to purchase that particular book what price of that particular book if you want to display all these you can affect authorization leave it as it is ah okay book bag book bag is something like this this card is called acne book back so if you need to display this book bag it's usually available from publisher website not on the ivory backpack s ESPA my understanding so you can actually don't allow the book bag and then save it this book back bill fight o pag for borrowers okay leave it as it is if you're working on cloud then you have to enable cloud here Oh pag detail you are poor so you can enable QR for from here and then effect fine tabs allow patterns to access the fine tabs on the my account page so your pattern can login with your account for example this particular pattern can check check the details with sample this you can see that your summary card is the personal details your tab your change the password be or she can change if you provide access to that particular pattern so patterns can see or even you can use ctrl F to check the for I mean whatever you are fine opac fine tabs so if it's allowed the pattern can check this tab and then effect all notes okay and then password change pattern can change password allowed Oh pack patterns image don't show show I think this has to show so a pattern can see his or her image if you provided that image a top issue its top issue something this is actually the top issue you can allow for more features and then go back use a login allowed port of the day and and you can actually modify port of the day in tools of this in poha from the modules of tools you can work on this photo of the day requests on a pack allowed review on you can show reviewers post a full name you can actually social networking collect all the Jason's allow the one can but just you what you have to put this now let's see what happened there you can see the masthead has more option now and then the social networking sites are activated here and further the course of today you need to add some codes in course of the day I mean in tool options or the tool modules of koha then the course of the day would be display some somewhere in the main user block so then we have open URLs okay we have talked about the open URLs then we have open URLs payments policy privacy okay if open URL asking leave leave this feature as it is the payment is more or more concerned with actually people and the policy policy is something like purchasing policy for example this preference they allow purchase suggestions Bron choice so you can allow block expire patterns opak action I think left them leave them block max open suggestions okay leave it is as it is a pack allow public list creation I think leave them as it is and let's see what our H is not important o packs suggestion mandatory fields okay what mandatory fields you required when someone suggests to your library for example we need author we need title the publisher place of publication why he or she want to recommend that particular book the reason and the copyright and publication date one another thing you can add ISBN if you want to but these six fields out of 11 augmented peak and then we have a back view other suggestions I think don't show search my library first I think don't limit them then we have privacy privacy pohe privacy is quite good but let's see what we can do allow patterns of search check out visibility for current years I think leave it leave them as it is Hey we have restrict pages for turistic pages if you want to restrict some page so you can do this self registration if your institution providing self registration then you need to work on the self registration so what this is actually the paddles self modification borrowers unwanted field what field you don't require on the self registration pot so you can right here and you can see this database column patterns self registration you have to allow this if you activate it some patterns set self registration potion this neat patterns self the distillation default category there you need to provide a default category and then patterns self registration additional instructions you can provide some additional instructions here and and then patterns self registration for were mandatory field there you need to provide some mandatory field for example what mandatory feel you need on the self registration form similar you can provide the unwanted field and lots of thing available about this self registration so if you are working on self registration you can use this form and then she'll forwards she'll forwards I think leave them as it is they are quite easy and useful but then finally we will come to the appearance side of a pack user CSS and CSS and Jas so now let us back to Quahog pack users CSS and J's in appearance there we have koha pack users CSS and J's CSS is cascading style sheet and J's is actually JavaScript let's talk about JavaScript first so javascript is actually to provide the look and feel who your Co how back and also your staff interface so here we have and coha has a complete jqt Larry so you just need to write poha jqe on your web browser and you can see does it complete jQuery library Amma I mean JavaScript library available for poha and you can use these script in your ingest for example you want to change this library catalog to keywords I mean I want to change this library catalog for keyboard instead of library catalog I want to use keywords here and for example I want to change this login password to library card and PIN number for that purpose we actually use data URIs and Jake URIs are available on Jake URI Larry so you can see for staff site kqd statements are available and for a fact but there you can see the numbers of JQ is available and people working around the world and they have shared their experiences on this so example I want to change the keyword I mean I want to change this labra catalog to keyword let me find out true ctrl F and then I just write e word if you can see this change library catalog to keyword in a pac-man's 3000 alternatively you can use this touch pop there you need to copy this JQ e and you need to pace this a Curie on your stock class cominius Oh pack a Curie portion that's all save this and see what happened here so this library catalog has replaced by keyword spot but this way you can customize your Co how back move battle and now let us talk about Koha Oh pack user CSS CSS is actually cascading style sheet including include the following CSS on all pages in the OFAC so if you want to change this style sheet so you can change this as per your organization in so you can change this and there you need to provide some script so let us see the Koha manual for this purpose and you open the Koha manual and in fact you can see or even you can use control a user ESS so there you can see Ohio back user CSS and you can see the default style shield will likely be found at this address and additionally style sheets are available here and the OPAC layout style sheets are available here I have one style sheet available so let me open my script and change this this style sheet to mine here and if you need these scripts so you can contact me I will provide you let's see this step boom this so you can see this this is one of these tiny this is actually the script hey there you can see the background and the corn and the color and the on style at the font size then add er then padding then link below and all these things cover on this ESS so let me copy this but this is actually one of the style sheet that I have designed ESS lo let me copy this and let me piss now see what happened this is Euro pact let me save this and now let me refresh this so it has changed the entire sheet so you can see this this is quite effective it look good even the color of the length and this is this is this way actually you can work on your Botha CSS so if you need this script you can comment on the your email address in the box I mean in the comment box and I have selected these gay cuties from the jQuery library I mean this is a our script from the jQuery libraries and I have designed this JavaScript for cataloging of digital item so I'll tell you later this is fallen forms and this one is also on to the tester so I'll tell you when we come to the cataloging of digital items so how we can catalog the digital item in some other video so now let's back to the topic but let me copy is Jake URIs and let me paste here any chairs you can see what happened can be copied this thing we have changed this style sheet now and advanced that they are actually more relevant to advancer and let me see that now this is quite effective - anyhow it this way actually you can work you can customise your folk outback well effective in a way so in the next video we will talk about how we can add and pour the virtual keyboard and how we can add a slideshow on your effect and how we can add how we can display the new arrivals automatically or by a manual on your tohe value pack so that's all for today and thank you very much you're watching rap flames this is Farooq Hassan you must have to like this video and if you need any script you can write to me you can share your email address all your warship number so thank you very much for watching this is powerful sand and you are watching the airplane thank you stay tuned [Music]

Channel: RAFLIMTS

Views: 8,510

Keywords: library, open source software, koha, library automation, web interface design, interface designing, koha opac design, online public access catalog, navigations setting, main user block setting, your logo koha opac, header koha opac, add your credits in koha opac footers, change koha opac theme, how to, add masthead library pulldown, main user block, patron self registration, css, js, jquery, password change, patron details, opac preferences, koha opac theme, koha opac navigation

Id: J2XazunnOmY

Length: 56min 39sec (3399 seconds)

Published: Sat Apr 25 2020