Appearance and Infrastructure Updates

Appearance Updates

The past few weeks have been dedicated to making updates to the appearance of the new College Libraries website. Instead of taking a long time to discuss all of the details in depth a brief explanation will be provided instead. All of the appearance updates have been made to the CSS to adjust how things appear on a device.


  • The line that appears underneath the links has been removed (a {text-decoration: none;})
  • When a person hovers their mouse over top of a link it becomes underlined (a:hover {text-decoration: underline;} )

Left Hand Navigation

  • The line that appears underneath the links has been removed (a {text-decoration: none;})
  • When a person hover their mouse over top of the navigation the following occurs:
    • A border to the left of the link appears in the color red (border-left: solid .25em rgb(157, 40, 30);)
    • The background color yellow appears (background-color: #FFC;)


  • The spacing between the headings and paragraphs has been reduced.
  • Spacing that occurs between two headings has been reinstated (at one point it had been removed).

General Changes Throughout Site

  • Right Column – Blue background has been removed
  • Twitter Box – Color of the links have been changed from blue to red to match the rest of the website.
  • The space that sits above and below the copyright information at the bottom of the website has been adjusted.

Infrastructure Updates

The infrastructure updates could also be considered as changes to the template. A master template was created for the website and it has been used to create the different web pages that make up the website. After creating the template the W3C Markup Validation Service was used to validate it along with the home page and the about us prototype page. A few errors were detected, so adjustments had to be made to the HTML in order for all of the pages to validate.

Some of the errors that needed to be addressed were:

  • & needed to be changed to become &
  • The nested list on the About Us web page was missing a closing </ul> tag.

I’m sure that there were more errors, but I do not remember all of them. At the moment the validator is still finding one error on the home page. The error is for the link that takes you to the advanced search of the library catalog. The URL for the link is[0]=&query_value[1]=&query_value[2]=&query_relation[0]=all&query_index[0]=kw&sort_keys=Relevance&search_scope=my_library. I am not that concerned with the error because the link works; However, if you know why the validator is throwing an error please let me know.

Contact Us Web Page

The contact us web page has received a few updates that are much different from the ones that have already been discussed. The updates that have been made to this page impact the web form that appears at the bottom of it. The web page has been set up to prevent a person from submitting the form unless a person fills out each blank form field and they enter a valid email address. If a person forgets to fill out one of the form fields or enters an invalid email address an error message will appear. For example, if a person does not enter a valid email address and clicks on the submit button the following message appears “Invalid format.”

A combination of JavaScript and CSS are being used for the error messages. The JavaScript is used to detect and display the error message and the CSS is used to adjust the appearance of the message. The CSS that has been added makes the error message appear in red.


Website Appearance

Over the course of the past few weeks the appearance of the website has started to be addressed. All of the changes have been made to the CSS to adjust and change several things. The changes made to the CSS impact the following:

  • Typography – Font Size and spacing around text that appears on the page.
  • Color – Using the school colors red and white to change the appearance.
  • Spacing and Borders – The space around the columns of the layout have been adjusted and borders have been added around specific items.

Instead of trying to explain in detail all of the changes that have been made it is easier to provide some images of what the website currently looks like.

Home Page

Screen capture of the Home Page

About Us

Screen caputre of the About Us web page

Libraries A to Z

Screen capture of the Libraries A to Z web page.

The Site Map has been renamed to become Libraries A to Z because the latter is more representative of the items that appear on the web page.