Web OPACs for Different Web OPACs for Different Organizations through Scopes Organizations through Scopes
and Style Sheetsand Style SheetsBryan P. CarsonBryan P. CarsonMiddlebury College - Library & Information ServicesMiddlebury College - Library & Information ServicesIUG 2006IUG 2006
Copyright Bryan P. Carson 2006. This work is the intellectual property of the author. Permission is granted for Copyright Bryan P. Carson 2006. This work is the intellectual property of the author. Permission is granted for this material to be shared for non-commercial, educational purposes, provided that this copyright statement this material to be shared for non-commercial, educational purposes, provided that this copyright statement appears on the reproduced materials and notice is given that the copying is by permission of the author. To appears on the reproduced materials and notice is given that the copying is by permission of the author. To disseminate otherwise or to republish requires written permission from the author.disseminate otherwise or to republish requires written permission from the author.
© 2006 Bryan P. Carson© 2006 Bryan P. Carson
ModuleModule:: WebOPACWebOPACAudience LevelAudience Level:: BeginnerBeginnerMiddlebury College provides the catalog for the Middlebury College provides the catalog for the local historical museum and the town’s public local historical museum and the town’s public library as well as three branch libraries on campus. library as well as three branch libraries on campus. We therefore have to deliver separately branded We therefore have to deliver separately branded OPACs from the same database. We do this OPACs from the same database. We do this through through scopingscoping, , CSSCSS, and , and WWWoptions. WWWoptions. This This presentation will of interest to institutions delivering presentation will of interest to institutions delivering parts of their databases as scopes to organizations parts of their databases as scopes to organizations that are separate and have very different branding.that are separate and have very different branding.
© 2006 Bryan P. Carson© 2006 Bryan P. Carson
MIDCAT, Ilsley Public Catalog, MIDCAT, Ilsley Public Catalog, Sheldon Museum CatalogSheldon Museum Catalog
© 2006 Bryan P. Carson© 2006 Bryan P. Carson
Topics I’ll CoverTopics I’ll Cover
ScopesScopes– What are they?What are they?– Scopes and “Branding”Scopes and “Branding”
WWWoptionsWWWoptions– STYLESHEETSTYLESHEET– OthersOthers
Screens filesScreens filesStyle sheets in the WebOPACStyle sheets in the WebOPAC– What corresponds to what?What corresponds to what?
HTML Changes in the HTML Changes in the /screens/screens– Hard coding drop-down menu labelsHard coding drop-down menu labels
© 2006 Bryan P. Carson© 2006 Bryan P. Carson
CorrespondencesCorrespondences
WWWoptionWWWoption CSSCSS Scope Scope # #
Scope Scope NameName
““Brand”Brand”
STYLESHEETSTYLESHEET stylesheet.cssstylesheet.css 22Middlebury Middlebury College College LibrariesLibraries
STYLESHEET16STYLESHEET16 stylesheet_s16.csstylesheet_s16.csss
1616 Henry Sheldon Henry Sheldon CollectionCollection
STYLESHEET17STYLESHEET17 stylesheet_s17.csstylesheet_s17.csss
1717 Ilsley Public Ilsley Public LibraryLibrary
© 2006 Bryan P. Carson© 2006 Bryan P. Carson
What’s a Scope?What’s a Scope?
Scopes are used to limit patron searches Scopes are used to limit patron searches in the Web OPAC to a particular branch, in the Web OPAC to a particular branch, library or collection as specified in your library or collection as specified in your initial set up. You can create separate initial set up. You can create separate search menus for scopes, and make links search menus for scopes, and make links from search pages. from search pages. (Source: CS Direct)(Source: CS Direct)
© 2006 Bryan P. Carson© 2006 Bryan P. Carson
All our ScopesAll our Scopes
1.1. View Entire CollectionView Entire Collection2.2. Middlebury College Libraries Middlebury College Libraries 3.3. Middlebury Videos Middlebury Videos 4.4. Middlebury Music Recordings Middlebury Music Recordings 5.5. Middlebury Spoken Word Middlebury Spoken Word
Recordings Recordings 6.6. Armstrong Library Armstrong Library 7.7. Davison LibraryDavison Library8.8. Special CollectionsSpecial Collections9.9. Main LibraryMain Library10.10. Music LibraryMusic Library11.11. Career Services OfficeCareer Services Office12.12. Curriculum CenterCurriculum Center
13.13. Spiritual & Religious Life Spiritual & Religious Life CenterCenter
14.14. Center for Educational Center for Educational TechnologyTechnology
15.15. Flanders Field RecordingsFlanders Field Recordings16.16. Henry Sheldon CollectionHenry Sheldon Collection17.17. Ilsley Public LibraryIlsley Public Library18.18. Ilsley MoviesIlsley Movies19.19. Ilsley Music RecordingsIlsley Music Recordings20.20. Ilsley Spoken Word Ilsley Spoken Word
RecordingsRecordings21.21. Ilsley Children, Youth and Ilsley Children, Youth and
Teen MaterialsTeen Materials22.22. Sarah Partridge LibrarySarah Partridge Library
© 2006 Bryan P. Carson© 2006 Bryan P. Carson
How we ProceededHow we Proceeded
Decide which organizations need separate Decide which organizations need separate brandingbranding
Choose appropriate scopesChoose appropriate scopes
Create STYLESHEET WWWoption in the Create STYLESHEET WWWoption in the Millennium clientMillennium client
Create corresponding CSS in the screens Create corresponding CSS in the screens directorydirectory
© 2006 Bryan P. Carson© 2006 Bryan P. Carson
Scopes for Collections Needing Scopes for Collections Needing Discreet OPACsDiscreet OPACs
2.2. Middlebury College Libraries Middlebury College Libraries
16.16. Henry Sheldon CollectionHenry Sheldon Collection
17.17. Ilsley Public LibraryIlsley Public Library
© 2006 Bryan P. Carson© 2006 Bryan P. Carson
Scopes for Collections Needing Scopes for Collections Needing Discreet OPACs (2)Discreet OPACs (2)
2.2. Middlebury College Libraries Middlebury College Libraries
16.16. Henry Sheldon CollectionHenry Sheldon Collection
17.17. Ilsley Public LibraryIlsley Public Library
© 2006 Bryan P. Carson© 2006 Bryan P. Carson
Scopes for Collections Needing Scopes for Collections Needing Discreet OPACs (3)Discreet OPACs (3)
2.2. Middlebury College Libraries Middlebury College Libraries
16.16. Henry Sheldon CollectionHenry Sheldon Collection
17.17. Ilsley Public LibraryIlsley Public Library
© 2006 Bryan P. Carson© 2006 Bryan P. Carson
Scopes for Collections Needing Scopes for Collections Needing Discreet OPACs (4)Discreet OPACs (4)
2.2. Middlebury College Libraries Middlebury College Libraries
16.16. Henry Sheldon CollectionHenry Sheldon Collection
17.17. Ilsley Public LibraryIlsley Public Library
© 2006 Bryan P. Carson© 2006 Bryan P. Carson
WWWoptionsWWWoptions
Under “General Display Under “General Display and Behavior Options”and Behavior Options”
New WWWoptions must New WWWoptions must be created to correspond be created to correspond to the discretely scoped to the discretely scoped OPACsOPACs
STYLESHEETSTYLESHEET– STYLESHEET16STYLESHEET16– STYLESHEET17STYLESHEET17
Later, when customizing Later, when customizing the HTML on screens…the HTML on screens…– TOPLOGOTOPLOGO
TOPLOGO16TOPLOGO16
TOPLOGO17TOPLOGO17
– BOTLOGOBOTLOGOBOTLOGO16BOTLOGO16
BOTLOGO17BOTLOGO17
And so on….And so on….
© 2006 Bryan P. Carson© 2006 Bryan P. Carson
STYLESHEET WWWoptionSTYLESHEET WWWoption
You’ll need one for You’ll need one for at leastat least each of the each of the branded OPACsbranded OPACs
Must correspond to scopes and CSSMust correspond to scopes and CSS
STYLESHEET, STYLESHEET16, STYLESHEET, STYLESHEET16, STYLESHEET17STYLESHEET17
© 2006 Bryan P. Carson© 2006 Bryan P. Carson
Creating STYLESHEET WWWoptionsCreating STYLESHEET WWWoptions
Set each WWWoption to point to a CSS (e.g., /screens/styles.css)Set each WWWoption to point to a CSS (e.g., /screens/styles.css)Similar functionality for others (e.g., @screens/botlogo_s17.htmlSimilar functionality for others (e.g., @screens/botlogo_s17.html
© 2006 Bryan P. Carson© 2006 Bryan P. Carson
Style Sheets brand the OPACsStyle Sheets brand the OPACs
© 2006 Bryan P. Carson© 2006 Bryan P. Carson
Style Sheets brand the OPACsStyle Sheets brand the OPACs
© 2006 Bryan P. Carson© 2006 Bryan P. Carson
Style Sheets brand the OPACsStyle Sheets brand the OPACs
© 2006 Bryan P. Carson© 2006 Bryan P. Carson
Style Sheets - CSSStyle Sheets - CSS
You Need a Different Cascading Style Sheet for You Need a Different Cascading Style Sheet for each separately branded OPACeach separately branded OPAC– You can have several STYLESHEET WWWoptions You can have several STYLESHEET WWWoptions
associated with a single associated with a single /screens/styles.css/screens/styles.css file. file. (e.g., STYLESHEET17, 18, 19, 20, 22 are associated (e.g., STYLESHEET17, 18, 19, 20, 22 are associated with with styles_s17.cssstyles_s17.css, “Ilsley green and yellow”), “Ilsley green and yellow”)
http://biblio.middlebury.edu/screens/styles.csshttp://biblio.middlebury.edu/screens/styles.css– MIDCAT: MIDCAT: styles.cssstyles.css– Ilsley: Ilsley: styles_s17.cssstyles_s17.css– Sheldon Museum: Sheldon Museum: styles_s16.cssstyles_s16.css
Must use underscore:Must use underscore: styles_s17.css
© 2006 Bryan P. Carson© 2006 Bryan P. Carson
Associating Style Sheets and Associating Style Sheets and Screens with Scopes (details)Screens with Scopes (details)
The default CSS doesn’t need anything The default CSS doesn’t need anything appended. Append appended. Append _s<scope number>_s<scope number> to the to the filenames for the customizable screens and the filenames for the customizable screens and the cascading style sheets.cascading style sheets.– styles.cssstyles.css, , styles_s16.cssstyles_s16.css, , styles_s17.cssstyles_s17.css
You’ll need to extend this concept to You’ll need to extend this concept to allall the the “/screens” html files you want to brand. (I’ll get to “/screens” html files you want to brand. (I’ll get to this later.)this later.)– opacmenu.htmlopacmenu.html, , opacmenu_s16.htmlopacmenu_s16.html opacmenu_s17.htmlopacmenu_s17.html
© 2006 Bryan P. Carson© 2006 Bryan P. Carson
Naming Conventions and Correspondence Naming Conventions and Correspondence (with OPAC links)(with OPAC links)
WWWoptionWWWoption CSSCSS Scope Scope # #
Scope Scope NameName
URLURL
STYLESHEETSTYLESHEET stylesheet.cssstylesheet.css 22Middlebury Middlebury College College LibrariesLibraries
http://http://biblio.middlebbiblio.middlebury.edu/ury.edu/search~S2search~S2
STYLESHEET16STYLESHEET16 stylesheet_s16.csstylesheet_s16.csss
1616 Henry Sheldon Henry Sheldon CollectionCollection
http://http://biblio.middlebbiblio.middlebury.edu/ury.edu/search~S16 search~S16
STYLESHEET17STYLESHEET17 stylesheet_s17.csstylesheet_s17.csss
1717 Ilsley Public Ilsley Public LibraryLibrary
http://http://biblio.middlebbiblio.middlebury.edu/ury.edu/search~S17 search~S17
© 2006 Bryan P. Carson© 2006 Bryan P. Carson
Colors: Why and How?Colors: Why and How?
First OPAC was “out of the box”, so…First OPAC was “out of the box”, so…Color schemes matched the existing websites Color schemes matched the existing websites for the institutions. (We got the hex codes from for the institutions. (We got the hex codes from their style sheets.)their style sheets.)We used the Firefox Web Developer Toolbar to We used the Firefox Web Developer Toolbar to “view style information” and ascertain the “view style information” and ascertain the element names in which a certain color element names in which a certain color occurred.occurred.Then we found that element in the CSS and Then we found that element in the CSS and matched the hexadecimal. (We used Visibone to matched the hexadecimal. (We used Visibone to get the color names when they weren’t available get the color names when they weren’t available in the CSS.)in the CSS.)
© 2006 Bryan P. Carson© 2006 Bryan P. Carson
Firefox Web Developer ToolbarFirefox Web Developer Toolbar
Useful for seeing the code Useful for seeing the code in-situin-situ– style informationstyle information– table outlinestable outlines– image informationimage information– doing many other frequently-used tasksdoing many other frequently-used tasks
Download from chrispederick.com Download from chrispederick.com http://chrispederick.com/work/webdevelophttp://chrispederick.com/work/webdeveloper/er/
© 2006 Bryan P. Carson© 2006 Bryan P. Carson
Dissecting the Example PagesDissecting the Example Pages
Examples with the Firefox toolbar in Examples with the Firefox toolbar in action. (“crosshairs”, outlines, etc.)action. (“crosshairs”, outlines, etc.)– Middlebury College LibraryMiddlebury College Library– Middlebury CSSMiddlebury CSS
Let’s see it live. (MIDCAT)Let’s see it live. (MIDCAT)
© 2006 Bryan P. Carson© 2006 Bryan P. Carson
Other Aspects of Customization Other Aspects of Customization (Display and Behavior)(Display and Behavior)
customizing the HTML in the “/screens” customizing the HTML in the “/screens” filesfiles
In our case, we wanted to limit the options In our case, we wanted to limit the options in the scopes dropdownin the scopes dropdown– e.g., e.g., opacmenu.htmlopacmenu.html– There are many more search screens where There are many more search screens where
these options appear.these options appear.
© 2006 Bryan P. Carson© 2006 Bryan P. Carson
Scopes in the drop-downScopes in the drop-down
© 2006 Bryan P. Carson© 2006 Bryan P. Carson
Scopes in the drop-downScopes in the drop-down
© 2006 Bryan P. Carson© 2006 Bryan P. Carson
Scopes in the drop-downScopes in the drop-down
© 2006 Bryan P. Carson© 2006 Bryan P. Carson
Customizing the drop-downs for each OPAC: Customizing the drop-downs for each OPAC: Hard coding the tokensHard coding the tokens
We only wanted certain scopes visible to We only wanted certain scopes visible to each OPACeach OPAC
Replace tokens with hard-coded option Replace tokens with hard-coded option values.values.– <!--{nosort}--><!--{nosort}-->– <!--{scope}--><!--{scope}-->
You must do this for every screen page in You must do this for every screen page in which a customized dropdown appears.which a customized dropdown appears.
© 2006 Bryan P. Carson© 2006 Bryan P. Carson
Hard coding the tokens to Hard coding the tokens to customize the dropdownscustomize the dropdowns
We replaced We replaced <!--{scope}--><!--{scope}--> (ripped (ripped the html) with this “translation” the html) with this “translation”
© 2006 Bryan P. Carson© 2006 Bryan P. Carson
HTML for MIDCAT Scopes - opacmenu.htmlHTML for MIDCAT Scopes - opacmenu.html
<input type="hidden" name="SORT" value="D">
<select name="searchscope" >
<option value=2 selected> Middlebury College Libraries</option>
<option value=3><!--Middlebury--> Videos</option>
<option value=4><!--Middlebury--> Music Recordings</option>
<option value=5><!--Middlebury--> Spoken Word Recordings</option>
<option value=9> Main Library</option>
<option value=6> Armstrong (Science) Library</option>
<option value=10> Music Library</option>
<option value=7> Davison Library</option>
<option value=8> Special Collections</option>
<option value=15> Flanders Field Recordings</option>
<option value=11> Career Services Office</option>
<option value=12> Curriculum Center</option>
<option value=13> Spiritual & Religious Life Center</option>
<option value=14> Center for Educational Technology</option>
<option value=16> Henry Sheldon Collection</option>
<option value=1> View Entire Collection</option>
</select>
© 2006 Bryan P. Carson© 2006 Bryan P. Carson
Partial list of screens pages we scopedPartial list of screens pages we scoped
srchhelp_a.htmlsrchhelp_a.htmlsrchhelp_a_s16.htmlsrchhelp_a_s16.htmlsrchhelp_a_s17.htmlsrchhelp_a_s17.htmlsrchhelp_X.htmlsrchhelp_X.htmlsrchhelp_X_s16.htmlsrchhelp_X_s16.htmlsrchhelp_X_s17.htmlsrchhelp_X_s17.htmlsrchhelp_Y.htmlsrchhelp_Y.htmlsrchhelp_Y_s16.htmlsrchhelp_Y_s16.htmlsrchhelp_Y_s17.htmlsrchhelp_Y_s17.htmlbotlogo.htmlbotlogo.htmlbotlogo_s16.htmlbotlogo_s16.htmlbotlogo_s17.htmlbotlogo_s17.html
opacmenu.htmlopacmenu.htmlopacmenu_s16.htmlopacmenu_s16.htmlopacmenu_s17.htmlopacmenu_s17.htmlsrchhelp_d.htmlsrchhelp_d.htmlsrchhelp_d_s16.htmlsrchhelp_d_s16.htmlsrchhelp_d_s17.htmlsrchhelp_d_s17.htmltoplogo.htmltoplogo.htmltoplogo_s16.htmltoplogo_s16.htmltoplogo_s17.htmltoplogo_s17.htmltoplogo_loggedin.htmltoplogo_loggedin.htmltoplogo_loggedin_s17.httoplogo_loggedin_s17.htmlml
© 2006 Bryan P. Carson© 2006 Bryan P. Carson
PitfallsPitfalls
System “remembers” (i.e., stays scoped)System “remembers” (i.e., stays scoped)– If you’re in Ilsley, you stay there.If you’re in Ilsley, you stay there.– If you’re in MIDCAT, you stay there, too.If you’re in MIDCAT, you stay there, too.
Middlebury wanted different start screen Middlebury wanted different start screen than Ilsley did.than Ilsley did.– Home buttons point to different websitesHome buttons point to different websites– timeouts have to point to same page timeouts have to point to same page
((mainmenu.htmlmainmenu.html))
© 2006 Bryan P. Carson© 2006 Bryan P. Carson
SolutionSolution - Intro Page - Intro Page mainmenu.htmlmainmenu.html
Shows up after a timeoutShows up after a timeoutClear choice for usersClear choice for users
© 2006 Bryan P. Carson© 2006 Bryan P. Carson
Style SheetsStyle Sheets
http://biblio.middlebury.edu/screens/http://biblio.middlebury.edu/screens/styles.cssstyles.css
http://biblio.middlebury.edu/screens/http://biblio.middlebury.edu/screens/styles_s17.cssstyles_s17.css
http://biblio.middlebury.edu/screens/http://biblio.middlebury.edu/screens/styles_s16.cssstyles_s16.css
© 2006 Bryan P. Carson© 2006 Bryan P. Carson
The EndThe End
Bryan P. CarsonBryan P. [email protected]@middlebury.edu