MediaLinks Style Sheet

MediaLinks Style Sheet

Developed by John Foliot / Stanford Online Accessibility Program (http://soap.stanford.edu)
Released under Creative Commons Attribution-Share Alike 3.0 United States License

NOTES:

This is an additional stylesheet (medialinks.css) which can be incorporated into Drupal (or used stand alone) that does some checking of links based on file extension type, and add an appropriate icon after the link showing the file format. For example, a link to a PDF file will auto-magically also show a Acrobat icon directly after the link, as part of the link; current formats supported include PDF, DOC, DOCX, XLS, and PPT. It also has a new CSS authoring class called “external” which also provides an icon after a link, indicating that it is a link off of the current site. Examples can be seen at:

• http://studentaffairs.stanford.edu/registrar (right hand column, under Help Resources are links off the site)
• http://studentaffairs.stanford.edu/registrar/faculty/course-evals-axess (first three links on the page are links to PDF)

Effective July 9, 2010, this stylesheet should now be part of the latest Stanford Modern Theme template (version 1.92) available from IT Services

Background:

Providing visual cues to users that a link is to a document (PDF, Word, etc.) provides useful decision-making information. It addresses certain cognitive disabilities and is a best-practices recommendation. For even better accessibility, content authors should also indicate via the title attribute that the link is to a certain file type:

<a href ="pathtofile.pdf" title="Links to a PDF file">Name of File [245 kb]</a>

(* adding the total file size is helpful as well, especially if the document is large)

To Add this to your Drupal instance:

1. Unzip ‘links.zip’ to the root of your theme’s directory (which should already have both a CSS and Images directories – the zip file will be adding files to both
2. At the root of your theme, there should be a file called “____.info” which needs to be modified to add the following:
   stylesheets[all][] = css/medialinks.css
   (Note, you can associate the additional style sheet in other ways as well, including using the @import method to the theme’s master CSS file, or by hard-coding it to your theme’s template file using either the @import or <link rel=”stylesheet”> methods
3. Upload the required files to your server, refresh the Drupal cache and you should be good to go
4. **Provided As Is ** (but if you get stuck let me know)

Write your own:

Want to try this yourself? It’s actually quite easy, and takes advantage of Selectors in CSS. (http://www.w3.org/TR/css3-selectors/#selectors) Selectors are patterns that match against elements in a tree, and as such form one of several technologies that can be used to select nodes in an XML document. Selectors have been optimized for use with HTML and XML, and are designed to be usable in performance-critical code.

Here’s some sample code (used for the PDF):

/************************/
/*  PDF  */
/*********/
/*   Note the conditional after the a element, which is checking if the file has a .pdf extension   */

a[href$='.pdf'] {
     background-image: url(../images/icons/pdf_gray.png);
     background-position: right;
     background-repeat: no-repeat;
     padding-right: 16px;
     border: none;
     line-height:16px;
     border-bottom: 1px dotted gray;
}

/*   Note here that I have provided for both :focus and :hover behavior, which ensures the visual change of “highlighting” is present when moused-over or tabbed-to. Yes, an accessibility issue but also significant to users of touch-screens as well (‘cause there is no mouse there either…)   */

a[href$='.pdf']:focus, a[href$='.pdf']:hover {
     background-image: url(../images/icons/pdf.png);
     background-position: right;
     background-repeat: no-repeat;
     padding-right: 16px;
     border: none;
     line-height:16px;
     color:#830000;
     border-bottom: 1px dotted #830000;
}
/************************/