General Web Style Guide

An General Page

Page Layout

Left promos: The purple and magenta boxes on the left side
Photos with caption: The main image, in this case the trolley
Right promos: The right column promotion, in this case an aerial shot of the main campus


To ensure a consistent look throughout the website, there should not be any font changes: font, font color, or font size. Do not change the font in any way in the formatted text block window without using the Style dropdown. Additionally, please always be consistent and careful with editorial style, spelling, and grammar. View the Editorial Style Guide »

Formatted Text Block Styles

Several styles are available to you in the input screen in Drupal for Generic Pages (if you prefer to use a Generic Wide page for your content, contact Web Services). Use only these tools to help make your content look more visually dynamic and interesting.

Under Generic Page:


Link Buttons
Pull Quote
Useful Links
Photo with Caption
Photo with Caption (Floated)
Show/Hide Tabs


Headings (use in sequential order)
Listing Page Headline
Body Text
Listing Page Intro Text
Form Section
Landing Page Section
Gray Serif Italicized (to emphasize a paragraph)

Under Promo - Right Column only:

Useful Links Promo
Pull Quote Promo
Gray Header Promo
Photo Promo
Purple Header Promo

Photo Sizes

To keep a consistent look on, use one of the following sizes to display your photo:

Generic Page:

Photo with Caption: 450px x 300px
Photo with Caption (Floated): 200px wide or less

Promo - Right Column:

Photo Promo or Video Screenshot: 200px x 150px

News Article for Department News:

Photo: 336px x 224px

For these photos, download templates on the Web Services site under Guides & Templates.

To use the templates:

  1. Open the template file in Photoshop.
  2. Open your photo in Photoshop.
  3. Drag your photo to the template.
  4. Use Free Transform and drag a corner of your photo in or out while holding down Shift to maintain the photo's aspect ratio to fill the template with your photo. Drag each corner one at a time and then move the photo until you achieve the cropping you desire.
  5. Save your photo as a .jpg using "Save for the Web" in medium quality and at 72 dpi and upload to Drupal. Since Photoshop remembers settings, check these settings each time you General Style Guide save for the web.

For help or if you do not have Photoshop, contact Web Services at for assistance.

ELA Photo Sizes

3x3 Promo: Square (336px by 336px)

News Article

  • Thumbnail: Rectangle (336px x 224px)
  • Body: Variable (max width is 672px wide)

Generic Page

  • Body: Variable (max width is 672px wide) 
  • Banner: 1630px X 1080px (Same for ELA Landing Page)

ELA Story

  • ELA Story Profile Image: Square (168px wide)
  • ELA Story Banner: Rectangle (672px wide)
  • ELA Story Part Image: 505px Rectangle

ELA Story Landing Page:

  • Story 1 [Featured story with large image]: This is the banner image. 672 px
  • Story 2 [Displays story parts and corresponding images: 505 px rectangle
  • Story 3 - 8 [Displays Smaller image]: This is also the banner image. 4 Col Rectangle Important: For stories ALWAYS upload a 672px wide rectangle for the banner image.

ELA Program Feature Panel:  Square (336px Sq)

Event Image: Rectangle (336x224 px)

Profile Image (Notable Alumni): Square (252px)

Piecing Your Page Together: Content-Types

Before you create your generic page, build your left and right column promos that you will then enter into your generic page:

Left Promo
Promo - Left Column

Your left column promos are the simplest to create:
Line 1 should always be a teaser or superheader and will appear in white above the green header.
Line 2, which appears as the green, bold text, should always be your main call to action or headline.
Line 3 is a description of the link that the user will click on.
URL is the actual URL that the user will go to.

Drupal automatically chooses the background color of the left promo—purple or magenta. You cannot select the color.

Promo - Right Column

Right promos give you more options, coming in five different styles:

Useful Links PromoUseful Links Promo

Use the Useful Links Promo to highlight helpful links for the user. Use as a right promo rather than at the end of your text only when you have no other right promo to use. Otherwise, use the Useful Links template in the body of your text.

Gray PromoPurple Promo

Gray Header and Purple Header Promos

Use the Gray Header and Purple Header Promos to highlight dates, deadlines, facts, services, and more. The two promos are interchangeable—use whichever style you prefer.

Pull Quote Promo

Pull Quote Promo

The Pull Quote Promo brings attention to a quote that summarizes long, complex, and/or meaningful text.

Photo PromoPhoto Promo

The Photo Promo also highlights information and can be used in the following ways:

  1. Help the user visualize. Use the photo and caption only to show what goes on in your area.
  2. Explain what's happening in your area. Use the photo (linked or not linked), caption (optional), headline (linked or not linked), and description to bring attention to a project, event, or other information in your area.
  3. Show what's happening through a Flickr set. Web Services promotes your events using Flickr sets throughout To use a Flickr right promo using your professional photos, contact Web Services. We will get your photos on Flickr and make a custom right promo linked to your Flickr set for you.
  4. Show what's happening through a video. Use a video screenshot for the photo (linked to the video page), caption, headline (linked to the video page), and description. To use a video right promo, contact Web Services. We will make a custom right promo with a play button linked to your video for you.
  5. Connect users to your Social Media pages: Include icons for Twitter, Facebook, Pinterest, etc. or include a Twitter feed.

*Remember to link both the image and the title plus any appropriate text in the teaser. Delete the caption if it does not make sense to use it for your content.

Generic Page: Putting It All Together

To make your pages more visually dynamic, Drupal offers you several options to enhance your pages:

Video Reference. You may add a video to the top of your page. The video must already exist on

Text styles. Text may be styled using the options outlined above:
Headings (use in sequential order)
Gray Serif Italicized (to emphasize a paragraph)
Pull quote (under Templates)
Useful links (under Templates) at the bottom of your page
Other styles under the Style tab where appropriate
Read More buttons (under Templates; use sparingly)

Photos. For all photos, use the Photo with Caption option under Templates. All photos must be professional and may be removed from your page if they do not meet photo standards. Review the Photography Guidelines for more information.

Left Promos. You may add up to two left promos to your pages. If you do not add a left promo, your page will inherit the promos of the next highest level in that section. These promos are inherited, meaning that any promo you add will also appear on any pages under your page.

Right Promos. Add one to three right promos to your page. Like left promos, if you do not add a right promo, your page will inherit the promos of the next highest level in that section. These promos are also inherited, meaning that any promo you add will also appear on any pages under your page.

Section dividers. Use horizontal lines to break up sections of long pages.

Styles to Code

You may work on the Source screen to define:

Learn more links. At the end of text, add a link using text and a double arrow (using » in your source code). Example:
Link »

Other Tools

Several other tools exist in Drupal to help you promote your area:

  • Event Listing
  • Feature promotions on landing pages
  • News articles (department news)*
  • Photo slideshows
  • Syndicated content (blocks of content that you can use on multiple pages)
  • Video Page
  • Video Listing Page

*Add pull quotes under the Templates dropdown as well as right promos that correspond to your content in your news articles.


Need help with the design of your specific pages? Contact Web Services at for assistance.