Pika - Add a Pika Search Box to Your Webpage
Add a Pika Search Box to Your Webpage
- To create a search box, embed the following code in the appropriate place on your webpage. Change the URL to your appropriate Pika URL, keeping the "/Union/Search".
- If your site has a stylesheet, it is recommended to take the styling rules from the <style> tag and add them to your site stylesheet. However this is not required.
- Modify styling and html to fit your needs.
- Note: the "target" attribute of the <form> tag will cause the search to be loaded in a new browser tab. Remove the target attribute (or set to "_self") to load the search in the same browser tab as the search box page.
Copy all of this code, but change https://opac.marmot.org/Union/Search to your library Pika address):
<form id="searchForm" class="search" action="https://opac.marmot.org/Union/Search" method="get" target="_blank">
<input name="searchSource" value="local" type="hidden">
<input name="basicType" value="Keyword" type="hidden">
<div>
<input id="lookfor" title="Enter one or more terms to search for. Surrounding a term with quotes will limit result to only those
that exactly match the term." name="lookfor" value="" size="40" type="text">
<input id="searchBarFind" type="submit" alt="Search Catalog" value="Search Catalog">
</div>
<style type="text/css" scoped>
#lookfor {
/*font-size: 9pt; /* optional */
padding: 5px 10px;
}
#searchBarFind {
border: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-family: Arial;
color: #ffffff;
font-size: 12pt;
text-shadow: 1px 1px 3px #525B5D;
background: #428BCA;
padding: 8px 15px;
text-decoration: none;
text-align: center;
}
#searchBarFind:hover {
background: #3276B1;
text-decoration: none;
-webkit-box-shadow: 0px 1px 3px #525B5D;
-moz-box-shadow: 0px 1px 3px #525B5D;
box-shadow: 0px 1px 3px #525B5D;
}
</style>
</form>
HTML will look like this (except for this page's styling on the text box) :
Add a Pika searchbox module to your Drupal 7 site
Download the module from our git repository and follow the instructions in the readme.md file.
Add a Archive Search Box to Your Webpage
- The critical change from a regular catalog search box is setting the value of the "searchSource" input tag to "islandora" instead of local.
<form id="searchForm" class="search" action="https://opac.marmot.org/Union/Search" method="get" target="_blank"> <input name="searchSource" value="islandora" type="hidden"> <input name="basicType" value="Keyword" type="hidden"> <div> <input id="lookfor" title="Enter one or more terms to search for. Surrounding a term with quotes will limit result to only those that exactly match the term." name="lookfor" value="" size="40" type="text"> <input id="searchBarFind" type="submit" alt="Search Archive" value="Search Archive"> </div> <style type="text/css" scoped> #lookfor { /*font-size: 9pt; /* optional */ padding: 5px 10px; } #searchBarFind { border: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; font-family: Arial; color: #ffffff; font-size: 12pt; text-shadow: 1px 1px 3px #525B5D; background: #428BCA; padding: 8px 15px; text-decoration: none; text-align: center; } #searchBarFind:hover { background: #3276B1; text-decoration: none; -webkit-box-shadow: 0px 1px 3px #525B5D; -moz-box-shadow: 0px 1px 3px #525B5D; box-shadow: 0px 1px 3px #525B5D; } </style> </form>
HTML will look like this (except for this page's styling on the text box) :