Drupal User Manual

Table of Contents

  1. Drupal Overview
  2. Policies
    1. Social Networking
    2. Social Media
    3. GRCC and Web Identity
    4. Use of Images
  3. Drupal Concepts
    1. Content Type
    2. Roles
  4. Getting Started
    1. Training
    2. Accessing Drupal
    3. Finding Your Department Homepage
  5. WYSIWYG Toolbar
    1. Headers
    2. Bold
    3. Italics
    4. Bulleted List
    5. Numbered Bulleted List
    6. Hyperlink
    7. Unlink
    8. Tables
    9. Inline Accessibility Checker
  6. Webpage
    1. Creating a New Page
      1. Page Components
      2. Sidebar
        1. Social Media Links
        2. Pull Quote
      3. Menu Settings
        1. Provide a Menu Link
        2. Menu Link Title
        3. Description
        4. Parent Item
        5. Weight
      4. Save
    2. Editing a Page
      1. Revision Information
    3. Bio
      1. Creating a New Bio
        1. Bio Components
      2. Editing a Bio
    4. Webform
      1. Creating a Webform
      2. Downloading Submissions
      3. Downloading Submissions
    5. Helpful Resources
      1. Accessibility Tools
      2. Additional Information & Resources

    Drupal Overview

    Drupal is the web content management system (CMS) that Grand Rapids Community College uses to create, manage and publish web content. This manual is intended for use by web editors to promote grcc.edu's web content quality, consistency and accessibility as outlined by the Americans with Disabilities Act (ADA) federal guidelines. 

    If you have any questions that are not addressed in this guide, please contact the Web and Digital Strategy Department.

    Policies

    Social Networking

    As part of the GRCC Authorized User Agreement, technology may be used for social networking only to facilitate assigned work for Grand Rapids Community College and for other educational, training or research purposes. It is a violation of this Agreement to:

    • Engage in social networking using GRCC technology for any commercial or significant personal use.
    • Post information which is confidential and proprietary to the College.
    • Post material that is threatening, harassing, illegal, obscene, defamatory, slanderous or hostile toward any individual or entity.
    • Promote or advertise a commercial product or solicit business or membership or financial or other support in any business, group or organization for personal gain.

    For more information see our Acceptable User Agreement.

    Social Media

    All college/departmental presence on social media platforms should clearly note the official affiliation to the college and offer a link back to the college website (and vice versa). Only approved logos and imagery should be used to ensure clarity and consistency. The full name “Grand Rapids Community College” should be used wherever possible (as there are numerous organizations on the web that use the acronym 'GRCC' in addition to the college), however, the abbreviated GRCC brand logo can be substituted in cases where there is not enough space allotted for the full college name (such as in Facebook or Google ads).

    GRCC and Web Identity

    Though some flexibility is necessary, consistency in graphic content conveys the correct image of GRCC. To keep GRCC webpages uniform, GRCC utilizes a content management system with design standards imposed “behind the scenes” using templates that determine the design of the site. The standards imposed by the college on web content exist, not only to preserve the college’s visual identity, but also to ensure content is accessible to search engines and that it is compliant with the ADA.

    Use of Images

    In order to maintain consistency, avoid any possible copyright infringements and/or not compromise your webpages (i.e., incorrect image size), please work with the Web and Digital Strategy Department for any image requests. If you have a unique image that you would like to use, please consult with the communications team to ensure correct sizing, permissions, etc. See the sections on Banner and Sidebar Images under Page Components for additional information.

    Drupal Concepts

    Content Type

    In Drupal, webpages are created as a specific content type. Each content type contains easy-to-use fields and handles information in a consistent manner as defined by the Communications Department and Web and Digital Strategy Department.

    Department-level publications are created from three content types:

    • Bio
    • Page
    • Webform

    Roles

    A role defines what content a GRCC employee can access and edit. A role can be associated with more than one department depending on the authorization of the individual. Organizing users into roles helps administrators manage users that have the same permissions. Instead of managing the permissions for each user, they define a role and the permissions for it, and then assign users to it. Users assigned to that role have the permissions specified for that role.

    There are two non-admin user roles within Drupal. Each role is defined by what it allows individuals assigned to those roles to do.

    • Authenticated User Role – All faculty and staff have a limited access role that allows each individual to create and edit his or her bio information.
    • Editor – Can create and edit content for a specified department.

    Getting Started

    Training

    All users are required to go through training before Drupal access is granted.

    Accessing Drupal

    1. To log in to Drupal at grcc.edu/user.
    2. Enter your Campus Network Account username and password and click Log in. Your Campus Network Account login is the username and password you use when you first turn on your computer.
    3. To log out of Drupal, click Log out at the top of the screen under your username. If you do not see the Log out option, close page to exit Drupal.

    Finding Your Department Homepage

    1. To log in to Drupal at grcc.edu/user.
    2. Use the Search feature in the upper right corner of the GRCC website. When you start typing your department name, the search will auto-complete with suggestions.
    3. Click on the department name.
    4. Choose page to edit. 
    5. Select the Edit tab to begin editing.

    As you browse through your department site, you should notice that you have access to edit your pages. If you don't have access to edit a desired page, submit a WebHelp Ticket and the Web Team will review your access.

    WYSIWYG Toolbar

    WYSIWYG stands for “what you see is what you get." This acronym is used because when you use each of the tools provided by the toolbar, they appear in edit mode as they would when the document is published.

    Headers

    The header tool is used for content formatting and correct usage is necessary for ADA compliance. Assistive technologies, such as screen readers, rely on the correct usage of headers to navigate the page, without having to read through all of the text to get to the desired section of information.

    • Header 1 is automatically used for the title of your page.
    • Header 2 will be the main block of content on your page, and from there, any following headers will be used in a hierarchical order to section content within header 2.
    • Headers are never used for emphasis. Attention should be drawn to the appropriate text by using concise language and quality copy.

    Bold

    The bold tool is used sparingly for emphasis and more frequently when starting a new section under Heading 4 when the larger headings have been used preceding Heading 4.

    Italics

    Italicize text only when AP Style punctuation rules apply. For example, when citing the title of a book.

    Bulleted List

    The bulleted list tool is used as frequently as possible when listing items. When bulleting lists that are full sentences, include a period at the end of each bulleted item. When bulleting itemized lists, periods are not required.

    Numbered Bulleted List

    The numbered bulleted list tool is used for prioritized lists. The same rules apply for numbered bullet lists as unnumbered bullet lists above.

    Hyperlink

    The hyperlink tool allows you to insert or edit a hyperlink to a URL or email address. Highlight the text that you would like to be the link and click the hyperlink tool. Insert the URL that you want to link to or start typing the GRCC page name. The auto complete field will list matching content, select the page from the list and save.

    Note:

    • If you are linking to a website outside of grcc.edu, select the Open in a new window checkbox. This will open the webpage in a new window and allow users to simultaneously remain on our website.
    • The text that you link to should always be descriptive of the destination of the link. For example: Disability Support Services provides students with accommodations for testing and classroom instruction.

    Never use "click here". This language does not tell users where they will be directed.

    Unlink

    The unlink tool allows you to unlink a hyperlinked text. Highlight the text you wish to unlink and select the unlink tool.

    Tables

    The table tool is used for inserting tables. Tables can be copy and pasted into Drupal, but because there are additional ADA features to adjust once the table has been copied, it is recommended to simply create the table in Drupal, so as not to miss these requirements.

    Creating a Table

    1. Select the table tool in the WYSIWYG toolbar. The Table Properties dialog box will appear. In the Table Properties dialog box, set the desired number of Rows and Columns by entering the desired number for each.
    2. Set the headers from None to First Row. This is an ADA requirement. Selecting First Row will organize the data cells to correspond with headers and titles for screen readers and other assistive technologies. Rows should always have titles that correspond to the data in the columns below. See Editing a Table for this example.
    3. Enter data into the table beginning in Header Column 1. Pressing the Tab key cycles the cursor into the next cell for data to be entered. The published table size is set by default by the CMS.
    4. All tables are required by law to have information in the header row describing the information being presented below the header in order to be accessible by users with disabilities.

    Editing a Table

    Title of Table

    (Title of column) Header Column 1

    (Title of column) Header Column 2

    Column 1, Row 2

    Column 2, Row 2

    Column 1, Row 3

    Column 2, Row 3

    Right click on a table. A dropdown menu will appear, listing:

    • Paste
    • Cell
    • Row
    • Column
    • Delete Table
    • Table Properties
    1. The Paste command allows you to paste items from the clipboard. 

    2. The Cell option provides a submenu of options to edit the cell that is selected by right clicking on the specific cell. None of the options provided in the Cell Editing Submenu should be used as accessibility issues for those with disabilities by creating empty/blank fields in the table to accommodate the changes to the table, and by disassociating the content of the cell from a correlated Header.

      • In the Cell Properties attributes, the only thing in this dialog box that can be modified is the Cell Type. The Cell Type should only be changed if the cell is of the incorrect cell type. There should also only be one Header Row per table, and should be the entire first row of the table. If a table requires more than one Header Row, then the table needs to be split-up into multiple tables, or reconsidered as a bulleted list or descriptive paragraph.

    3. The Row option provides a submenu of options that allow you to insert and delete rows in the table.

    • The Insert Row Before option places a blank row above the selected row.
    • The Insert Row After option places a blank row below the selected row.
    • The Delete Rows option deletes the currently selected row.

    4. The Column option provides a submenu of options that allow you to insert and delete columns in the table.

    • The Insert Column Before option places a blank column to the left of the selected column.
    • The Insert Column After option places a blank column to the right of the selected column.
    • The Delete Columns option deletes the currently selected column.

    5. The Delete Table option deletes the table that is selected with the cursor.

    6. The Table Properties option, in most cases, must not be used. However, the exception to this rule is to edit the Headers.

    Inline Accessibility

    This tool checks for errors that may have been introduced to the body of the webpage. It will check for a correct use of headers, link language and any table formatting errors causing the webpage to be inaccessible.

    Webpage

    Creating a New Page

    1. Log in to Drupal at grcc.edu/user.
    2. Select Workbench>Create Content>Page.
    3. Refer to the section on Page Components for directions and requirements for populating your webpage.
    4. Once content has been added and saved, submit a WebHelp Ticket. A member of the Web Team will review for accessibility and branding.

    Page Components

    Page Name

    This refers to the name that appears at the top of the webpage.

    How to add Page Name:

    1. Type desired page name in Title field at top of the page. 

    Note:

    • This field is required.
    • For Department pages, the Name should not change.

    Body

    This field is for the text that appears in the body of your department homepage. All content should be concise, scannable and organized in a hierarchy using headers. If you’re using information that has a date (an event, for example), set an appointment reminder on your Google calendar for the date when the event will be past so you can update the page information or submit a WebHelp Ticket to have the page archived.

    How to add the Body:

    • Type desired text in Body section.
    • Use WYSIWYG toolbar to customize text, add or remove hyperlinks and insert tables.

    Banner Images

    The banner image is the photo that appears at the top of your webpage. These photos must be sourced from the Graphics and Communications department’s library of approved images on PhotoShelter. If you wish to have an image added to this collection, you can submit a WebHelp Ticket for review and approval.

    How to add a Banner Image:

    1. Selected a photo to use.
    2. submit a WebHelp Ticket including photo and name of page you wish the photo to appear.
    3. The Web and Digital Strategy team will review and update the banner image making sure the photo is not in violation of any ADA guideline.

    Requirements and Notes on Use:

    • Banners cannot include text of any kind, as this is a violation of the ADA and is not accessible. This includes, but is not limited to logos, titles, dates and other information.
    • The photos must all meet the specific guidelines for all other images that Graphics and Communications have set for collateral and web materials as posted in the Design and Identity Center.
    • Not all photos that are approved for our image library will work for the banner images. Due to the wide aspect ratio, there will be specific situations where we will not be able to use certain images. We will do our best to find a suitable alternative.

    Video

    All videos uploaded to grcc.edu must have closed captioning and copyright permissions if the video has not been produced by GRCC Media Services.

    How to add a Video:

    • To embed a video to your homepage, locate the YOUTUBE VIDEO section and enter the URL. Multiple videos can be uploaded by selecting Add another item.
    • To add a video as a hyperlink, please refer to the hyperlink section under WYSIWYG toolbar. 

    How to remove a Video:

    • For embedded videos, locate the YOUTUBE VIDEO section and delete the URL.
    • For hyperlinked videos, selected hyperlinked text in body, use the unlink tool or delete text, if desired.

    Contact Information

    This information will appear on the bottom of the left-hand sidebar on the department page, as well as all of the subsequent pages within your department.

    How to add Contact Information:

    1. Type email address in Email field.
    2. Type phone number in Telephone field.
    3. Type fax number in Telephone Fax field.
    4. Add Facebook link to Facebook field, if desired.
    5. Add Twitter link to Twitter field, if desired.
    6. Type department office hours. Multiple lines are available if your hours differ from day to day. The “Add another item” button will add another office hours field.

      Office Hours

      Monday – Wednesday: 8 a.m. – 1 p.m.

      Thursday – Friday: 8 a.m. – 3 p.m.

    Note

    • This information can only be edited on your department main page.
    • Office numbers and locations are never abbreviated.
    • All phone numbers appear with area code in parentheses, per GRCC’s Editorial Style Guide: (616) 234-4000.
    • Department office hours should mirror the formatting displayed in the "Bio" section.

    Sidebar

    Sidebar Image

    The sidebar image is the photo that appears at the right side of your webpage. These photos must be sourced from the Graphics and Communications department’s library of approved images. If you wish to have an image added to this collection, you can submit a WebHelp Ticket for review and approval.

    Pull Quote

    The pull quote body is intended to be populated with information such as deadlines, event promotion and information, or a testimonial. The pull quote title should be a brief description of the information.

    How to add a Pull Quote:

    1. Type the title of your pull quote in the Pull Quote Title field.
    2. Type text in Pullquote field.

    Menu Settings

    Important: For all department homepages, the Menu Settings should not change.

    Provide a menu link

    There will never be a circumstance in which you should uncheck the Provide a menu link box for any webpage. If you have unchecked that box by accident, your changes will not save.

    Menu link title

    The Menu link title is the page name that appears in the left-hand sidebar of the webpage.

    Description

    The description is text that will appear when the user’s cursor is hovering over the menu link title in the left-hand sidebar. It is not necessary that this field be populated. A concise menu link title should tell users what information can be found on the page.

    Parent Item

    The Parent item is the department or page that the webpage is organized within. By selecting the department webpage as the parent item, your webpage will appear as a tab in the left hand sidebar on that department page. If you would like to select a parent page within a department that is not the department homepage, your webpage will appear below that webpage as a “child page” and will be seen by users when its parent webpage is selected.

    How to assign a Parent item:

    1. Scroll through dropdown menu items.
    2. Select the department or page you would like the page to appear under.

    Weight

    Weight refers to placement on the left-hand sidebar. The higher the number is, the “heavier.” Higher numbers appear lower on the list. If all pages have a weight of 0, webpages will arrange alphabetically.

    Save

    It is important to save your changes. When creating a new page, the page will save in draft mode. Once you have completed the new page content, please submit a WebHelp Ticket for review, accessibility check and publication. 

    Editing a Page

    1. Log in to Drupal at grcc.edu/user.
    2. Navigate to your department website. Refer to the Finding Your Department Homepage section of this manual for more details and directions.
    3. Select page to edit.
    4. Choose Edit tab.
    5. Make changes.
    6. Click Save button.

    Bio

    Creating a New Bio

    1. Log in to Drupal at grcc.edu/user.
    2. Select Workbench>Create Content> Bio 
    3. Refer to the section on Page Components for directions and requirements for populating your bio.
    4. Once content has been added, click Save button.

    Bio Components

    1. Fill in the fields for:

    • First Name 
    • Last Name
    • Academic Title, if desired. (Academic Title refers to your degree standing: i.e. PhD., MSW, MD)
    • Office Email
    • Phone
    • Office Location with room number

    2. Office Hours: Enter days and hours as formatted below. You can select “Add another item” if hours vary by day.

    Office Hours

    Monday – Wednesday: 8 a.m. – 1 p.m.

    Thursday – Friday: 8 a.m. – 3 p.m.

    3. Photo: Upload a photo of yourself.

    How to Upload Photo:

    1. Choose photo you would like to use.
    2. Save photo to your desktop.
    3. Click Choose File button on Bio page under Photo section.
    4. Double click on desired photo.
    5. Add required alternative text, your first and last name, in the Alternative Text field.

    Alternative text is required for all images by federal ADA guidelines and GRCC’s web content policy.

    4.  Body: Fill in this portion if you would like to include information relevant to your career and general interests. Specific uses of the toolbar are discussed in the section WYSIWYG Toolbar.

    5. Videos: Refer to the “Video” section under Page Components for directions and requirements.

    6. Fill in:

    • Job Title
    • Department
    • Department Position 

    *Populating these fields is necessary to link you to your department webpage as well as the staff directory.

    7. The Pull Quote Title should remain unpopulated for bios; they are reserved for department webpages. Information on these fields is available in the Pull Quote sections under Editing the Sidebar of this user manual.

    8. Documents and Links should remain unpopulated for bios; they are reserved for department webpages. Refer to the Documents and Links sections under Page Components of this user manual for more information.

    9. Any links to professional Facebook, Twitter, or RSS Blogs are welcome.

    10. Save bio.

    Editing a Bio

    1. Log in to Drupal at grcc.edu/user.
    2. Navigate to your department website, select Faculty & Staff. Refer to the Finding Your Department Homepage section of this manual for more details and directions.
    3. Click on your bio.
    4. Select Edit.
    5. Make updates.
    6. Save bio.

    All bios should be revised at least once per semester to update office hours and locations as necessary.

    If you work for more than one department, you will need to create a bio for each department. When you move to a different department, you will have to remove your bio from that department.

    Webform

    A webform is a form or survey in which is secure, accessible and customizable. Submissions can be sent via email or results can be exported into Excel or other spreadsheet applications. 

    Creating a Webform

    If you wish to have a webform created, please submit a WebHelp Ticket.

    Reviewing Submissions

    Submissions can be reviewed by viewing the customized emails sent to the designated person or department or by viewing the submissions tab on the webform page.

    How to view submissions on webform page:

    1. Log in to Drupal at grcc.edu/user.
    2. Navigate to webform page. Refer to the Finding Your Department Homepage section of this manual for more details and directions.
    3. Choose Results tab.

    Downloading Submissions

    1. Log in to Drupal at grcc.edu/user.
    2. Navigate to webform page. Refer to the Finding Your Department Homepage section of this manual for more details and directions.
    3. Choose Results tab.
    4. Select Download button at top of page.
    5. No need to change options (unless you want to).
    6. Click Download button at the bottom of the page.
    7. Excel will open automatically with a list of your results.

    Note: If saving your spreadsheet, make sure to choose Excel Workbook as file type.

    Helpful Resources

    If you have a question or request, do not hesitate to contact the Web and Digital Strategy Department at WebTeam@grcc.edu, or by calling (616) 234-2550. You may also submit a WebHelp Ticket.

    Accessibility Tools

    Additional Information & Resources