1 / 13

Customizing the Patron Record Display Form at Victoria University

Learn how to customize the Patron Record Display Form at Victoria University in two key ways: through CSS styles or HTML plugin integration. This guide requires a basic understanding of HTML/CSS and JavaScript. Discover handy code examples and the importance of backing up original files and using a staging server. You'll find instructions on modifying layout, color schemes, and utilizing tokens versus direct HTML for dynamic features. Explore essential plugins for enhanced search functionalities.

papina
Télécharger la présentation

Customizing the Patron Record Display Form at Victoria University

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Customising MyLibrary John Prentice, Victoria University

  2. The Patron Record Display Form can be customised in one of two ways: Using the Styles CSS sheet Rewriting the HTML to include Plug-ins

  3. You will need: A good knowledge of HTML/CSS Some handy code examples GSOH (because everyone’s a critic) A little JavaScript (Google it!) Remember to: Back up the original files Work on the staging server (where possible)

  4. Example Set Code (with the boring bits removed) <!--{toplogo}--> <!--{searchtool}--> <!--{patron}--> <table> <tr> <td> <div> <a href="/screens/help_renew.html">Help with Renewals</a> </div> </div> </td> <td> <div class="patActionsLinks"> <!--{ifmodifypin}--> <!--{modifypinbtn}--> <!--{xif}--> <!--{ifmsgs}--> <!--{msgsbtn}--> <!--{xif}--> </div> </td> </tr> </table> <div class="patFuncArea"> <!--{patfunc}--> </div> <!--{botlogo}--> </body> </html>

  5. Customising the Styles: Change the layout Change the background and text colours Use tables to help differentiate the sections Brand your page/site

  6. Token vs HTML: Tokens are useful for the if/xif features Tokens almost impossible to customise Replace tokens with code (copy from published version of page) Add in a little JavaScript to minimise repetition

  7. Plug-ins: Search the Catalogue (Encore) Replaced: <!--{searchtool}--> with: <form method="get" action="http://yabby.vu.edu.au/iii/encore/Home,$Search.form.sdirect" name="form" id="form"> <b>Search the Catalogue</b><br /> <input type="hidden" name="formids" value="target"> <input type="hidden" name="lang" value="eng"> <input type="hidden" name="suite" value="def"> <input type="hidden" name="reservedids" value="lang,suite"> <input type="hidden" name="submitmode" value=""> <input type="hidden" name="submitname" value=""> <img style="vertical-align: middle" height="26" width="25" alt="Encore" src="/screens/encore_arrow.gif"> <input name="target" id="target" size="45" type="text" style="color:#555555;" value="Enter keywords to search" onfocus="this.value = (this.value=='Enter keywords to search')? '' : this.value;this.style.color = '#000000';" onblur="this.value = (this.value=='')? 'Enter keywords to search' : this.value;this.style.color = '#555555';" style="vertical-align: middle" > <br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" alt="Search" name="submit" value="Search" style="vertical-align: middle" />&nbsp;&nbsp; <a href="/search/X">Advanced Search</a> </form>

  8. Greyed out text in a search box <input name="target" id="target" size="45" type="text" style="color:#555555;" value="Enter keywords to search" onfocus="this.value = (this.value=='Enter keywords to search')? '' : this.value;this.style.color = '#000000';" onblur="this.value = (this.value=='')? 'Enter keywords to search' : this.value;this.style.color = '#555555';" style="vertical-align: middle" >

  9. Plug-ins: Search E-Reserve <form method="get" action="/search/r" name="subjectSearch"> <b>Search E-Reserve by Subject Code or Lecturer/Teacher</b><br /> <input maxlength="40" name="search" size="55" style="color:#9d9da1;border:1px solid #007ac3; padding-left:4px; padding-right:4px; padding-top:2px; padding-bottom:2px;" value="Enter search term, then select search type" onfocus="this.value = (this.value=='Enter search term, then select search type')? '' : this.value;this.style.color = '#000000';" onblur="this.value = (this.value=='')? 'Enter search term, then select search type' : this.value;this.style.color = '#9d9da1';"/> <input type="button" value="Subject Code" name="ResCode" onclick="this.form.submit()"> <input type="button" value="Lecturer/Teacher" name="ResLect" onclick="this.form.action='/search/p';this.form.submit()"> </form>

  10. Plug-ins: Federated Search Tool (360) <form action="http://0-pd3rz7eg6w.cs.serialssolutions.com.library.vu.edu.au/results" name="searchForm"> <b nowrap="nowrap">Locate Articles on any Subject from any Database<br> </b><i>&nbsp;- via 360 Federated Search</i><br /> <input type="hidden" name="SS_LibHash" value="PD3RZ7EG6W" /> <input type="hidden" name="dbIDList" value="" /> <input type="hidden" name="searchType" value="basic" /> <input type="hidden" name="action" value="start" /> <input type="hidden" name="catGroupList" value="default" /> <input type="hidden" name="searchBy" value="Category" /> <input type="hidden" name="field" value="Keyword" /> <input type="text" name="term" maxlength="1000" size="55" style="border:1px solid #007ac3; color:#9d9da1; padding-left:4px; padding-right:4px; padding-top:2px; padding-bottom:2px" value="Enter keywords to search, then select subject area" onfocus="this.value = (this.value=='Enter keywords to search, then select subject area')? '' : this.value;this.style.color = '#000000';" onblur="this.value = (this.value=='')? 'Enter keywords to search, then select subject area' : this.value;this.style.color = '#9d9da1';" /> <select size="1" name="catID"> <option>< Please Select a Subject ></option> <option value="30713">Arts and Humanities </option> <option value="35430">Biomedical Sciences</option> <option value="30714">Business and Economics</option> <option value="35431">Computer and Information Sciences</option> <option value="35432">Creative Arts</option> <option value="35438">Social Sciences</option> <option value="35439">Sport and Exercise Science</option> </select> <input type="submit" value="Submit" name="Submit" onclick="return chk360(this.form)"></form>

More Related