Tech Blog

Creative Studio Custom Code Example – Embedded External Library Search

The following will describe how to leverage campusM’s Creative Studio in order to embed a custom library search component on a static page which will allow a user’s search term to be passed externally to the library search interface of the University. The instruction here may be used in conjunction with the Creative Studio product documentation available from the Customer Knowledge Center (CKC)

Steps:

Drag the ‘Custom Code’ block:

After dragging this block, place the below code into the popup, click save.

<style>
.outSearch{
  display:table;
  margin:0 auto;
  padding-top:10px;
  padding-right:10px;
  padding-bottom:10px;
  padding-left:10px;
  height:75px;
  width:100%;
}
.inSearch{
  height:100%;
}

/* Style the search field */
form.librarySearch input[type=text] {
  padding: 10px;
  font-size: 17px;
  border: 1px solid grey;
  float: left;
  width: 80%;
  height: 100%;
}
/* Style the submit button */
form.librarySearch button {
  float: left;
  width: 20%;
  height: 100%;
  padding: 10px;
  background: #c00;
  color: white;
  font-size: 24px;
  border: 1px solid grey;
  border-left: none; /* Prevent double borders */
  cursor: pointer;
}

form.librarySearch button:hover {
  background: #c00;
}

/* Clear floats */
form.librarySearch::after {
  content: "";
  clear: both;
  display: table;
}
</style>

<div class="outSearch">
             <div class="inSearch">
                           <form class="librarySearch" method='get' action='https://library.yourUniversity.com'> 
                                        <input type='hidden' name='ho' value='t'> 
                                        <input type='hidden' name='l' value='en'> 
                                        <input type='hidden' name='pn' value='1'> 
                                        <input placeholder="Library Search.." type='text' name='q'> 
                                         <button type="submit"><i class="fa fa-search"></i></button>
                           </form> 
             </div>
</div>

 

Leave a Reply