Style Samples

(These style samples apply to content on Basic Pages and most WYSIWYG fields in other content types. Other fields may be styled differently, depending on content type and context.)

The H1 heading above is the Title. The Title looks different on pages with a left sidebar (blue and mixed case).

Normally, there's only one H1 on the page (and some pages have no visible H1). The most common headings used in the body of the page are headings 2 through 4:

Heading 2

Sed ultrices ac eros sit amet tincidunt. Vestibulum pellentesque molestie dui eget volutpat. Praesent ornare consectetur lacus, sed placerat massa blandit tincidunt. Nulla sit amet tellus eu massa adipiscing posuere ac vitae lorem. Sed condimentum justo non lorem varius, ut interdum urna sollicitudin. Nullam id venenatis est, in vehicula felis.

Heading 3

Heading 4

Headings 5 and 6 also exist, but are rarely used.

Bullet Lists

This is a normal bullet list:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.

If you want your bullet list to follow the preceding paragraph without any space between, place the "prelist" class on the paragraph (i.e. <p class="prelist">).

Pellentesque vitae euismod arcu:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.

If the list items are long, you may want them to be spaced like paragraphs. In this case, place the "paragraphic" class on the list (i.e. <ul class="paragraphic">).

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

Here is a numbered list:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.

You can use "prelist" and "paragraphic" with numbered lists as well.

Tables

To use one of the preset table styles:

Insert a table with the table button. Delete the Width.
Fill in the table contents.
In the source code, set the class of the table to the desired style, and remove the cellpadding and cellspacing, i.e. <table border="1" class="line-table">.

Line table

<table class="line-table">
General-purpose table.

I like	Apples
I don't like	Asparagus
I like	Bananas

Research table

<table class="research-table">
Table for listing research themes on the Research page. In each row there is a photo in the left column and text in the right column. NOTE: The Research page has been unpublished as of 5/25/14.

Two-column table

<table class="two-column-table">
Used primarily to divide short sections of content into two columns. May contain paragraphs, bullet lists, etc.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Images

You can insert images into the page content. Images can float to the left or right (text flows around them), or not float at all (better for column-wide images).

Image class "float-left". Cras quis ullamcorper augue. Etiam consequat est nibh, non iaculis leo sollicitudin id. Duis eleifend eros tempus, placerat dui et, tristique nisl. Morbi vel lacus in ligula adipiscing auctor non mattis urna. Phasellus metus nunc, ultrices quis odio nec, imperdiet aliquet orci. Pellentesque cursus ante a nibh fringilla porta. Integer nec tempor leo. Pellentesque adipiscing purus ac venenatis placerat. Nullam sed pretium metus, quis congue odio. Donec elit est, lacinia id eros vel, vehicula vulputate erat. Pellentesque pellentesque turpis odio, a cursus augue consectetur ut. Proin massa leo, gravida malesuada hendrerit non, ultricies ut sapien. Pellentesque vitae euismod arcu. Fusce id venenatis dui. Sed mollis leo risus. Suspendisse at sem at libero viverra semper.

Sample Image class "float-right". Cras quis ullamcorper augue. Etiam consequat est nibh, non iaculis leo sollicitudin id. Duis eleifend eros tempus, placerat dui et, tristique nisl. Morbi vel lacus in ligula adipiscing auctor non mattis urna. Phasellus metus nunc, ultrices quis odio nec, imperdiet aliquet orci. Pellentesque cursus ante a nibh fringilla porta. Integer nec tempor leo. Pellentesque adipiscing purus ac venenatis placerat. Nullam sed pretium metus, quis congue odio. Donec elit est, lacinia id eros vel, vehicula vulputate erat. Pellentesque pellentesque turpis odio, a cursus augue consectetur ut. Proin massa leo, gravida malesuada hendrerit non, ultricies ut sapien. Pellentesque vitae euismod arcu. Fusce id venenatis dui. Sed mollis leo risus. Suspendisse at sem at libero viverra semper.

Image across the column width (the column is 732 pixels wide at most on pages with a left sidebar, 970 at most on pages without a left sidebar). BE SURE TO REMOVE THE WIDTH AND HEIGHT IN THE IMAGE SELECTION TOOL so that the image can resize proportionately as the page narrows for mobile devices.

Miscellaneous

An ordinary horizontal rule looks like this:

A thicker horizontal rule is made by placing the "thick" class on it (i.e. <hr class="thick" />).

Tips

Links to content within the site should be site-relative (they should start with a slash, meaning "start at the site root"). For example, <a href="/research">Read more about our research</a>.
Links to PDFs and external sites are automatically opened in a new tab/window, so there's no need to set the target to "_blank".
Do not underline text. Underlining signals to users that the text is a link; however, on this site, links use color rather than underlining.
Use the Omega button to insert special characters.
When pasting text into the editor, you should almost always use "Paste as plain text" or "Paste from Word." Pasting text copied from word processors, web pages, or email will often paste styles from the source document that disrupt the styles of the website. Even using these tools, extraneous styling may get through and you may need to clean up the HTML code manually. Keep in mind that the WYSIWYG editor is merely a tool to help you write your HTML, not an authority on correct markup.
After making significant changes, check your page on recent versions of Firefox, Chrome/Safari, and Internet Explorer. Also, check what your pages will look like to mobile users, either by narrowing your browser window, or by using a mobile device.
The Drupal Cloud currently places a size limit of 8 megabytes on uploaded files. Larger files need to be hosted elsewhere (such as in your web.mit.edu locker).
Likewise, the Drupal Cloud limits uploaded images to at most 1200 pixels in either dimension. Larger images need to be hosted elsewhere, or saved in a .zip file for download.

Maintenance Tasks

Adding a new editor

Add user to whitelist:
Configuration > People > Shibboleth settings > Whitelist
Add new user's kerberos id to the list.
Have new user sign in with their certificate or kerberos id/password:
Send them to http://billf.mit.edu/omg/login (All logins to the site are through this URL.)
They must click "Click here to log in to your site via touchstone"
Have them ignore certificate warnings, and follow the instructions to sign in.
At this point, their account has been created and you can give them editorial privileges.
Give user editorial privileges:
People > List
Edit new user.
Assign Content Manager role to user.

Adding a new Person

Prepare a photo of the person. The photo should be a .jpg image, 150 pixels wide by 225 high.
Log in and open two browser tabs/windows on the website.
In the first tab, go to the People section and edit any person. This will act as a guide for how to fill out the fields for the new person.
In the second tab, select Quick Admin Links > Add person.
Read the Instructions at the top if necessary.
Fill out the fields, upload the photo, and save.

Adding a new Publication

If the PDF of the publication is to be hosted locally, upload it to http://people.csail.mit.edu/billf/publications/. To get access, you'll need to contact the CSAIL system administrators.
If the publication is to be featured on the site home page, prepare a 188 pixel square image.
Log in and open two browser tabs/windows on the website.
In the first tab, go to the Publications section and edit any publication. This will act as a guide for how to fill out the fields for the new publication.
In the second tab, select Quick Admin Links > Add publication.
Read the Instructions at the top if necessary.
Fill out the fields, upload the image, and save.