Web OPACs for Different Organizations through Scopes and Style Sheets Bryan P. Carson Middlebury College - Library & Information Services IUG 2006 Copyright

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.


MIDCAT, Ilsley Public Catalog, MIDCAT, Ilsley Public Catalog, Sheldon Museum CatalogSheldon Museum Catalog


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


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


1717 Ilsley Public Ilsley Public LibraryLibrary


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)


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


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


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


Scopes for Collections Needing Scopes for Collections Needing Discreet OPACs (2)Discreet OPACs (2)















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….


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


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


Style Sheets brand the OPACsStyle Sheets brand the OPACs






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


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


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


1616 Henry Sheldon Henry Sheldon CollectionCollection

http://http://biblio.middlebbiblio.middlebury.edu/ury.edu/search~S16 search~S16


1717 Ilsley Public Ilsley Public LibraryLibrary

http://http://biblio.middlebbiblio.middlebury.edu/ury.edu/search~S17 search~S17


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.)


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/


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)


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.


Scopes in the drop-downScopes in the drop-down






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.– – 

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.


Hard coding the tokens to Hard coding the tokens to customize the dropdownscustomize the dropdowns

We replaced We replaced  (ripped (ripped the html) with this “translation” the html) with this “translation”


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> Videos</option>

<option value=4> Music Recordings</option>

<option value=5> 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>


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


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))


SolutionSolution - Intro Page - Intro Page mainmenu.htmlmainmenu.html

Shows up after a timeoutShows up after a timeoutClear choice for usersClear choice for users


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


The EndThe End

Bryan P. CarsonBryan P. [email protected]@middlebury.edu

Documents

Web OPACs for Different Organizations through Scopes and Style Sheets Bryan P. Carson Middlebury College - Library & Information Services IUG 2006 Copyright