Drupal Quick-Reference Guide

Welcome to the next phase of the Drupal Quick Reference Guide. As you are already aware, there are a great deal of changes to the template. We believe these changes will streamline Extension websites, giving a cohesive look, and simplifying the overall structure for Extension employees tasked with management of their county/AES websites.

0.0 Your Browser

When updating your site, we recommend using Mozilla Firefox as your primary Internet browser, due to compatibility issues between various browsers.

However, Firefox 10 is incompatible with the Nolij application, if you use Nolij please use Firefox version 9 or earlier, if you have questions or want help with setting this up, please contact CN Support.

1.0 Getting Started

1.1 Sign up for an ONID account

1.2 Logging in to your website

2.0 Pages

2.1 Create a new page

2.2 Find an existing page

3.0 Links

3.1 Create an internal or external website link 

3.2 Create a link to a file

3.3 Edit an existing link

3.4 Remove an existing link

4.0 ImagesImage layout in new Drupal theme.

Within the new Drupal theme, images are restricted to the right side of the content section of your page. This new look keeps images uniformly positioned on each page and streamlines the look of the websites, increasing the ease with which visitors can access information from our Extension/AES websites. Several images can be uploaded, but all will be aligned to the right side of the page. An example of the what your page may look like with images is shown at your right.

Need a photo, see photography options.

4.1 Add an image to a page

4.2 Edit an image on a page

4.3 Create a revolving slideshow and photo gallery

5.0 Videos

5.1 Upload a video from OSU's MediaSpace

5.2 Upload a video from YouTube

5.3 Upload a video from Vimeo

6.0 Menus

6.1 Edit the sidebar menu

7.0 Tables

7.1 Create a table

7.2 Edit a table

8.0 Announcements

8.1 Add an announcement

9.0 Social Media

9.1 Add social networking pages

9.2 Create a business Facebook page (external link)

10.0 Calendars

10.1 OSU Calendar integration in new Drupal theme

11.0 Webforms

11.1 Create and manage webforms (external YouTube link)

 

Print This Guide

 If you would like to print the entire guide, select the "Print entire book" link below.

1.0 Getting Started

1.1 Sign up for an ONID account

1.2 Logging in to your website

Sign Up for an ONID or DINO Account

Before you can login to administer an Extension website, you must have an ONID or DINO account.  

  • ONID accounts are available for University employees and students. If you are a new University employee and have not signed up for an ONID account, visit How to Sign Up for an ONID Account.
  • DINO accounts give administrative access to non-OSU county employees, program and county volunteers, etc.  If you are a non-OSU county employee or other ineligible personnel assisting with a county website, please contact ECTU Tech Support to establish a DINO account.

Logging In

  1. Direct your web browser to the URL of your Drupal website.
  2. Scroll to the bottom of the page.  In the bottom, right hand corner there is a very small link that says login.
    Login link location.
  3. Click this link. Enter your ONID or DINO login username and password.
  4. After successfully logging in, you will be directed back to the site’s URL.
    User navigation after logging in.
  5. You should now see another sidebar menu in the lower-left corner of the page.  It will be titled User Navigation.  This menu contains many things you will need to administer and maintain your Drupal site.

2.0 Pages

2.1 Create a new page

2.2 Find an existing page

Create a New Page

  1. On your right sidebar, locate Create Content link. Directly underneath this link are several content types that can be created.  Select Page.
    Create page link in sidebar.
  2. You should now be on the Create Page screen.
  3. Enter the title of the page in the Title box.
  4. Enter your content into the Body textbox. You can copy content from another document or create new content.

    Important note on copying and pasting: When pasting content in from other pages, documents, emails, etc., always use the Paste from Word button in your WYSIWYG editor. Not doing so can result in poor formatting of pages, missing content, and more. Please see the table below for more information about using the text editor commands when creating body text.
  5. Below is a summary of the main functions of your Text Editor (also known as a WYSIWYG editor, or What You See Is What You Get)
    WYSIWYG text editor options.
    WYSIWYG text editor options.
    WYSIWYG text editor options.
  6. Images:  See the Images section for assistance.
  7. Videos:  See the Videos for assistance.
  8. Menu Settings:  Adjust the Menu Settings to place the new page in the correct location in your website.  (Follow these instructions to place the new page in your site's sidebar navigation.)
    Add an item to the menu navigation.
    1. If Menu Settings is not open by default, click on the tab to open it. This is where you will control what will appear (or not appear) in your navigation sidebar for this page.  Enter your menu link’s title in the given box (what do you want the sidebar to say to bring folks to this page?).  If you don't want it to appear in the menu, leave this text box blank.
    2. Next, select what the Parent item will be from the drop-down menu.  Choosing another page that has already been created as a parent item will designate this page as a “sub-page” of that previously created page.  This sub-page would also be known as a child page (or children of the parent page item).
    3. Weight (Optional):  You can weight your page to appear above or below other pages in that section of the menu.  Lighter weight pages (weighted less than 0) will rise above heavier weighted pages (greater than 0).  The lightest weight you can assign to a page is -50 (so it will appear at the top of the menu) and the heaviest page is (+50) which would appear at the bottom of the menu. 
  9. The following are optional settings that you can adjust on your page.  Click on each link to open that section. 
    • Authoring Information: Identifies who authored the page and includes a date/time stamp.
    • Publishing Options: The default is "Published" which means the page will be immediately available to anyone looking at the website.  Uncheck this option if this page is only a draft and you don't want it to be 'live' on your website yet.  Ignore the other two settings. Checkbox for publishing status.
    • URL Path Settings: Leave Automatic Alias checked unless you would like to designate what your URL link is.  The Automatic Alias (or automatic URL) is generated based on the webpage's title.  If you choose to define your URL manually, do not use capital letters or punctuation other than dashes (-), underscores (_), and in some cases forward slashes (/) in your URL.  Keep it short and simple.  You can edit this at any time in your Edit tab, but remember that changing the URL can also breaks direct links from elsewhere.URL alias options.

After you have finished, be sure to click Save at the bottom of the page.  This will publish your page. 

Find an Existing Page

  1. To view pages you have previously created, look to the User Navigation sidebar on the right.
  2. Select the View/Edit Content link under User Navigation.
  3. This will bring you to a page with orange links containing the titles of your site's webpages.
    View/Edit Content screen.
  4. In this screen you can use the drop-down menus at the top of the screen to change what pages are displayed. To view only unpublished pages, change the drop-down menu to read No. Change it to read <Any> to view all the pages in your website.
  5. To open a page for editing, click either the title of the page or the edit link to the right of the Last Updated date and time.

3.0 Links

3.1 Create an internal or external website link 

3.2 Create a link to a file

3.3 Edit an existing link

3.4 Remove an existing link

Create an Internal or External Website Link

Create a Link to an External Website

  1. To create a link from within your page, be sure you are on the Edit tab of your page.
    Edit tab on page.
  2. You will see the Body box with all of your page's content in it (or an empty Body box if this is a new page).
  3. Highlight the text you would like to use as the link. 
  4. Now select the Insert/Edit Link button.
    Insert/edit link button.
  5. This will bring up the Insert/Edit Link dialog box. 
  6. Enter the website address of the page you are linking to in the Link URL box.
    Insert/edit link dialog box popup.
  7. Click the Insert button to complete the linking process.
  8. Your linked text will turn orange, indicating you have correctly inserted a new link.

Create a Link Within Your Drupal Site (Internal Link)

With the new Drupal websites, it is quick and easy to create links within your website and there is no need to go through the external linking process.  

  1. Be sure you are on the Edit tab of your page. 
    Edit screen tab.
  2. You will see the Body box with all of your page's content in it (or an empty Body box if this is a new page).
  3. Highlight the text you would like to use as the link.
  4. Now click the Linkit button.
    Location of Linkit button and highlighted text.
  5. After clicking the Linkit button, a small dialog box will pop up.  In the Link To field, begin typing the name of the page you would like to link to.  This will populate a list of possible pages.  Click the desired page from the list.
    Linkit dialog box and populated page list.
  6. After selecting the desired page from the list, the page will be automatically inserted into the Link To box.  Finish the link insert process by clicking the insert button.
    Name of page inserted into Link To box.
  7. Your finished internal link will look the same as external links.
    Completed internal link.

Create a Link to a File

  1. To create a link from within your page, be sure you are on the Edit tab of your page.
    Edit tab.
  2. You will see the Body box with all of your page's content in it (or an empty Body box if this is a new page).
  3. When writing your link text, include what type of file will be included: PDF, Word document, Excel, PowerPoint, etc.  If the file is very large, include its file size.  For example, the link text for the 'About Offline Recordings' should look something like this: About Offline Recordings (Word doc - 4MB).
  4. Highlight the text you would like to use as the link. 
  5. Now select the Insert/Edit Link button.
  6. This will bring up the Insert/Edit Link dialog box.
    Insert/edit link icon and proper format for file links.
  7. Select the Browse button.
    Insert/edit link dialog box popup.
  8. This will bring up your File Browser. From here, you can either select an existing file on the system to link to, or you can upload a new file to link to. It will look similar to this. However, it will not look the same. Each website may or may not have their own file folders designated, and of course, if a file has never been uploaded into your system, there will not be any files to display.
    File browser dialog box popup.
  9. Either scroll the list and find the file name of the file you are looking to link to, or upload a new file to link to.
  10. To upload a new file, select the Upload button in the upper left hand corner of the File Browser.
    File browser dialog box popup, upload link emphasized.
  11. After clicking the Upload button, a drop-down menu will appear. Click the Browse button to locate the desired file on your computer. Thumbnail options are only for pictures.
    File browser dialog box popup, file upload box emphasized.
  12. Click Upload to finish the file upload process.
  13. Your file will be uploaded and will appear highlighted in the files list. Click the Insert File button to insert the path to this file into the Insert/Edit Link dialog box where you can then click Insert again to complete the link to this file.
    File browser dialog box popup, insert file button emphasized.

Edit an Existing Link

  1. Locate your desired page and be sure you are on the Edit tab.  Click on the link you wish to edit to select it. When you do this, notice that both the Insert/Edit Link button and the Unlink button darken.  Click the Insert/Edit Link button. 
    Insert/edit link and unlink icons highlighted.
  2. The Insert/Edit Link dialog box will appear, with the current link showing in the Link URL field.  If this link is to a file, then the URL to the file will show. Either manually change the URL in the Link URL box to direct to your new URL, or click the File Browser button and link to your new file.  If you are unsure of how to link to a file, please see the section on linking to files
    File browser icon and link URL emphasized.
  3. Click the Update button. 

Remove an Existing Link (Unlink)

  1. From within the Edit screen, click on the link you wish to remove.  
  2. When you do this, notice that both the Insert/Edit Link button and the button to the right of it darken. 
    Insert/edit link and unlink icons highlighted.
  3. Click the Unlink button.  
  4. If done correctly, the link text will no longer be orange, indicating that there is no longer an active link. 

4.0 Images

Image layout in new Drupal theme.Within the new Drupal theme, images are restricted to the right side of the content section of your page. This new look keeps images uniformly positioned on each page and streamlines the look of the websites, increasing the ease with which visitors can access information from our Extension/AES websites. Several images can be uploaded, but all will be aligned to the right side of the page. An example of the what your page may look like with images is shown at your right.

Need a photo, see photography options.

4.1 Add an image to a page

4.2 Edit an image on a page

4.3 Create a revolving slideshow and photo gallery

Add an Image to a Page

  1. Within the Edit screen of the page you are adding an image to, scroll to the Images section.
  2. Click the Browse button and select the image you would like to upload from your computer.
    Browse for images, browse button emphasized.
  3. After you have selected the image you would like to use on your webpage, click Upload.
    Upload images, upload button emphasized.
  4. After selecting and uploading your image, it will appear as a thumbnail next to a caption box.
    Completed image upload with thumbnail.
  5. Add your caption in the box provided. Many photos can be uploaded. Select the blue Add another item button to add more slots for pictures.
    Option to add more images.
  6. Save your page to finalize.

Edit an Image on a Page

Reorder images on a page

  1. To change the order of images on a page, ensure you are in your Edit screen. 
  2. Scroll down the page to the Images section.
  3. You will see a crosshair next to each image. Click and drag this crosshair up or down to reorder the images.  
  4. Save your page to finalize the changes. 

Edit images options; reorder images, remove images, and add more images.

Remove an image on a page

  1. To remove an image on a page, enter your Edit screen on the desired webpage.  
  2. Scroll down to the Images section and locate the image you wish to remove from the list.
  3. Click the remove button directly underneath the image's caption.
  4. Save your page to finalize the removal process.

Change an image on a page

  1. To change an image on a page, follow the steps from the Remove an Image section above.
  2. Next, follow the instructions from the Add an Image to a Page section to upload a new image in its place
  3. Save your page to finalize the changes.  

Create a Revolving Slideshow and Photo Gallery

The "Gallery" content type lets you set up a photo gallery and slideshow. To setup a revolving slideshow, a photo gallery must first be created. Multiple photo galleries can be established.

To include a link to these albums in your sidebar, please see Edit the Sidebar Menu.

  1. Click Create Content in your left hand sidebar.
  2. Select Gallery.
    Create content screen with the gallery link emphasized.
  3. Name your photo gallery in the Title field.
    Create gallery page with title field emphasized.
  4. Now, you can begin to upload the photos that will be a part of your new photo gallery page and/or slideshow. If you are unfamiliar with how to upload images, please see how to Add an Image to a Page.
    List of images in the photo gallery.
    • You can reorder these pictures after they are uploaded by using the crosshair on the left of the image. Drag it up or down to the location you would like it to be.
  5. To add this gallery to a page as a slideshow, under the Page to include slideshow drop-down menu, choose which page you would like the slideshow to appear.
    Drop-down menu to select page for slideshow.
  6. Save your page to finalize the changes. Your slideshow will have an Edit Slideshow link above it when you are logged into the system, which makes editing the slideshow very easy and convenient.
    Completed slideshow location.

5.0 Videos

5.1 Upload a video from OSU's MediaSpace

Upload a Video from YouTube

  1. To insert a video onto your page, you must first upload the video to YouTube
  2. Copy the URL of the video.
    URL for YouTube video.
  3. Open the page on your Drupal site where you would like the video to appear and enter the Edit screen.
  4. Paste copied URL into Videos section of Edit page, which is located just under the Images section. 
    Add video URL field.
  5. Enter a title for your video in the field above the video's URL (see image above).
  6. Save your page to finalize the changes.
  7. Your completed YouTube video upload will align to the right side of the page, directly underneath any images added to the page.
    Completed video upload.
  8. When a visitor clicks the video, a box pops up within the page to watch the video.
    Final YouTube upload.

Upload a Video from OSU's MediaSpace

  1. Begin by uploading your video to MediaSpace, or choosing an existing video.  
  2. Select the desired video and click the Sharing tab.
    Sharing tab for MediaSpace videos.
  3. You will now copy the Link to this video field of the video found in the Sharing tab.
    Embed code location for MediaSpace videos.
  4. Open the page on your Drupal site where you would like the video to appear and enter the Edit screen.
  5. Scroll down to the Videos section.
  6. Paste the MediaSpace video's URL into the second field of the videos section.
    Embed code field and video title field on Extension site.
  7. Enter a title for your video in the field above the video's URL (see image above).
  8. Save your page to finalize the changes.
  9. Your completed MediaSpace video upload will align to the right side of the page, directly underneath any images added to the page.  
    Competed video upload and location.
  10. When a visitor clicks the video, a box pops up within the page to watch the video. 
    Final MediaSpace video upload screen.

Upload a Video from Vimeo

  1. Begin by uploading your video to Vimeo, or choosing an existing video.  
  2. Copy the URL of the video.
    Copy the URL of the video.
  3. Open the page on your Drupal site where you would like the video to appear and enter the Edit screen.
  4. Scroll down to the Videos section.
  5. Paste the Vimeo video's URL into the first field of the videos section.
    Location to paste copied Vimeo embed code and title field for videos.
  6. Enter a title for your video in the field above the video's URL (see image above).
  7. Save your page to finalize the changes.
  8. Your completed Vimeo video upload will align to the right side of the page, directly underneath any images added to the page.
    Completed video upload.

6.0 Menus

6.1 Edit the sidebar menu

Edit the Sidebar Menu

  1. Be sure you are on the Edit tab of the page you want to add to the sidebar menu.
  2. Click the Menu Settings link to expand it.   
    Menu settings options.
  3. In the Menu Link Title field, type in a title.  (This title will appear in the sidebar and it can be the same as the page name or something different.)
  4. Next, select what the Parent item will be from the drop-down menu.  Selecting Site Sections will present the page as a main sidebar item.  Choosing another page that has already been created as a parent item will designate this page as a “sub-page” of that previously created page.  This sub-page would also be known as a child page (or children of the parent page item).
    Sidebar menu options.
  5. Weight (Optional):  You can weight your page to appear above or below other pages in that section of the menu.  Lighter weight pages (weighted less than 0) will rise above heavier weighted pages (greater than 0).  The lightest weight you can assign to a page is -50 (so it will appear at the top of the menu) and the heaviest page is (+50) which would appear at the bottom of the menu.
  6. Click the Save button at the bottom of the page.
  7. Your completed sidebar menu addition will look something like the image below.
    Completed sidebar menu addition.
  • Note: Menu links will not appear on the sidebar if the content is 'unpublished'.

7.0 Tables

7.1 Create a table

7.2 Edit a table

Create a Table

  1. In the Edit page, place your cursor in the Body area in the location you want the table to appear.  Click the Insert Table button. Keep at least one blank line above where the table will be placed.
    WYSIWYG editor "insert table" button.
  2. The Insert/Modify Table dialog box opens. 
    Insert/modify table dialog box popup.
    • Cols/Rows - Enter the number of columns and number of rows that you want in the table. 
    • Cellpadding (Optional) - adjust the space between the text and the borders of the cells;  (Often set between 5 and 8)    
    • Cellspacing (Optional) - adjust the extra space between cells in the table;  (0 = no extra space between table cells)   
    • Alignment - Change how the table aligns on the page. The default is left alignment.    
    • Border - Indicate how much border you want around the cells in the table (set to at least 1 for ease in creating the table.  Can be sent to zero later to eliminate borders.)    
    • Width - Enter a percentage of the width of the page that you want the table to use.  (i.e. 100% = the table fills the entire width of the page.)    
    • Ignore height, class and table caption. 
  3. Click Update. 
  4. You can now enter text or images into the table cells, as desired.

Edit a Table

Edit a Table

  1. Select your table by clicking in it.
  2. The following commands are available once you select your table.
    WYSIWYG table commands. 
  3. Change overall Table Properties by clicking on the Insert New Table button.  The Insert/Edit Table dialog box will open.
    WYSIWYG table command functions.
    1. On the General Tab, you can change any of the original table settings
    2. On the Advanced Tab, you can change the border color and/or background color of your table.  

Remove a Table

  1. Tables can only be removed by deleting them from within the HTML code on a page.  Instructions follow -- however -- if you are not comfortable with deleting sections of code, please contact your webmaster for help removing it.
  2. Display the HTML code by clicking the Disable rich-text link below the Body text box.
  3. Locate the <table> and </table> codes.  Select and delete the <table> tag and all the code and text, through the next </table> tag. Each table starts and ends with these tags, so if you have multiple tables on one page, be especially careful.
  4. Save your page to finalize your changes.

8.0 Announcements

8.1 Add an announcement

Add Announcement

  1. To create an announcement, click Site Announcement on your right sidebar, which falls underneath the Create Content header.  
    User navigation menu with "Site Announcement" emphasized.
  2. On the Create Site Announcement page, begin with entering the Title of your announcement in the first text field.
    Create site announcement title field.
  3. Next, specify the dates you would like your announcement to run on your website.  Enter the date in the correct format of MM/DD/YYYY.  
    Create site announcement date field.
  4. Enter a short teaser. The Teaser is an important part of your Announcements section as this summary is what encourages visitors to view your announcement. It displays on the announcement listing only and not in the announcement itself.
    Create site announcement "teaser" field.
  5. The bulk of your announcement's content will go in the Body text box.
    Body box for announcement content.
  6. Finally, you must designate a page where you would like your announcement posted.  Directly underneath the Body box is the Display on page drop-down menu.  This drop-down lists the pages on your website.  Choose the desired page from the list.
    Drop-down menu to select page announcement will appear on.
  7. If you would like the announcement to post to your home page as well as the selected page from above (if different), click the Promoted to front page checkbox.  
    Publishing options checkboxes.
  8. Save the page to finalize your changes.  

Display of Announcements

  1. The announcement's title/link and teaser display on the page you designated for it to be listed on in steps 6 and 7, above.  Announcements are listed below revolving slideshows and above images and videos.  The images below show the placement of an announcement in two different scenarios.

    A) If images and videos are present, announcements display above the images and videos.
    Completed announcement and location, above images and videos.

    B) 
    If a revolving slideshow is present, announcements display underneath the slideshow. 
    Completed announcement and location, below slideshow.
  2. By clicking the orange "Test Announcement" link in the examples above, the user is taken to the complete announcement listing, which can include images and links, if needed.  A basic example of a completed announcement is pictured below.
    Completed announcement displayed in full.

9.0 Social Media

9.1 Add social networking pages

9.2 Create a business Facebook page (external link)

Add Social Networking Pages

The new Extension website theme includes a prominent sidebar area designated for social networking services, such as Facebook, Twitter, YouTube, Flickr, Wordpress, and Vimeo.

Display of social media accounts on homepage.  

  1. To add a social media account to your website, click Social Media Link on your right sidebar, which falls underneath the Create Content header.
    User navigation link for creating social media links.
  2. On the Create Social Media Link page, enter your Link Title.
    Social media link title field.
  3. Next, enter the URL of the social media page (such as the link to your county's Facebook or YouTube page).
    Social media URL field.
  4. The drop-down menu directly below the URL allows you to select which social media account you are adding to your website.  Be sure to select the right social media site, as it is what designates the icon next to the link on your homepage.  
    Social media account selection drop-down menu.
  5. Save the page to finalize your changes.

10.0 Calendars

10.1 OSU Calendar integration in new Drupal theme

OSU Calendar Integration in New Drupal Theme

Extension websites will continue to utilize the OSU calendar system. To obtain an OSU calendar, please visit http://drupalstage.cws.oregonstate.edu/cws/calendar/calendar-request. Once setup, the events you enter into your OSU Calendar will automatically feed into your Drupal website.

Support for OSU Calendars will also continue to be handled by Central Web Services. CWS's various support resources are available here: http://drupalstage.cws.oregonstate.edu/cws/calendar

Maintenance of calendars will be largely the same as it has been with the past Drupal theme, but the new theme has a much improved appearance. The calendar is a static element and, for consistency among Extension websites, cannot be moved to a different position on your website.

List of OSU Calendar events as it appears in the new Drupal theme.

Clicking the view more events link, directs you to a list of the events on the OSU calendar website. 

View more events link.

OSU Calendar display.