LAS Framework - Drupal formatting toolbar

This guide will help you use the formatting toolbar to style your page.
More Drupal Tutorials

The Drupal formatting toolbar is used in many different locations when adding and editing content.  There are several sections of the toolbar.

Formatting

  • Bold - Bolds any text you have selected.  You can also use the Ctrl-B keyboard shortcut
  • Italics - Italicizes any text you have selected.  You can also use the Ctrl-I keyboard shortcut
  • Subscript and Superscript - Will move format the selected text as a super or subscript
  • Additional Characters - Clicking this gives you a window to select from a large collection of symbols that don't appear on your keyboard.

Links

  • Create Link - Select text that you would like to link to another page and then click this icon to indicate the url.  If you are linking to a page on another site, be sure that you include the http:// at the front of the URL.  To create an email link, add mailto: in front of the email address (ex. mailto:las-web@illinois.edu).
  • Remove Link - place your mouse anywhere in the linked text and click this icon to remove the link.

Structure

  • Bulleted List - This will turn all selected text into an un-numbered list.  You can select multiple rows and convert them with a single click.
  • Numbered List - This will turn all selected text into a numbered list.  You can select multiple rows and convert them with a single click.
  • Tables - Clicking this icon will prompt you for the starting size of your table.  Once the table is created, you can add or remove rows and columns with these right-click options
    • Insert Cell Before/After - Inserts a new cell to the left (before) or right (after) of the current cell.  This can cause some issues and usually you should insert an entire row or column
    • Delete Cell - Deletes the current cell
    • Merge Cells - This option is only available if you select several adjacent cells.  It will merge all the selected cells into a single cell spanning several rows or columns
    • Cell Properties - Allows you to set additional options for a cell including dimensions, alignments, and colors.
    • Insert Row Before/After - Inserts a new row above (before) or below (after) the current row.  If you have any cells that span columns in the row you selected that same structure will be copied to the new row.
    • Delete Row - Deletes the current row and shifts other cells up
    • Insert Column Before/After - Inserts a new row left (before) or right (after) of the current column.  If you have any cells that span rows in the column you selected that same structure will be copied to the new column.
    • Delete Column - Deletes the current column and shifts other columns left
    • Cell - Operations for a single Cell
    • Row - Operations for the entire current row
    • Column- Operations for the entire current column
    • Delete Table - Removes the entire table from the page.
    • Table Properties - Calls up the original dialog allowing you to change the number of rows and/or columns. To insert or delete cells, rows, and columns in an existing table, place your cursor in the table cell and right-click to bring up and additional table properties menu.

Media

Images - Clicking the image upload icon brings up the Image Media Browser
  1. Enter a name for your image (for organizational purposes only).
  2. Click "Choose File" and select the image you want to upload from your computer
  3. Enter Alternative Text. For non-sighted uses, images can be confusing.  The Alternative Text field allows you to give some descriptive text to describe the image with words.
  4. Click the "Upload Image" button
  5. A new window will open with options to format your image
    1. Display As: choose a pre-styled size for your image
    2. Alternate Text: This should bring over the text you entered in the previous window.
    3. Align: This controls how the image interacts with the rest of the content of the page.  Choosing None will leave the image in the flow of the text, but if you choose Left or Right will put the image to the left or right of the text and let the text flow around it.  The Center option will center the image on the page and put the text above and below it.
    4. Caption: Use this space for text that you would like to appear under the image
  6. Click the "Embed" button
Video - Embedding video from several hosting platforms is simple.  Follow these instructions.

 

Additional Options

  • Undo/Redo - Clicking these buttons will either undo or redo recent changes.  These will not work after you've saved the page
  • Show Blocks - This button will show you the underlying structure of your page.
  • Source - If you're more comfortable making changes in HTML, or you need to do something that the built-in functions don't allow you to, you can switch to HTML Source mode.  Be aware that not ALL HTML tags and options are accepted.  If you need additional options, contact las-web@illinois.edu.

Formatting

  • This dropdown allows you to select the formatting for the text to either be Normal (the option you'll use for the bulk of your page) or Heading 2-6.  The heading levels are a good way to organize your content.  The Heading 1 level is reserved for the page title.