Library & Technology

Web Style Guide

This page lists the technical requirements for publishing on the Duke Law website. If you need blackboard support please see our blackboard tutorials.

To achieve consistency across our site, and make our content usable to a variety of visitors and devices, display properties are managed in separate CSS files.

Beginning users may type or paste their content into the content manager and the CSS files will control their display.

Intermediate users may modify the default display properties of content using the following CSS classes:

Advanced users may also edit their own style sheets through the header area of the content tool

Headings

The purpose of headings are to help the viewer identify the role of a section of content in relationship to the overall document. Headings should not be used simply as a means of making text stand out. If you would like to draw attention to particular items in your content not related to document structure please enclose those in either a paragraph (<p>), or list (<li>) tag and assign it a class from our style guide.

First and second level headings are already assigned by our site templates and will be discarded by our content editor. All headings in the content editor should begin with a level three heading.

Images

To work seamlessly with our fluid template design, images must meet the following standards:

  • News Item images must be 75px Square
  • Feature images must be 200px Wide
  • Content images should be no wider than 300px
  • If no feature is present, images should be no wider than 500px wide
    • .

Classes

Classes should use the format: <tag class="class name">text</tag>

Formatting

  • highlight
  • callout
  • caption
  • fineprint (decreases text size by 80% use sparingly)
  • nobreak
  • imagetag
  • hide (hides elements that are only needed when the page is printed)
  • show (displays on otherwise hidden element)
  • hide_bullet (hides list bullet)
  • alpha_list (Converts numerically ordered list to alphabetical)

Colors

The following colors are pre-approved for use on this site.

  • red {color:#b32500;}
  • blue {color:#0040d9;}
  • purple {color:#800067;}
  • green {color:#005711;}
  • brown {color:#805900;}
  • black {color:#000;}

You may also wish to review our extended color palette (.pdf).

CSS Editing

Except in rare circumstances, creating additional styles for content should not be necessary. In particular, user created styles have not undergone the same rigorous cross-browser testing as our style sheets and in some instances may conflict or even break the presentation of your content. We encourage you to consult with Web Services if you feel your content may require additional styling.

The following guidelines explain the organization and structure of Web Services CSS. Our approach condenses all of the style sheet properties onto three lines to help speed up searching and editing.

  1. Positioning Properties: margin; padding; height; width; display; float; clear; position;
  2. Font and List Properties: font; text-align; color;
  3. Background and Border Properties

The following CSS abbreviations are preferred:

  • margin: top right bottom left; -or- top left/right bottom; -or- top/bottom left/right;
  • padding: as for margin;
  • font: style variant weight size/line-height family;
  • background: url(image) repeat left top color;
  • border: width style color;
  • border-width: as for margin;

This guide outlines the characteristics of the Duke Law website and provides details as to its layout, color, content, and overall presentation. The guide applies to the Duke Law homepage, section homepages (list of 12 pages linked in the main navigation), and third-level pages which are pages content pages that makeup the crux of the website. If you have questions about the guide or need further assistance, please contact a member of the Web Services group.

Page layout

Duke Law bars

The Duke Law bars are the two blue bars positioned at the top of the page and span the entire width of the screen. The top bar has a medium-blue background color, is 25px tall, and contains a list of links including a search box. The bottom bar has a Duke Blue background color with a 6px tall grey (gradient) shadow. The bar height and content varies as follows;

Content area

With the Duke Law bars at the top, the content area follows next and is set to display at 990px wide with a white background. A grey background color fills the remainder of the screen to the left and right of the content area.

Fonts

Duke Law logo

The Duke Law logo, which appears on all pages of the website, uses the typeface Trade Gothic Bold Condensed. The logo is presented with white lettering in all caps and with a Duke Blue background color. Contact the Communications Department for color variations, terms of use, and questions about the logo.

» Download the logo (Zip file contains EPS, PNG, TIFF, and JPG formats) OR specify can be found on shared directory

Trade Gothic Bold Condensed

In addition to the logo, this sans-serif typeface is used on the section name images. These images are found in the top, left portion of the page content area.

Georgia

Georgia is the serif typeface used on headings and in the main navigation box.

Verdana

Verdana is the sans-serif typeface used to present section navigation and standard content.

Images

Images presented in the content area of a page must adhere to the following rules;

Colors

The Duke Law website is based around 6 colors that our compatible with Duke Blue. View the color palette to see the colors and their information.

» Colors as psd (graphicsredesign2007-08color palettepalette2008.psd) or pdf with palette and additional info.