Instructions and code snippet to add a Pika catalog search box to your library’s webpage.
Table of Contents
Top of page
Adding a search box
To create a search box, embed the following code snippet in the appropriate place on your webpage.
Change the URL to your appropriate Pika URL, keeping the "/Union/Search" element in the URL
If your site has a stylesheet, we recommend you use the styling rules from the <style> tag in the provided code snippet and add them to your site stylesheet, but this is not required.
Modify styling and HTML to fit your needs.
The "target" attribute of the <form> tag will cause the search to load 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. |
Top of page
Accessibility
The input boxes for catalog and archive search phrases have an ARIA label used by screen reader software.
If you style the button corresponding with the search box, make sure to use a sufficient contrast to meet accessibility standards. The AA standard contrast is 4.5:1.
Top of page
Code Snippet
Copy all of the code below, but change https://opac.marmot.org/Union/Search to your library’s 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" aria-label=”Enter search phrase here” 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." placeholder="Enter a search phrase here" name="lookfor" value="" size="40" type="text">
<input id="searchBarFind" type="submit" alt="Search Catalog" value="Search Catalog">
</div>
<style>
#lookfor {
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: #0A75E3; /* accessible contrast blue against white https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=0A75E3 */
padding: 8px 15px;
text-decoration: none;
text-align: center;
} #searchBarFind:hover {
background: #3276B1; /* accessible contrast darker blue https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=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>
|
Below is an example of what the catalog search box will look like, minus any styling unique to your library’s website.
Top of page
Adding a search box to your Drupal 7 site
Download the module from our GitHub repository and follow the instructions in the readme.md file.
Top of page
Add an 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" aria-label=”Enter search phrase here” 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." placeholder="Enter a search phrase here" name="lookfor" value="" size="40" type="text">
<input id="searchBarFind" type="submit" alt="Search Archive" value="Search Archive">
</div>
<style>
#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: #0A75E3; /* accessible contrast blue against white https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=0A75E3 */
padding: 8px 15px;
text-decoration: none;
text-align: center;
} #searchBarFind:hover {
background: #3276B1; /* accessible contrast darker blue https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=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> |
Below is an example of what the archive search box will look like, minus any styling unique to your library’s website.
Top of page
Related Documentation