Skip to Main Content
Library Home   :
Click to open/download a PDF of Full Library Calendar in a new windowSummer 2024 Hours

Library Homepage Style Guide: Style Guide - Main Library Page

Header

 Library Webpage Header

Content Function Foreground Background  Alignment Size Spacing
Chatham w/ Library Logo links to home (library.chatham.edu) #FFFFFF Left - span 399px 8px
embedded  javascript  Today's hours #434343

#FBF7C1

Center - <br> 12px 8px
Regular Hours Drop css style drop #000000
alternate:
#F5EF9A
#FFFEE5
<br>" 11px  8px
Calendar PDF external link #4b366b legacy Right - bottom Right 11px  8px

 

Main Header Drop Down

 Quick Access Drop-down

Content Function Foreground Color Background Color Alignment Size Spacing
color band aesthetical   shadow band background full span    
Text-title quick access #FFFFFF

#5F4F68 // mouse-over: #000000

right 14px bold  
Text-descr   #FFFFFF #5F4F68 // mouse-over: #000000 l, l, c, c standard (weight: 700) bold line ht 27px

 

Naming Conventions

 URL Names

Library Home https://library/chatham.edu syntax
 / Sub Page/Guide - main   /naturaltext or /natural_text or /ABBR , /ACRo...?
 /  / Sub Page/Guide - sub   /naturaltext/naturaltext
 / Auxiliary page   /naturaltext or /natural_text or #
password protected or non-public    

 

Search Box

 Search Box

Content Function Foreground Color Background Color Alignment Size Spacing
search box aesthetical   rotating background image for each new body.load top, left    
.ui-tabs    default (#000000) default  top, left 16 px default 
search input search default shadow center, middle 16 px default 

Main Body Buttons

 Main Body Buttons

Content Function Foreground Color Background Color Alignment Size Spacing
8 symmetrical boxes / buttons (html) links to featured guides #000099

#F1EEF7 / mouse-over: #FFFFFF

border: #9590C6 / 4px

center 16px b 8px

Events Show

 Events Slide Show

Content Function Foreground Color Background Color Alignment Size Spacing
rotating slide show current events random border? lower left default justified?

Chat Box

 Chat Box

Content Function Foreground Color Background Color Alignment Size Spacing
Chat box communication default (skin#24679) 200 x 260px

Footer

Footer

Content Function Foreground Color Background Color Alignment Size Spacing
3 Drop-downs Quick Links - Everything else that isn't covered above, or part of a group that has things listed for the 1st time #B9B5D8 / mouse-over: #FFFFFF #​4B366B far left. top 16px 8px
embedded  javascript  Today's Hours #FFFFFF #4B366B center top
quick link Link to Regular hours and PDF Cal. center middle
Weather button    #4B366B off-center middle
Social Media buttons <img> #4B366B right 32 x 32px none; table cell
Address String with Maps and Site Map ADA req. #FFFFFF #4B366B low center default (12 b) space-pipe-space ("&nbsp;|&nbsp;")
Chatham Logo links to Chatham.edu <img> #4B366B bottom center 219px 8px


Quick Links:
 
:
The Library is


    Visit us on Instagram    Listen to our playlists on Spotify   Visit us on YouTube Visit us on Twitter
 

Jennie King Mellon Library | 107 Woodland Road | Pittsburgh, PA 15232 | 412-365-1670 | Maps & Directions | Site map
 

Chatham Home