Style Samples

Style Samples and Instructions

Below are examples of HTML elements and content styles for Basic Pages. However, keep in mind that most pages on this site are NOT Basic Pages, and styles on other page types may vary from these. Content types used on this site are listed below. Miscellaneous instructions for editing and maintaining the site are further below.


Heading 2

Sed ultrices ac eros sit amet tincidunt. This is bold. This is italic. This is a link. 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

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 4

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 5

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 6

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.


Lists

This is a bullet list:

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

Here is a numbered list:

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

Miscellaneous

A horizontal rule looks like this:


To create a button link, add the "button-link" class to the link (i.e. <a class="button-link">). A button link looks like this:

Don't click me!


Applying classes to HTML elements

Sometimes to obtain a particular style, a CSS class must be added to an element's tag, for example, <a class="button-link">. How to do this?

If the class must be applied to an image: Click the image, click the Image button in the toolbar, go to the Advanced tab, and enter the class in the Stylesheet Classes box.

If the class must be applied to a link: Click in the link, click the Link button in the toolbar, go to the Advanced tab, and enter the class in the Stylesheet Classes box.

For all other elements: (or if you prefer code) You must enter the class directly into the HTML source code. Either click the Source button in the toolbar, or click "Switch to plain text editor" below the WYSIWYG. If the element does not already have a class attribute, you must add it; if it already has another class, add the new class, separated from the existing classes by a space.


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. Underlining will be done automatically where needed.
  • 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.
  • Use the Omega button to insert special characters (such as em dash).
  • After making significant changes, check your page on recent versions of Firefox, Chrome, and Safari. 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 12 megabytes on uploaded files. Larger files need to be hosted elsewhere (such as in your web.mit.edu locker).
  • Likewise, the Drupal Cloud limits images uploaded through IMCE to at most 1200 pixels in either dimension. Larger images need to be uploaded into the Large Images page.

 



Content (page) types used on this site

You can create more of these:

Award – A single award. Awards appear both in the list on the Awards page and on their own individual pages. An Award contains the award name and categories, a thumbnail image for the list, and all information shown on the award's individual page. Create more as needed.

Gallery – A photo gallery for one Awards Convocation. Galleries appear in the list on the Photos page; individual pages exist but are not intended to be viewed by site visitors. A Gallery contains the gallery name, date, thumbnail image, Flickr embed code, and link to Flickr album page. Create one per year.

Only one of each of these exists - edit as needed:

Home Page – The site home page. Contains the photo(s) and all text fields.

Awards Page – Introduction for the Awards list. See the special instructions for editing this text in the next section. Note that due to the filters and paging of the awards list, the Awards page itself is a Views page display, not a page corresponding to the Awards Page content type.

Recipients Page – Page listing current year's recipients. Update annually.

Photos Page – Contains a field for the Photos page introduction, which is currently left empty. The current and past galleries are added to the Photos page as Views block displays.

Nominate Page – Page to display nomination instructions and links to nomination forms. Contains all text fields.

Other content types:

Basic Page – A simple page with a single text field. Used for this Style Samples page and for 403/404 error pages.

There are also a few Drupal Cloud built-in types which are marked "UNUSED" and can be ignored.



Maintenance tasks

Log in:

To log into the site, bookmark either of these links:

 

Add a new site editor:

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

Or use a more streamlined approach:

  1. People > Add user
  2. Set up as follows:
    Username: xyz@mit.edu [use their entire email address]
    Email: xyz@mit.edu
    Password: [enter a long random password - see below]
    Check "editor" or "content manager".
    Click "Create new account".
  3. Add user to whitelist:
    Configuration > People > Shibboleth settings > Whitelist
    Add new user's kerberos id to the list.

Since users should log in via Touchstone, not their password, it's a good idea to set a long, unguessable password. For example, visit the GRC password generator and copy out a string of about 20 random printable ASCII characters. Users don't need to be told their password, since they will never use it.

 

Remove an editor:

  1. People > List
  2. Check the box next to the user's name.
  3. Under Update options, select "Block the selected users."
  4. Click Update.

This will prevent the user from logging in. You can also delete (cancel) a user, but it's best not to delete an editor who has created content unless you first reassign all content created by that user to another editor.

 

Edit a page/award/gallery:

These instructions apply to most page types. See exceptions below.

  1. Either:
    • Go to the page, then click the Edit button above the content.
    • If the page is visible in a view, click the Edit button next to the item.
    • Content > Content to view the content list, then click Edit next to the title of the page you want to edit.
    • Quick Admin Links > List all content to view the content list, then click Edit next to the title of the page you want to edit.
  2. Read the instructions at the top of the form, and instructions near each field, for further guidance.

Exceptions:

  • The main Awards page is a view and is not directly editable. To edit the introduction on the main Awards page, go to the content list and edit the page titled "Awards Introduction." This link works at the time of writing.

 

Add a new Award:

  1. Either:
  2. Read the instructions at the top of the form, and instructions near each field, for further guidance.

Tip: Open the site in two browser tabs. In one tab, edit an existing award, to use as a guide for creating the new award.

 

Add a new Gallery:

  1. Either:
  2. Read the instructions at the top of the form, and instructions near each field, for further guidance.

Tip: Open the site in two browser tabs. In one tab, edit an existing gallery, to use as a guide for creating the new gallery.

 

Enable/disable and edit the Alert block:

The Alert block contains the message that appears in the red band across the very top of the screen.

To edit the Alert block:

  1. Either:
  2. Edit the text in the Block Body field.
  3. Click Save Block.

To disable the Alert block:

  1. Go to the block edit screen as described above.
  2. Under Region Settings, set the region for the MIT Adaptive Theme to "None."
  3. Click Save Block.

To enable the Alert block:

  1. Go to the block edit screen as described above.
  2. Under Region Settings, set the region for the MIT Adaptive Theme to "Top Panel First."
  3. Click Save Block.