1. Web OPACs for Different Organizations through Scopes and Style Sheets Bryan P. Carson Middlebury College - Library & Information Services IUG 2006 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 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.

2. © 2006 Bryan P. Carson Module: WebOPAC Audience Level: Beginner Middlebury College provides the catalog for the local historical museum and the town’s public library as well as three branch libraries on campus. We therefore have to deliver separately branded OPACs from the same database. We do this through scoping, CSS, and WWWoptions. This presentation will of interest to institutions delivering parts of their databases as scopes to organizations that are separate and have very different branding.

3. © 2006 Bryan P. Carson MIDCAT, Ilsley Public Catalog, Sheldon Museum Catalog

4. © 2006 Bryan P. Carson Topics I’ll Cover Scopes –What are they? –Scopes and “Branding” WWWoptions –STYLESHEET –Others Screens files Style sheets in the WebOPAC –What corresponds to what? HTML Changes in the /screens –Hard coding drop-down menu labels

5. © 2006 Bryan P. Carson Correspondences WWWoptionCSS Scope # Scope Name “Brand” STYLESHEETstylesheet.css2 Middlebury College Libraries STYLESHEET16 stylesheet_s16.cs s 16 Henry Sheldon Collection STYLESHEET17 stylesheet_s17.cs s 17 Ilsley Public Library

6. © 2006 Bryan P. Carson What’s a Scope? Scopes are used to limit patron searches in the Web OPAC to a particular branch, library or collection as specified in your initial set up. You can create separate search menus for scopes, and make links from search pages. (Source: CS Direct) Source: CS DirectSource: CS Direct

7. © 2006 Bryan P. Carson All our Scopes 1. View Entire Collection 2. Middlebury College Libraries 3. Middlebury Videos 4. Middlebury Music Recordings 5. Middlebury Spoken Word Recordings 6. Armstrong Library 7. Davison Library 8. Special Collections 9. Main Library 10. Music Library 11. Career Services Office 12. Curriculum Center 13. Spiritual & Religious Life Center 14. Center for Educational Technology 15. Flanders Field Recordings 16. Henry Sheldon Collection 17. Ilsley Public Library 18. Ilsley Movies 19. Ilsley Music Recordings 20. Ilsley Spoken Word Recordings 21. Ilsley Children, Youth and Teen Materials 22. Sarah Partridge Library

8. © 2006 Bryan P. Carson How we Proceeded Decide which organizations need separate branding Choose appropriate scopes Create STYLESHEET WWWoption in the Millennium client Create corresponding CSS in the screens directory

9. © 2006 Bryan P. Carson Scopes for Collections Needing Discreet OPACs 2. Middlebury College Libraries 16. Henry Sheldon Collection 17. Ilsley Public Library

10. © 2006 Bryan P. Carson Scopes for Collections Needing Discreet OPACs (2) 2. Middlebury College Libraries 16. Henry Sheldon Collection 17. Ilsley Public Library

11. © 2006 Bryan P. Carson Scopes for Collections Needing Discreet OPACs (3) 2. Middlebury College Libraries 16. Henry Sheldon Collection 17. Ilsley Public Library

12. © 2006 Bryan P. Carson Scopes for Collections Needing Discreet OPACs (4) 2. Middlebury College Libraries 16. Henry Sheldon Collection 17. Ilsley Public Library

13. © 2006 Bryan P. Carson WWWoptions Under “General Display and Behavior Options” New WWWoptions must be created to correspond to the discretely scoped OPACs STYLESHEET –STYLESHEET16 –STYLESHEET17 Later, when customizing the HTML on screens… –TOPLOGO TOPLOGO16 TOPLOGO17 –BOTLOGO BOTLOGO16 BOTLOGO17 And so on….

14. © 2006 Bryan P. Carson STYLESHEET WWWoption You’ll need one for at least each of the branded OPACs Must correspond to scopes and CSS STYLESHEET, STYLESHEET16, STYLESHEET17

15. © 2006 Bryan P. Carson Creating STYLESHEET WWWoptions Set each WWWoption to point to a CSS (e.g., /screens/styles.css) Similar functionality for others (e.g., @screens/botlogo_s17.html

16. © 2006 Bryan P. Carson Style Sheets brand the OPACs

17. © 2006 Bryan P. Carson Style Sheets brand the OPACs

18. © 2006 Bryan P. Carson Style Sheets brand the OPACs

19. © 2006 Bryan P. Carson Style Sheets - CSS You Need a Different Cascading Style Sheet for each separately branded OPAC –You can have several STYLESHEET WWWoptions associated with a single /screens/styles.css file. (e.g., STYLESHEET17, 18, 19, 20, 22 are associated with styles_s17.css, “Ilsley green and yellow”) http://biblio.middlebury.edu/screens/styles.css –MIDCAT: styles.css –Ilsley: styles_s17.css –Sheldon Museum: styles_s16.css Must use underscore: Must use underscore: styles_s17.css

20. © 2006 Bryan P. Carson Associating Style Sheets and Screens with Scopes (details) The default CSS doesn’t need anything appended. Append _s to the filenames for the customizable screens and the cascading style sheets. –styles.css, styles_s16.css, styles_s17.css You’ll need to extend this concept to all the “/screens” html files you want to brand. (I’ll get to this later.) –opacmenu.html, opacmenu_s16.html opacmenu_s17.html

21. © 2006 Bryan P. Carson Naming Conventions and Correspondence (with OPAC links) WWWoptionCSS Scope # Scope Name URL STYLESHEETstylesheet.css2 Middlebury College Libraries http://biblio.mi ddlebury.edu/s earch~S2 http://biblio.mi ddlebury.edu/s earch~S2 STYLESHEET16 stylesheet_s16.cs s 16 Henry Sheldon Collection http://biblio.mi ddlebury.edu/s earch~S16 http://biblio.mi ddlebury.edu/s earch~S16 STYLESHEET17 stylesheet_s17.cs s 17 Ilsley Public Library http://biblio.mi ddlebury.edu/s earch~S17 http://biblio.mi ddlebury.edu/s earch~S17

22. © 2006 Bryan P. Carson Colors: Why and How? First OPAC was “out of the box”, so… Color schemes matched the existing websites for the institutions. (We got the hex codes from their style sheets.) We used the Firefox Web Developer Toolbar to “view style information” and ascertain the element names in which a certain color occurred. Then we found that element in the CSS and matched the hexadecimal. (We used Visibone to get the color names when they weren’t available in the CSS.) Visibone

23. © 2006 Bryan P. Carson Firefox Web Developer Toolbar Useful for seeing the code in-situ –style information –table outlines –image information –doing many other frequently-used tasks Download from chrispederick.com http://chrispederick.com/work/webdevelop er/ http://chrispederick.com/work/webdevelop er/ http://chrispederick.com/work/webdevelop er/

24. © 2006 Bryan P. Carson Dissecting the Example Pages Examples with the Firefox toolbar in action. (“crosshairs”, outlines, etc.) –Middlebury College Library Middlebury College LibraryMiddlebury College Library –Middlebury CSS Middlebury CSSMiddlebury CSS Let’s see it live. (MIDCAT) MIDCAT

25. © 2006 Bryan P. Carson Other Aspects of Customization (Display and Behavior) customizing the HTML in the “/screens” files In our case, we wanted to limit the options in the scopes dropdown –e.g., opacmenu.html –There are many more search screens where these options appear.

26. © 2006 Bryan P. Carson Scopes in the drop-down

27. © 2006 Bryan P. Carson Scopes in the drop-down

28. © 2006 Bryan P. Carson Scopes in the drop-down

29. © 2006 Bryan P. Carson Customizing the drop-downs for each OPAC: Hard coding the tokens We only wanted certain scopes visible to each OPAC Replace tokens with hard-coded option values. – – You must do this for every screen page in which a customized dropdown appears.

30. © 2006 Bryan P. Carson Hard coding the tokens to customize the dropdowns We replaced (ripped the html) with this “translation”

31. © 2006 Bryan P. Carson HTML for MIDCAT Scopes - opacmenu.html Middlebury College Libraries Videos Music Recordings Spoken Word Recordings Main Library Armstrong (Science) Library Music Library Davison Library Special Collections Flanders Field Recordings Career Services Office Curriculum Center Spiritual & Religious Life Center Center for Educational Technology Henry Sheldon Collection View Entire Collection

32. © 2006 Bryan P. Carson Partial list of screens pages we scoped srchhelp_a.htmlsrchhelp_a_s16.htmlsrchhelp_a_s17.htmlsrchhelp_X.htmlsrchhelp_X_s16.htmlsrchhelp_X_s17.htmlsrchhelp_Y.htmlsrchhelp_Y_s16.htmlsrchhelp_Y_s17.htmlbotlogo.htmlbotlogo_s16.htmlbotlogo_s17.htmlopacmenu.htmlopacmenu_s16.htmlopacmenu_s17.htmlsrchhelp_d.htmlsrchhelp_d_s16.htmlsrchhelp_d_s17.htmltoplogo.htmltoplogo_s16.htmltoplogo_s17.htmltoplogo_loggedin.html toplogo_loggedin_s17.ht ml

33. © 2006 Bryan P. Carson Pitfalls System “remembers” (i.e., stays scoped) –If you’re in Ilsley, you stay there. –If you’re in MIDCAT, you stay there, too. Middlebury wanted different start screen than Ilsley did. –Home buttons point to different websites – timeouts have to point to same page ( mainmenu.html )

34. © 2006 Bryan P. Carson Solution - Intro Page mainmenu.html Shows up after a timeout Clear choice for users

35. © 2006 Bryan P. Carson Style Sheets http://biblio.middlebury.edu/screens/sty les.css http://biblio.middlebury.edu/screens/sty les.css http://biblio.middlebury.edu/screens/sty les_s17.css http://biblio.middlebury.edu/screens/sty les_s17.css http://biblio.middlebury.edu/screens/sty les_s16.css http://biblio.middlebury.edu/screens/sty les_s16.css

36. © 2006 Bryan P. Carson The End Bryan P. Carson bcarson@middlebury.edu