Get Started Learning Drupal 7 Site Building Open Outreach by Nicholas Roberts is licensed under a Creative Commons AttributionNonCommercial-ShareAlike

3.0 Unported License.

Get Started Learning Drupal 7 SiteBuilding With Open Outreach

Author: Nicholas Roberts Date: 2 January, 2012 Website: www.OpenSourceCollege.org Email: info@OpenSourceCollege.org

Get Started Learning Drupal 7 Site Building Open Outreach 1 Reset Password, Request New Password 1.1 Change Admin Profile * 1.2 Upload User Image 1.3 View Profile 1.4 My Follow Links 1.5 Author Bio 1.6 View Updated Author Bio 1.7 Add Content 1.7.1 Add Content 1.7.2 Create Article 1.7.2 Add Article Image 1.7.3 Preview Article 1.7.4 View Article 1.7.5 Homepage 1.8 Appearance 1.8.1 Granada Settings 1.8.2 Granada Settings Logo & Background Image 1.8.3 Granada Settings Colors 1.8.4 Granada Settings Updated 1.8.5 View Granada Theme Updated 1.9 Events 1.9.1 Create Event 1.9.2 View Event 1.9.3 View Event Calender 1.9.4 Links 1.9.5 Create Link 1.9.5 View Link 1.9.6 View Links 1.9.7 View Multimedia 1.9.8 Add Highlighted 1.9.9 Homepage 1.10 Configuration 1.10.1 Site Information * 1.10.2 Account Settings 1.10.2 Comment Notify 1.11 People 1.11 Add People 1.12 Content Management 1.12.1 Content Filter By Published 1.13 Dashboard 1.14 Modules 1.14.1 Enable Module Module Filter 1.14.2 Filter Modules by "Admin"

Background
This guide is written for an online education short-course run by Merritt College.

0. How to Use this Guide

1. Your website IS NOT www.OpenSourceCollege.org and so the links in this document WILL NOT work for you ! 2. You can also copy and paste the relative path i.e. /user/register into the location bar in your browser 3. You will need to update your website address; YOURUSERNAME.dev.lab.opensourcecollege.org

GET STARTED 1 Reset Password, Request New Password

1. You will receive an email with a one-time link that you click and then your browser will be taken to a Reset Password Login 2. You can only use this login once ! 3. If you need to get a password reminder go to http://opensourcecollege.org/user/ password 4. To create a new user http://opensourcecollege.org/user/register

1.1 Change Admin Profile

1. After login you will see the User profile edit page http://opensourcecollege.org/user/1/edit 2. Change the Username field from admin 3. Change the Password field, repeat the password NOTE: Make a strong password using the tips provided next to the field 4. Select the check-boxes for ALL the Roles; editor, blogger, contributor, administrator, authenticated user 5. Upload a picture, use the check-box to Delete picture if you want to change it 6. In Administrative Overlay de-select Use the overlay for administrative pages 7. Change the Locale Settings to your specific locale

1.2 Upload User Image

After selecting the All Roles and Uploading a Picture you will get something like this below

1.3 View Profile

1. Select the View tab in the User profile page and visit the profile http:// opensourcecollege.org/users/niccolox

1.4 My Follow Links

1. Click the My Follow Links http://opensourcecollege.org/user/1/follow 2. Update the fields with links to profiles of social media sites such as Facebook, Vimeo, YouTube 3. Click submit 4. You can check the links

1.5 Author Bio

1. Visit the Edit http://opensourcecollege.org/user/1/edit and click the Author Bio sub-tab 2. Update the First Name, Last Name and Bio

1.6 View Updated Author Bio

1. View the user profile to check the changes http://opensourcecollege.org/users/niccolox 2. Go back to edit if you want to make more changes

1.7 Add Content

1. Click the Add Content on the Content shortcuts on the profile page

1.7.1 Add Content

1. Visit http://opensourcecollege.org/node/add 2. On the Add Content page you have a choice of Content Types to choose

1.7.2 Create Article

1. Create Article http://opensourcecollege.org/node/ add/article 2. Add Title 3. Select Image 4. Add tags with commas 5. Add Body text, use the formatting options such as bold, italic, underline, bullets, numbering etc

6.

Insert image by clicking the images icon

RESOURCE: Watch this screencast on Articles in Open Outreach http://openoutreach.org/media/60

1.7.2 Add Article Image

1.7.3 Preview Article

1.7.4 View Article

1.7.5 Homepage
1. Visit the homepage to check the new Article content http://opensourcecollege.org/

1.8 Appearance
1. Click on the Appearance tab in the toolbar at the top of the page

2. Next we will start to change the Appearance of the website http://opensourcecollege.org/ admin/appearance 3. We will work with the Enabled Themes available. We will use the Granada theme and begin by clicking on the Settings link next to the Theme screenshot highlighted in red below

1.8.1 Granada Settings

1. Clicking on Settings will take us Granada settings http://opensourcecollege.org/admin/ appearance/settings/granada 2. On this page we can change many common theme options 3. However, at this stage, we will remain limited to using changing Images and Colors which are blue links at the bottom of the page 4. We need to click on Images and Colors and the area will expand TIP: You can watch an OpenOutreach.org Screencast on modifying appearance http:// openoutreach.org/media/61

1.8.2 Granada Settings Logo & Background Image

1. Expand the Images and Colors blue links 2. For Images a. Click on Choose File for logo b. TIP Logo Image will NOT be compressed or resized, you will need to do that in an image tool like GIMP, a logo of 70 pixels height and wide works well c. TIP: Background image needs to be large, 1600 wide is good d. TIP: Be careful not to upload images that are too large, this will slow down the site and degrade the user experience 3. For Colors a. Either change the Color Code hexadecimal value b. or, click in the color box and use the color wheel to select a new color for Header or Primary color and a secondary color 4. Click submit

1.8.3 Granada Settings Colors

1.8.4 Granada Settings Updated

1. New logos, background image and colors will be visible on Granada Settings page

1.8.5 View Granada Theme Updated

1. To view full changes to Appearance, visit homepage http://opensourcecollege.org/

1.9 Events
1. Navigate to the Events landing page http://opensourcecollege.org/event 2. Click on the Add a new events link 3. RESOURCE: Watch this screencast on Events in Open Outreach http:// openoutreach.org/media/60

1.9.1 Create Event

1. The Create Event form is at http:// opensourcecollege.org/event/add 2. Add Title 3. Add Date and Time of Event 4. Select Show End Date for an event that spans longer than one day 5. Add Tags describing the event 6. Select an Image associated with the Event 7. Add Description text like you have already in the Article

8. Format the Description text with Bold, Underline, Italics and add Hyperlinks 9. Hyperlinks can add links to other websites or webpages

1.9.2 View Event

1. View Event http://opensourcecollege.org/event/edt-801-learn-drupal-7-site-buildingcommunication-and-ecommerce-open-outreach

1.9.3 View Event Calender

1. View Event Calender http://opensourcecollege.org/event

1.9.4 Links
1. Visit the Links page http://opensourcecollege.org/link 2. Add a new link by selecting the blue link highlighted in red below

1.9.5 Create Link

1. Create a new Link http://opensourcecollege.org/link/ add 2. Add Title 3. Add Body text as in Event or Article 4. Select and Upload an Image 5. Add Link URL and Link Title

1.9.5 View Link

1. http://opensourcecollege.org/link/open-outreach

1.9.6 View Links

1. http://opensourcecollege.org/link

1.9.7 View Multimedia

1. http://opensourcecollege.org/file

1.9.8 Add Highlighted

1. Add Highlighted http://opensourcecollege.org/node/add/ highlighted 2. Add Title 3. Select Image 4. Add Kicker i.e. highlight text, two or three sentences 5. Add Link to an external URL or a page on your website

1.9.9 Homepage
1. Visit Homepage to review Highlighted content http://opensourcecollege.org

1.10 Configuration
1. Watch this screencast on Configuration in Open Outreach http://opensourcecollege.org/ admin/config 2. Click on Configuration http://opensourcecollege.org/admin/config 3. We will change Account Settings, Site Information and review Comment Notify

1.10.1 Site Information

1. First, we will change the Site Details of the Configuration by clicking on the Site Information link on the Configuration page http://opensourcecollege.org/admin/config/ system/site-information 2. Change the Site Name to a better name 3. Add a site Slogan 4. The Site Name and Slogan can be reviewed on the homepage

1.10.2 Account Settings

1. Go to Account Settings http://opensourcecollege.org/admin/config/people/accounts 2. There is no need to change any of the default settings, they work very well for most

websites, but it may be useful in the future during a later stage

1.10.2 Comment Notify

1. Go to Comment Notify http://opensourcecollege.org/admin/config/people/ comment_notify 2. Select the check-box for other Content Types; Article, Blog, Book page, Event, Highlighted, Link and Section so that you will get notification on all content

1.11 People
1. http://opensourcecollege.org/admin/people

1.11 Add People

1. http://opensourcecollege.org/admin/people/create

1.12 Content Management

1. http://opensourcecollege.org/admin/content

1.12.1 Content Filter By Published

1.13 Dashboard

1. http://opensourcecollege.org/admin/dashboard

1.14 Modules
1. http://opensourcecollege.org/admin/modules

1.14.1 Enable Module Module Filter

1.14.2 Filter Modules by "Admin"

1.14.3 Enable Backup & Migrate Modules

1. Go to Modules page http://opensourcecollege.org/admin/modules 2. Type Backup (without ) into Module filter 3. Two modules appear that you select the check-box a. Backup & Migrate b. Backup & Migrate Files 4. Select both Backup modules 5. Bottom left of page select Update button

Save Configuration

1.14.4 Enable Demonstration Site Module

1. 2. 3. 4. On Module page again http://opensourcecollege.org/admin/modules Type Demo into Module filter Select to Enable both Demonstration Site and Demonstration Site Reset modules Save Configuration

Save Configuration

1.15 Add Blog

1.16 Add Blog Menu Link

1.17 Add Blog URL Alias

1.18 Change Menu