To edit content on a page, first log in to the site and navigate to the page. Once on the page, click on the dark gray tab labeled “edit” on the right side of the browser window. This will open up the page in edit mode which will look like a form with multiple fields. The number and type of fields will vary depending on the type of content being edited (event, staff profile, post, program/service subpage etc…).

The content of a page will be found within the “Body” field (figure 4). At the top of the “Body” field are three rows of buttons providing various options for editing the content. The most frequently used ones are described below. All icons discussed below are indicated on figure 4.

1. Numbered List

   To create a numbered list, select the text first and then click on the numbered list icon. Alternatively, click on the numbered list icon to begin creating a numbered list. To change the numbering style (decimal, roman, alphabet) right-click anywhere on the list and select Numbered List Properties. On the pop-up window, select numbering style under Type. To start the list at a specific value input the value under Start. Click OK when done.

2. Bulleted List

   Similar to #1 above, but will create a bulleted list. The style of bulleted lists can be modified just like numbered lists via the steps given above in #1.

3. Quote

   A block of text can be turned into a quote which has a special formatting and style. To create a quote, select the text and click on the quote icon. Alternatively, click on the quote icon and type in the text.

4. Image

   Images can be inserted anywhere on a page. Before doing so, image files must first be uploaded to the file system. Refer to the documentation titled “Drupal 7 Website File System” for steps on uploading images to the file system.

   To add an image to a page, first click on the image icon. On the pop-up window, click on Browse Server to open the file browser. Use the left pane of the browser window to navigate to the location of the image and then select the image to be added by double-clicking on it on the right pane. Back on the pop-up window, the URL field should now contain the path for the selected image.  NOTE: Check to make sure that the width of the image shown under Width is not larger than the width of the page, 825 px.  In such cases, input a percentage value for Width and leave Height blank. Doing so will ensure that the image stays within the page, maintains its aspect ratio and automatically adjusts when the browser is resized. Click OK to complete inserting the image. The image should now be visible inside the “Body” field.

   To replace an existing image, simply double-click on the image to open the pop-up window. Follow the steps above to select the replacement image.

5. Table

   To insert a table, first click on the table icon. This will open a pop-up window containing table properties. Specify number of rows and columns. Select the type of header if necessary. For a table with no borders, set Border Size to 0. A table has a default width of 500 px. Change this to a percentage value to create a table that will adjust automatically when the browser is resized. When done setting the properties, click OK. The table is now ready to be filled with text.

   To modify an existing table, right-click anywhere on the table. On the pop-up window, select Row, Column or Cell to make modifications (add/delete rows etc…) to any of the three properties. Select Delete Table to delete the table altogether. Select Table Properties to open the pop-up window described above and modify the table (headers, border size, etc…).

6. Iframe (video)

   Video can be added to a page in one of two ways: using a YouTube link or using a video file which must first be uploaded to the file system (refer to step 5 above). To add video to a page, click on the Iframe icon. In the pop-up window, under URL input either the YouTube link or, if using a file, the path to the file. Specify the width and height and click OK.

7. Text Style

   Options available for styling text (see figure 4):

   • B – Bold
   • I – Italicize
   • U – Underline
   • S – Strikethrough
   • X2 – Subscript
   • X2 – Superscript
   • Tx – Remove all text styling and revert back to default
8. Headers

   To create a header text, first select the text and then select a header size (h1 to h6) from the drop-down list. Alternatively, select a header size from the drop-down list and type in the text. Select “Normal” for default text size. On all sites, page titles use header size h1 and section headers in a page use h3 and h4.

9. Font Size

   Font size for text on a page is automatically set to a default size (16 px). In certain cases, if there is a need to create text with a font size smaller or larger than the default size, select a size from the drop-down list. For readability and styling reasons, fonts should not be smaller than 12 px or larger than 20 px.

10. Expand Editor Window

    Click on the expand editor window icon to expand the editor to full screen. Other fields of the page (including the Save button) will not be visible. Click on the icon again to get out of full screen mode.

11. Link

    Any text on a page can be turned into a link. To do so, select the text and click on the link icon. In the pop-up window, under URL, input the URL. If linking to a document or image on the file system, click on Browse Server to open the file browser and navigate to the file. Double-click on the file to select it. Back on the pop-up window, the URL field should now contain the path to the selected file. Click OK to complete.

    To create an email link, which will automatically open up an email software (Outlook) when clicked, select the text which typically would be an email address and click on the link icon. In the pop-up window, under Link Type, select E-mail from the drop-down list. Input the email address under E-mail Address. The Message Subject and Message Body fields are optional. Click OK when done.

12. Remove Link

    To remove a link and turn the text back to default, simply select the link and click on the remove link icon. The text will revert to Normal style (no underline, text color should be black).