Drupal 7 guide Drupal is a widely used, open-source, free platform that has an easy-to-use content management system for updating websites. This guide was created by the Health Communication Core (www.healthcommcore.org) to assist our clients in updating websites developed after May 2014 with Drupal. Please don t hesitate to contact us if you have questions about or need assistance with this guide or updating your site. HCC clients who have sites developed before May 2014, or who need assistance with a site created in another platform (for example, Joomla or WordPress), can contact us: health_communication@dfci.harvard.edu. CONTENTS p. 2 Logging In Editing content, page titles, and menu names 3 Editing/adding content 3 Changing a page title 4 Editing page content 7 Changing a menu name Adding a link 7 Link to another website 9 Linking from one page to another within your website 10 Unlink Adding images/photos 11 Inserting a photo that s already uploaded 13 Adding and inserting a new photo Adding to the navigation menu 18 Adding a new menu item 19 Adding a page beneath an existing menu item c2015 Health Communication Core / Dana-Farber Cancer Institute page 1
Logging in To add or edit content on your website, you first need to log in to the Drupal content management system. It is easy and can be done in one of two ways: 1. Click the Login or Admin link at the bottom right of your website. 2. Type /user (without the quotes) at the end of your website s URL in your browser s address bar and hit enter. Either way will take you to a form where you need to enter your username and password. If you have problems logging in, please contact HCC for assistance. To help you remember, write them down here: Username Password Once you successfully log in, a black navigation bar will appear at the top of your website. This black bar will remain at the top of the page until you log out. c2015 Health Communication Core / Dana-Farber Cancer Institute page 2
Editing content, page titles, and menu names Editing/adding content To begin editing, first go to the page you want to edit on your site. Once on the page, two tabs that say View and Edit (see below) will appear above your content (below the page title). To edit the content on a page or to edit a page title, click the Edit tab. As soon as you click Edit, the screen will become an editable form (see below). Changing a page title To change a page title, click in the Title box (see below) and edit the page title. A page title is required. Important: You must hit Save at either the top (see above) or bottom of a page (see below) to save and officially deploy any change, including content, page title, and navigation name. If c2015 Health Communication Core / Dana-Farber Cancer Institute page 3
you click the Preview tab or click the X before you Save, all your edits will be lost. There is no warning message. Editing page content Go to the page you would like to edit and select the Edit tab. This area is similar to a simple text editor with three important exceptions: 1. Pressing the Enter key jumps down 2 lines instead of just one. To start a line directly below the current line, hold down Shift and press Enter. c2015 Health Communication Core / Dana-Farber Cancer Institute page 4
2. IMPORTANT! DO NOT copy and paste content directly from other applications into this content editor. To copy content from another place, copy the content then click on the Paste as plain text icon (see below) to paste the content in. 3. If you are comfortable with HTML, you can edit content as HTML by clicking on the Source button (see below). You can switch back and forth from layout to code by clicking the Source button again. Just like with your favorite word processor program, you can emphasize text by selecting it and clicking B for bold or I for italics (see below). You can also change your font, font size, font color, background color, and text alignment; however, your website s font, font size, and font color have already been assigned and will automatically appear (changing them will alter your site s intended formatting). If you would like to add sub-heads within your text (to label new sections or divide text up), select the text you would like to make a sub-head and use the Format dropdown menu (see below) to select Heading 2. c2015 Health Communication Core / Dana-Farber Cancer Institute page 5
Formatting will default to Normal, and Heading 1 is reserved for the page title (it will do this automatically). The font, font size, and color of the headers have already been assigned and will automatically appear. Tip: You can add several descending sub-heads within your content on a page, but they should go in order (i.e., Heading 1, Heading 2, Heading 3, etc.). You must hit Save at the top or bottom (see below) of the page to officially save your content edits. If you click the Preview tab or click the X before you Save, all your edits will be lost. There is no warning message. A green box will notify you when your update and save is successful (see below). c2015 Health Communication Core / Dana-Farber Cancer Institute page 6
Changing a menu name To change a page name on the menu bar, click the Edit tab. Then scroll below the content edit area of the form (see below). Below it you will see a checkbox Provide a menu link (this box will already be checked if the page is listed on your menu); below that you will see Menu link title where you can edit the menu name. Menu link title will always default to the page title, unless you manually change it. Remember to hit Save at the top or bottom of the page to make your edits live. Adding a link Link to another website To add a link, open the page you would like to add the link to. Click the Edit tab to bring you to the editable form. Either type in and highlight or highlight existing text you would like to hyperlink (make link to a website). With that text highlighted, click the icon that looks like a chain (see below). c2015 Health Communication Core / Dana-Farber Cancer Institute page 7
A dialogue box will open. Select URL from the dropdown menu under Link Type and then type in the URL where indicated (see below). Then click the tab that says Advanced. c2015 Health Communication Core / Dana-Farber Cancer Institute page 8
In the box that says Stylesheet Classes, type popup (all one word, lower case; see below), and click OK. This will cause the website you are linking to to open in a new window, so your site visitors will not leave your site when they click the link. After you select OK, you will return to the edit page and the words you selected will be a link (see below). Remember to hit Save at the top or bottom of the page to make the change live. Linking from one page to another within your website To add a link, open the page you would like to add the link to. Click the Edit tab to bring you to the editable form. Either type in and highlight or highlight the existing text you would like to hyperlink (make link to another page or website). With that text highlighted, click the icon that looks like a chain (see below). c2015 Health Communication Core / Dana-Farber Cancer Institute page 9
A dialogue box will open. Keep Internal path selected on the dropdown menu under Link Type (see below) and begin to type in the page title of the page you want to link to. As you type, matching page titles will appear in a popup box; use the down arrow on your keyboard or your mouse to select the correct page (see below). If the correct page is not appearing, please check your spelling and try again. Note: The page you are linking to must already be created to link to it. Once you select OK, you will return to the edit page and the words you selected will be a link. Remember to hit Save at the top or bottom of the page to make the change live. Unlink To unlink an existing link, select the text with the hyperlink you want to unlink, and click the icon that shows a chain with an X in front of it (see below). This will delete the link. c2015 Health Communication Core / Dana-Farber Cancer Institute page 10
Adding images/photos Inserting a photo (using one that s already uploaded) Open the page you would like the photo to appear on and click the Edit tab. Once in the editable area, put the cursor wherever you d like the photo to begin and then select the icon that looks like a little photograph (see below). A dialogue box named Image Properties will open. c2015 Health Communication Core / Dana-Farber Cancer Institute page 11
Click Browse Server (see above). Another window named File Browser will open. If the photo you would like to add is listed under File name, select the photo by clicking on its name. It will show you a preview of the photo, and the name will be highlighted in blue (see below). If this is correct, select Insert file. c2015 Health Communication Core / Dana-Farber Cancer Institute page 12
The Image Properties dialogue box will be open (see below). Enter a short description of the photo in the Alternative Text box, select the Alignment, and/or change the size of the image (width/height), and then click OK. After you select OK, your image will appear in your text (see below). Remember, to make this change live, you must hit Save at the top or bottom of the page. Adding and inserting a photo (adding a new photo) Open the page you would like the photo to appear on, and click the Edit tab. Once in the editable area, put the cursor wherever you d like the photo to begin, then select the icon that looks like a little photograph (see below). c2015 Health Communication Core / Dana-Farber Cancer Institute page 13
A dialogue box named Image Properties will open. Click Browse Server (see above). Another window named File Browser will open (see below). If your image is not listed under File name, then click the Upload button in the upper left corner. c2015 Health Communication Core / Dana-Farber Cancer Institute page 14
A file upload box will appear. Click the Choose File button, then find the image on your computer and double-click it to select. Click the Upload button in the box to add your photo. Now that the photo you would like to add is uploaded and listed under File name, select the photo by clicking on its name. It will show you a preview of the photo and the file will be highlighted in blue (see below). If the photo appears correctly, select Insert file. c2015 Health Communication Core / Dana-Farber Cancer Institute page 15
The Image Properties dialogue box will be open (see below). Enter a short description of the photo in the Alternative Text box, select the Alignment, and/or change the size of the image, and then click OK. After you click OK, your image will appear in your text. Remember, to make this change live, you must hit Save at the top or bottom of the page. c2015 Health Communication Core / Dana-Farber Cancer Institute page 16
Adding to the navigation menu Adding a new menu item Using the black bar at the top of the page, click Add content (see below). Select Basic page (see below). A new page will open an editable form (just like when you are editing content). Add Title and Body content (see below); both sections are mandatory. c2015 Health Communication Core / Dana-Farber Cancer Institute page 17
To add this page as a link to the menu, click the Provide a menu link checkbox (located below the content area of the form; see below). Once the box is selected, additional form fields appear. The page title automatically defaults to the menu name, but you may edit the menu name by changing the Menu link title (see below). You must hit Save at the top or bottom of this page to officially save your new page. If you click the Preview tab or click the X before you Save, all your edits will be lost. There is no warning message. A green box will notify you when your update and save is successful. Adding a page beneath an existing menu item Using the black bar at the top of the page, click Add content. c2015 Health Communication Core / Dana-Farber Cancer Institute page 18
Select Basic page. A new page will open an editable form (just like when you are editing content). Add Title and Body content; both sections are mandatory. To add this page as a link to the menu, click the Provide a menu link checkbox (located below the content area of the form; see below). Once the box is selected, additional form fields appear. The page title automatically defaults to the menu name, but you may edit the menu name by changing the Menu link title (see below). c2015 Health Communication Core / Dana-Farber Cancer Institute page 19
If you would like this menu item to be under a main menu, use the dropdown menu called Parent item and select the main menu item you would like this page to be under. You must hit Save at the top or bottom of this page to save your new page. If you click the Preview tab or click the X before you Save, all your edits will be lost. There is no warning message. Once complete, your new navigation item will appear as a secondary menu on the page or as a dropdown menu for the page it is connected to (how it is connected was established during the website development process). c2015 Health Communication Core / Dana-Farber Cancer Institute page 20