Guide to Making Pages on the Shutesbury Site

Contents: Log In | Create a Page | Where Are My Pages? | Move a Page | Create Links | Upload and Link to PDFs and Other Files | Upload and Insert Images | Headings and Formatting | Making a Right-Hand Box


Log In

Use the “Web Admin Login” link at the bottom of the page, or go to shutesbury.org/user.


Create a Page

  1. In admin menu (black bar at top of screen), go to “Content management” then “Create content” then “Page.”
  2. Give the page a title.
  3. If you want the page to be listed in the top menu, open “Menu settings.”
    • Provide the name that will appear in the menu—this may be a shortened version of the page title.
    • Choose the “Parent item” from the menu items listed under <primary links>. Scroll down the list until you see the Shutesbury menu items (Home, FAQ, etc.), and choose the one that your new page should appear under.
    • Do not put the page under “Navigation.” This would list it in the admin menu.
      Screenshot
  4. Paste your text into the “Body” area, and format as you wish (see formatting tips below). You can enlarge the editing window by dragging the bottom right corner.
  5. To give the page a plain-English URL, open “URL path settings” and type a name for the page.
    • Use lowercase letters, numbers, underscores or hyphens, but no spaces or other characters.
    • Shutesbury’s convention is to use the dept. name for the first part of the URL. For example, /recycling_bulky is the URL for the Bulky Waste Day page; all the Recycling pages start with /recycling_.

      Screenshot

  6. Save.
  7. Edit the page anytime by coming back to it and clicking the “Edit” tab. Be sure to save your changes!
  8. If you make a mistake when editing, you can revert to an earlier version of the page by going to the “Revisions” tab.


Where are my pages?

To see a list of all pages, click “Site Index” at the very bottom of the page.


Move a Page

To “move” a page, just change the menu settings. In Drupal, pages don’t live in folders, so they don’t actually get moved.

Do not change a page’s URL path unless you know that nothing is linking to it. You will break links, and people’s bookmarks, if you change a page’s URL.


Create Links

Select the text that will be the link, and click the “Link” icon. Then paste in the URL or path name of the page you want to link to.

  • To link to an internal page (a page on shutesbury.org), use a slash and the path name. For example, /web_committee will link to the Web Committee page.
  • To link to an external page, paste in the complete URL, beginning with http://.
  • To link to a PDF or other file, see below.

Tip: Take advantage of your browser’s tabs. Open pages in tabs to easily switch from the page you’re copying the URL from, to the page you’re adding the link to. Holding the Ctrl key while clicking a link will open the link in a new tab.


Upload and Link to PDFs and Other Files

  1. Select the text that will be the link, and click the “Link” icon.
  2. Click the “Browse” icon. This opens the file manager.
    Screenshot
  3. Choose the correct subfolder (each dept./committee has a subfolder).
    Screenshot
  4. Once in the subfolder, upload your file. Click the “Browse button” to find the file on your computer, and click “Upload.”
    Screenshot
  5. Select the file in the list, and click “Send to TinyMCE.” This takes you back to the editor (called TinyMCE).
    Screenshot


Upload and Insert Images

  1. Place your cursor where you want the image to be, and click the “Image”  icon. (Note that if you want the image to appear to the right of the text, place the cursor at the beginning of the paragraph anyway—you will use a style later to align it to the right.)
  2. Click the “Browse” icon. This opens the file manager.
    [Uploading an image is similar to uploading a file. See screenshots above.]
  3. Choose the correct subfolder.
  4. Click the “Upload” link. Click the “Browse button” to find the file on your computer, and click the “Upload” button.
  5. Select the image file in the list, and click “Send to TinyMCE.”
  6. Enter an image description, which will be read by assistive devices for the blind.
  7. Click “Insert.”
  8. To align the image to the right or left of the text, select the image and choose the “Image align right” or “Image align left” style from the “Styles” menu. These styles will apply appropriate margins.



Headings and Formatting

  • Create a heading by selecting the text, and choosing Heading 3 from the “Format” menu. Generally, use headings 3 through 6. (Heading 2 is used for the page title, and that should be the largest heading on the page.)
  • Delete extra paragraph spaces, as they make the page longer than necessary, requiring people to scroll more.
  • To break to a new paragraph (with a space above), hit your Enter key. To break down to the next line (no space above), type Shift + Enter.
  • Don’t get fussy with formatting, as the wysiwyg editor will get buggy. Keep it simple. Use paragraphs, headings, lists, bold, italics, and lists. 
  • To align an image to the left or right (making text flow around it), select the image and choose “Image align right” or “Image align left” from the
    “Styles” menu. These styles will apply appropriate margins around the image.
  • To format a table, use the Style menu:

    Screenshot


Make a Right-Hand Box

  1. Place your cursor at the very beginning of the first heading or paragraph on the page.
  2. Click the “Table” icon.
  3. Under “Class,” choose “Table align right.”
  4. Leave “Alignment” and the other fields blank.
  5. Click “Update.”
  6. Paste your text into the table.