Styling the new Koha Item Search link in 3.18

by Ed Veal on Apr 3, 2015

So with the new Koha item search tool being a big hit during the 3.18 highlight videos I thought I would provide the jQuery and CSS I used to highlight the link on our training system.

This is how the link to the new Koha item search will look without any styling:

So the first step is to add some jQuery to the intranetuserjs system preference in Koha. This will add a class to the link so that we can style it.

[code language=”javascript” wraplines=”true” toolbar=”true”]
$("a[href=’/cgi-bin/koha/catalogue/itemsearch.pl’]").attr("class", "itemsearch1");
[/code]

Once we have added the class we can now add the CSS to help highlight the link. If you add the following CSS to the IntranetUserCSS system preference.

[code language=”html” wraplines=”true” toolbar=”true”]
<p align="JUSTIFY">.itemsearch1 {</p>
<p align="JUSTIFY">background: none repeat scroll 0 0 #f3f3f3;</p>
<p align="JUSTIFY">border: medium solid lightblue;</p>
<p align="JUSTIFY">border-radius: 4px;</p>
<p align="JUSTIFY">padding: 2px;</p>
<p align="JUSTIFY">}</p>
<p align="JUSTIFY">[/code]