Carnegie Mellon University ———

CMU Web

A service provided by the University CMS Team

CMU Web  ›  How to Use the CMS  ›  Build Your Site  ›  Work with Pages  ›  Content  ›  Content WYSIWYG  ›  Sidebar

Sidebar

A sidebar is an area of content that can be added to a Content WYSIWYG. A sidebar appears alongside the main content area in desktop view, and below the main content area in mobile view (more on responsiveness).

Sidebars are super because:

  • You can put a variety of content in them including text, images, links, calendar events, and lovable yet loopy characters
  • They come in a variety of colors and styles
  • You can add multiples on a page
  • Bio Index and News Index pages have the option to feature a Jump Menu as a sidebar which provides links to different sections on the page
We understand, we love them too! It's easy to think that sidebars are like post-its for miscellaneous content. However, there is a thing as too much sidebar! Follow these best practices to ensure your sidebars aren't taking center stage.

  • Stick with 1-3 sidebars per page
  • Use sidebars to complement the information in the main content area
  • Use sidebars to draw attention to something quickly, like a deadline or a contact method
  • Avoid lengthy content in sidebars; if you have a lot to say about something, consider placing it in the main content area
  • Having color options is nice, but try to be tasteful; a rainbow of sidebars may distract from the content
  • Helpful links
  • Contact information
  • Calendar events & deadlines
  • Twitter feeds
  • Quick tips
  • A nice picture. Tip: did you know you can use any picture from CMU's Flickr account on your website? You're welcome!

Simpsons character Ralph Wiggums meme saying he's sidebar

Add a Sidebar

  1. Enable the Sidebar checkbox located beneath the content WYSIWYG
  2. Select the Type (see examples below)
  3. Select a Style (see examples below)
  4. Enter a Heading (optional)
  5. Following the steps below for the sidebar type selected
  6. Click the plus sign (+) to add another sidebar, repeat steps 2-6
Adding a sidebar.

Sidebar in the page edit interface.

Link List

A Link List is ideal for providing links to helpful resources, email addresses, and quick access to other pages.

  1. Enter Text for the link
  2. Add Link
    1. Select Choose File to link to a page or file on your site; use the Link Chooser to browse and select the page or file
    2. Select URL to link to an external site; insert the Link URL
  3. For links to an external site or to a document (e.g., PDF) enable the checkbox for Open in New Window
  4. Click the plus sign (+) to add another link, repeat steps 1-4

 

Sidebar with link list and simple style

The example above uses the Simple style which contains a white background.

Event List

An Event List is used for promoting events or highlighting deadlines. Each event listing may contain a link for additional information.

  1. Select Add Events (note: the Import RSS Feed option is not currently supported)
  2. Specify Start Date; use End Date (optional) if the event spans multiple days
  3. Insert Event Title or Description
  4. Add Link (optional) to link to a page with additional event details
    1. Select Choose File to link to a page or file on your site; use the Link Chooser to browse and select the page or file
    2. Select URL to link to an external site; insert the Link URL
  5. For links to an external site or to a document (e.g., PDF) enable the checkbox for Open in New Window
  6. Click the plus sign (+) to add another event, repeat steps 2-6
  7. To provide a link to a full calendar or events page, complete the steps for More Events Link (optional)
Sidebar with event list of important dates styled with left rule

The example above uses the Left Rule style which contains a white background and a grey vertical line at the left.

WYSIWYG

A WYSIWYG is an open content area for text, images, media, and more.

  1. Add content to the WYSIWYG
Sidebar with wysiwyg containing text and images using blue background color

The example above is styled with a blue background.