1. technology and computing
2. internet technology
3. ecommerce

DRUPAL
Manual
October 2014
Drupal Manual
For additional information regarding Drupal policies or access, contact University Communications and Marketing at
[email protected] or 330-672-2727.
© This information is provided by the divisions of Information Services and University Relations., Kent State University
and is proprietary and confidential. These materials are made available for the exclusive use of Kent State University
employees, and shall not be duplicated, published or disclosed for other purposes without written permission.
October 2014
Page 2
Table of Contents
Drupal Manual
Getting Started in Drupal
Finding Pages
Creating a Basic Page
Changing Page Layout
4
5
6
13
Basic Editing
16
Text Formatting
22
Videos
27
Adding Links
Images
Tables
19
23
28
Online Forms
30
News
40
Predesigned Blocks
52
Navigation
Profiles
Group Theme
Web Standards and Style Guide
Content Addendum: Common Mistakes
October 2014
36
46
53
54
Addendum
Page 3
Drupal Manual
Getting Started in Drupal
Web Browser Requirements
Most up-to-date Web browsers will work with Drupal. The only browser that is currently not working well
with Drupal is Internet Explorer version 8 or earlier. Otherwise, there is no specific recommendation or
requirement. You can edit on any computer with Internet access from anywhere!
Important Changes to Consider
The new content management system Kent State is using in the website redesign works differently than CommonSpot,
the current system.
•
•
A first time login is required by you, after which University Communications and Marketing (UCM) can setup
your account.
Decisions regarding navigation will be determined and preset by your group’s administrator.
Initial Login and Account Setup
The first step to getting started in Drupal is signing in!
Follow these steps to sign into Drupal with your FlashLine credentials:
1. Go to https://www.kent.edu/user.
2. Username = FlashLine User ID
For example apalmie1 is the FlashLine User ID for [email protected] (the part before @kent.edu)
3. Password = FlashLine password
4. Click the Login button.
5. As mentioned above an initial login is required so that UCM can create your account.
Logging In Day-to-Day
1. Login at www.kent.edu/user using your FlashLine credentials.
2. Go to your site url: https://www.kent.edu/site-name.
October 2014
Page 4
Finding Pages
Drupal Manual
There are two ways to find your site’s pages.
1. Go to https://www.kent.edu/admin/content
o Click Find content and search for the page by completing one or more of the fields available.
 To find pages you created, enter your FlashLine ID in the Author field.
 To find all your group’s pages, enter your group node ID number in the Group Audience field.
2. https://www.kent.edu/admin/config/search/path/list/your-site-url will show your pages alphabetically.
October 2014
Page 5
Drupal Manual
Creating a Basic Page
Creating a New Page
There are two ways to create a Basic Page.
1. Click the Basic Page link located on your homepage.
2. From your dashboard http://www.kent.edu/admin/dashboard click Add content and select Basic Page.
The basic page content options are shown on page 7. Directions for best practices for each field are provided after the
screen shot.
October 2014
Page 6
Drupal Manual
Image 1.2
See pages 8-10
for details
about each field.
October 2014
Page 7
Drupal Manual
The numbers referenced below correspond with the fields shown in Image 1.2 on page 7.
The black navigation bar at the top of the page may disappear if you navigate to a different page. This can be corrected
by adding an s to the end of http in the URL.
See Image 1.2 on page 7.
Title
Your page title, breadcrumbs, footer link and the page URL are automatically generated from your page title when you
first save your page. The URL created will be https://www.kent.edu/your-group-name/the-text-entered-in-the-titlefield-when-you-first-save-your-page. If your page has a long title, as illustrated on page 7, but you would like the URL
to be shorter you MUST enter the short title in the ‘Title’ field BEFORE the page is saved or you will have to wait until
the site is live to make the change. After the page is saved the title can be updated with the longer title while the
original URL will stay intact.
The URL may be overwritten in the Permalink field if your site is already live. NOTE: Changing the permalink before
your site is published will prevent the “_new” portion of the URL from being replaced as needed when the site is
activated to go live and will cause it to appear in search results before the site launches.
See Image 1.2 on page 7.
Permalink
Do not enter anything in this field until after your site is live. Entering a custom URL is only necessary if a specific URL
is needed for a printed publication and should only occur after your site launch.
See Image 1.2 on page 7.
Subtitle
This field is only used on news stories.
See Image 1.2 on page 7.
Content
This is where the content for the main section of your page should be added. The Basic Editing section has descriptions
of the most common editing tools used.
See Image 1.2 on page 7 and the expanded view on page 9.
Menu options
Check the Provide a menu link box to add the page to your site navigation.
October 2014
Page 8
Drupal Manual
1. Title: Enter the title that will appear in the navigation.
2. Parent: Select the page’s parent (main topic area) from the drop down list.
a. To add the page to the top navigation select the group title which is shown in <brackets>. In the
example on page 8, it would be <Training>. The page Main Nav One has <Training> as its parent.
b. To add the page to a different menu, simply select the parent page from the list. In the example above,
Main Nav One is selected as the parent of the Basic One Page, which results in it appearing in the Main
Nav One mega menu and in the left navigation.
c. To add the page to the Quick Links menu (located in the footer), select <Training Quick Links>.
3. Title Description: Enter the description to be displayed when the link is hovered over.
Here is the menu created in the example above:
See Image 1.2 on page 7.
Publishing options
Published is automatically checked.
• Keep it checked if you are in the migration phase even though your site will not go live on Kent.edu until it is
complete and your webteam representative publishes it.
• If your site is already live, uncheck the Published box before you save the page if you are not ready to publish
the page.
Create new version is normally checked by default and should be kept checked so you can revert back to an earlier
version if necessary. NOTE: Only the content on the Edit page is saved. Entering details about the changes is optional.
October 2014
Page 9
Drupal Manual
See Image 1.2 on page 7.
Authoring information
Author – will be prefilled with your FlashLine ID
Date and (military) time button will prefill when you save your page. This information is only visible online in news
stories and can be overwritten if needed.
See Image 1.2 on page 7.
Buttons – Save, Preview and Delete
• Save - You MUST select the save button before you exit the page or your work will be deleted.
• Preview - Currently not displaying correctly.
• Delete – Will become available after the page is saved. Selecting it will delete your page from your site.
See Image 1.2 on page 7.
Featured Photo
Large Billboard Feature Photo
Small Feature Photo
You have two options for which type of feature photo you want displayed on your page.
1. Large Billboard (left) expands the entire width of the page. You can add up to five images to the large option.
They will automatically rotate.
2. Small (right) appears in the upper left corner of the page above the left navigation.
To be uploaded a featured image must meet these specifications:
• Files must be less than 3 MB.
• Allowed file types: png, gif, jpg and jpeg.
• Images must be at least 1500 x 600 pixels. A larger image will provide more flexibility when cropping.
• The PhotoShop Web cropping grid (Interior Page Image Crop) shown on page 11 should be used as a guide for
what area of the image should be the focal point and what area will become semi-transparent once the image is
placed on the page with the navigation.
October 2014
Page 10
Drupal Manual
Add a new file
1. To upload a file, select Choose File.
2. Select the image by locating the image on your computer.
3. Click Upload.
4. Click either the large or small thumbnail. A cropping window will appear.
5. Drag and drop to move the preselected area to highlight the area you would like to feature. Keep in mind a
portion at the top will be behind the header with a bit of transparency on the header bar.
• To change the featured area, click the thumbnail.
• To change to a different image size, click the related thumbnail and select the area you want featured.
• If your image is larger than the required width of 1500 pixels, you can resize the crop box by dragging
the corner handles.
6. Enter Alternate text and Title.
7. To edit the Featured Photo(s) (in Edit mode) select the Featured Photo link to expand the current selections.
October 2014
Page 11
Drupal Manual
See Image 1.2 on page 7.
Feature Photo Size
Select the correct radio button. If a size is not selected the photo(s) will not appear on your page.
See Image 1.2 on page 7.
Tags
Do not enter any information here. Keywords are not used in search engine optimization anymore and meta tags can be
entered elsewhere.
See Image 1.2 on page 7.
Group Audience
Your group will be preselected.
Meta Tags (below Group Audience – not shown in the screen shot)
Not all users will have access to Meta tags. The only field you may want to add information to is the Description. Page
title is automatically generated by Drupal.
October 2014
Page 12
Drupal Manual
Changing Page Layout
Your content won’t all fit inside one rectangular text block? Not a problem! You can change the page layout:
1. Click the Change this layout button (you must be on the View tab) at the bottom of page to select one of these
KSU Basic Page Layouts.
2. Select the layout desired. If the page displays left navigation, the left column will be the area it should be
placed.
3. Click Save.
4. Create a new basic page and add the information you will add to your original basic page. Title the page with a
reference to the page it will be located on so you will be able to locate it later if editing is necessary. Save the
page. Note the node ID of the page you created. Currently, there is no way to see the node ID on the pane that
refers to it, so if you need to edit it, you will have to search for the page.
5. Return to the page where you want to add the additional content. Click Customize this page to rearrange your
page content and/or add extra sections, called panes or panels.
6. Click the + sign to add another pane to a column/panel.
7. All content needs to be added by selecting Existing node from the “Add content to the ## Columns.” Do not
select any of the options below this line.
October 2014
Page 13
Drupal Manual
8.
9. Configure the new existing node (see screen shot on page 15).
a. Enter the code or NID of a node: enter the node ID of the page that contains the content you are
adding.
b. More Information: to remove the title from the page check the box to “override title” and leave the
text box empty
c. Uncheck the Include node links for “add comment.” “read more” etc.
d. Select Full content from the Build node drop-down box.
e. Select the Save button to save your pane.
10. Add additional panes as needed.
11. Save the page.
October 2014
Page 14
Drupal Manual
October 2014
Page 15
Basic Editing
Drupal Manual
Editing Content on a Page
1. Click the Edit button
to edit the main content block, featured photo(s) or the page properties.
2. If a page needs edited and it is a page you customized with panels, click the Customize this page
button
then click the pane’s gear icon. The Configure window will open where you can make the necessary edits.
October 2014
Page 16
Drupal Manual
HINT: To view a larger Content Settings workspace you can click either:
1. Click the Toggle Full Screen Mode icon
to see the window as a full screen (top)
2. Lengthen the area by dragging the bottom right corner down (bottom)
What do the editing icons mean?
These icons, looking left to right on the top row (row 1), do the following:
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
Bold
Italic
Strikethrough
Insert-remove a bulleted list
Insert/remove a numbered list
Create an ordered list
Create a block quote
Align left
Align center
Align right
Link
Unlink
Full screen mode
Spell checker
Add media
October 2014
Page 17
Drupal Manual
The icons in the middle row (row 2), do the following:
•
•
•
•
•
•
•
Paragraph or headings selection
Remove formatting
Insert special character
Increase indent
Decrease indent
Undo
Redo
The icons in the bottom row (row 3), do the following:
•
•
•
•
Text/button/link style selections and image alignment options
Insert horizontal line
Insert/edit table (see Table section)
Insert/edit attributes (used for anchor links)
October 2014
Page 18
Adding Links
Drupal Manual
Media
Library
LinkIt
Link to an Existing Page or File
Various file types can be uploaded and linked to. The file must first be uploaded to the Media Library.
Insert/Edit
Attributes
1. Highlight the text you want to link.
2. Click the Linkit icon on the toolbar.
3. Enter the page title or a keyword in the Search content field to search for existing pages. A list will be generated
for you to select from.
4. From the list, select the page you want to link to. Files such as PDF will be displayed in a separate section after
Web pages.
5. Click the Insert link button.
October 2014
Page 19
Creating a Button as a Link
1.
2.
3.
4.
5.
Drupal Manual
Highlight the text you want to link.
Click the Linkit icon on the toolbar.
Enter the complete URL in the Target path field.
Click the Insert link button.
From the Styles list of options select the button style desired.
a. If you change the style and the button style does not change, you will need to unlink the text and link it
again.
Styled Text Link
1. Highlight the text you want to link.
2. Click the Linkit icon on the toolbar.
3. Enter the complete URL in the Target path field.
4. Click the Insert link button.
5. From the Styles list of options select the either Read More
text. Avoid using the phrase, “Read more.”
October 2014
or Action Link
. Be sure to use descriptive
Page 20
Drupal Manual
Link to an External Page
1. Highlight the text you want to link.
2. Click the Linkit icon on the toolbar.
3. Enter the complete URL in the Target path field.
4. Click the Insert link button.
Anchor Link
A link that will ‘jump’ a user to a specific part of a page.
1.
2.
3.
4.
5.
6.
Place your cursor where the anchor belongs.
Click the Insert/Edit Attributes icon.
Enter a name for the anchor location in the ID field.
Highlight the text you want to link to the anchor location.
Click the Linkit icon on the toolbar.
To link to a location on the same page enter a hashtag (#) followed by the anchor location name in the Target
path field. For example, if your location name was schedule, you would enter #schedule in the Target path field.
to link to a location on a different page you would enter the page URL followed by a hashtag (#) and the anchor
location. For example, https://www.kent.edu/summer-sessions#schedule
7. Click the Insert link button.
Quick Links
These are the links that appear in white in your footer above your social media icons. They appear on every page of
your site.
1. Select the Group tab or button from your home page. Select Menus to access your group’s menus.
2. Select add link from the Quick Links row to add a link to the menu.
3. Select list links to see the entire list and to reorder the list.
October 2014
Page 21
Text Formatting
Drupal Manual
Copying and Pasting Text from Word or an Email
DO NOT directly paste text from Microsoft Word or an email program into a Drupal page. Word has its own hidden
version of HTML baked into your text, which you don’t see when copying/pasting. Word’s version does not play well
with the real HTML and will cause headaches. Often text will look strange pasted from Word. It will also present
compatibility issues with predefined style sheets and scripts that make our pages interactive.
Clean out the code by copying your text from the source and paste it into Notepad (Windows) or TextEdit (Mac). Then
reselect the text from that program and paste it into the Drupal content window.
Style Sheet
1. Primary Navigation Mega Menu Items
a. Alpha order (add all first then reorder)
b. Minimum of four, maximum of 12
2. Formatting
a. Introductory paragraph
i. If it needs to be more prominent, put introduction style on it
b. Subhead breaks – one return not shift enter
c. Buttons
i. Five types can be selected
1. Small - Use most frequently
2. Medium
3. Medium Alt
4. Large - Use less frequently to imply significance
5. Large Icon
ii. You should create a standard within your site and communicate that to your site admins to
ensure consistency
3. Text and Terminology Guidelines – see Content Addendum
4. Quick accessibility requirements controlled by Drupal:
a. When setting links, “click here” and “read more” should be avoided. Rather, set the link on a descriptive
label. For example: Find more information about Wellness Programs (set the link on the wellness
programs text).
b. Images require an alt tag, which displays when a cursor rolls over the image or is read by a screen
reader. It should describe what is happening in the photo.
5. Images
a. Require above-mentioned alt tag
b. Should not include student names, rather, use ‘a sophomore English major.’
i. Should be good quality
6. Footer quick links – optional use
a. Maximum of eight, recommended
October 2014
Page 22
Images
Drupal Manual
Images should be sized and saved for Web (as progressive, if possible) before they are added to Drupal. If you have
multiple files or images to upload you can add them to the Media Library from any page. However, it is important to
name the file with a title you can easily search for later.
•
•
Image files should be less than 3 MB.
Allowed file types include: jpg, jpeg, gif or png.
Images can be added two ways.
Option 1
Add an Image in a Text Block
1. Select the Media Library icon.
Media
Library
2.
3.
4.
5.
6.
Locate the image on your computer.
Select Upload then Next.
Add Title text and Alt text as required.
Select Save.
Select the Submit button. Images will be purged from the site if the uploading process is not completed with
clicking the Submit button. It is hard to see at first, but if you scroll a little you will see it is located in the
bottom left area of the options page.
7. Padding will automatically be added to the image.
8. Select the alignment from the Styles menu. The image may not appear to be aligned correctly, however after
you save your page, you will see it is aligned correctly.
Option 2
Add an Image in a Separate Panel
1. Click the plus sign (+) from the column where you want the image to appear.
2. Select the Add image option
October 2014
Page 23
Drupal Manual
3. Select Choose File from the Content Settings section.
4.
5.
6.
7.
8.
Locate the image on your computer.
Select Upload then Next.
Enter the Alternate text as required.
Select Save.
Move the panel (Drag and drop with the move icon
) to the desired location on the page.
Mega Menu Icon Images
Directions are located in the Navigation section.
Footer Image
To replace the image that is displayed in the footer
1.
2.
3.
4.
Go to your group’s homepage.
Click the Edit button or tab.
Expand Footer Options.
Click Choose File, locate the image on your local computer and click Upload.
October 2014
Page 24
Drupal Manual
Information Graphics
The Information Graphics Library displays the various graphics that have already been created for use on Drupal with the
option download the graphic. Note: if you’re using a non-traditional theme color template, it is best to have info graphics
prepared that match your site’s accent color first. If you require a different graphic to be created you can complete the
Information Graphic Request Form.
To add an infographic to your page, go to your group homepage and select Infographic from the Add Content list.
•
•
Title - This is an administrative title and does not show to the user.
Image - Upload an approved gif file from the infographic library. Be sure to add alt text.
October 2014
Page 25
•
•
•
•
Drupal Manual
Text – Enter a fun fact or title that will appear below the graphic.
Link – Enter the link the graphic will take the user to.
Group audience – Your group should already be selected.
The option to select the order of appearance is coming soon.
Adding Infographics to a Page
1. Once you’ve created all of your info graphics, navigate to the page you’d like to place them on.
2. Click Customize This Page and click the plus sign to add a new pane.
3. Select View Panes, locate Group Infographics. There are currently two views to choose from:
a. 50% view - used when adding into a narrow column (shows 3 across and stacks)
b. 100% view - used when adding into a full width column (shows 6 across and stacks)
4. Once you’ve added to your page, drag the pane to the appropriate location on your page.
5. When you’re finished, click Save and refresh the page. You should see all of the info graphics you created appear.
6. See the stylistic recommendations for using infographics in the Pattern Library
7. http://patterns.kent.edu/patterns/#infographics.
October 2014
Page 26
Videos
Drupal Manual
Videos can be added two ways.
Option 1
1. To add a video in a text block, click the Add media icon select the Web tab.
2. Enter the YouTube or Vimeo URL in the File or URL media resource field.
3. Click the Submit button.
4. The video will appear in the text block and can be resized to a smaller size if necessary. Simply grab the corner
handle and drag to desired size.
Option 2
1. To add a video in its own panel, click the + sign on the column where you want to add the video.
2. Click Add video.
3. Select Browse.
4.
5.
6.
7.
Click the Submit button.
The video will appear in the preview.
Click Save.
The video will resize according to where the panel is located. If it is moved to a wider column, the video will
resize to fill the width.
October 2014
Page 27
Tables
Drupal Manual
Long tables of information with many columns will flow off the edge of the screen on phones, making them
unviewable. A style has been added to Drupal that will automatically arrange the table headers along the left side
and will allow the user to scroll through the columns horizontally on the right (see screenshot). It also ensures the
tables will stretch to 100% of the block in which it resides (you can place two tables side by side by using the 50/50
layout).
o
In order for the style to take effect, you must designate which row(s) are header rows.
1. Highlight the table row that should be the column headings.
2. Click on the Table Row Properties icon.
3. Under Row Type choose Header and click OK.
o
The first improvement will only happen automatically if your table headers in Drupal are marked as
header rows.
1. Highlight the table row that should be the column headings
2. Click on the Table Row Properties icon.
3. Under Row Type, choose Header and click OK.
Additionally, more than one paragraph should not be entered into a cell. The format will not appear correctly on
phones. Instead, split the information into an additional row or column or remove the information from a table and
place it in a location without formatting limitations.
October 2014
Page 28
Drupal Manual
These additional table options will become active once a table is present:
Table Row Properties –
o
o
o
o
o
o
o
o
o
October 2014
Table Cell Properties
Insert Row Before
Insert Row After
Delete Row
Insert Column Before
Insert Column After
Delete Column
Split Merged Table Cells
Merge Table Cells
Page 29
Online Forms
Drupal Manual
Form Components
An online form can be added two ways.
Option 1
The Form is Contained On a Basic Page
While creating a form you can switch from the Webform mode to View mode if you would like to see the results of your
options.
1. From a saved Basic Page select the Webform button (view mode) or tab (edit mode).
2. A Webform Page will open with the Form components tab displayed.
3. Enter the field name in the New component name field located in the Label column.
4. Select the Field Type from the drop down options:
• Time
 To capture the time the form was completed enter %now in the Default value field and check
the Private option in the Display settings.
• Date
 If you would like the user to select a date you can enter a Start date and End date. As well, you
can check the Enable popup calendar box if you would like the user to see a date picker.
 To capture the date the form was completed enter %today in the Default value field and check
the Private option in the Display settings.
• Email – to enter the user’s email by default, check the User email as default box available in the Token
values section. You will see the %useremail token is then added to the Default value field. If a user can
only complete the form once, the Unique checkbox (available in the Validation section) should be
selected.
October 2014
Page 30
Drupal Manual
•
Fieldset – You must decide if the title and description is Collapsible or Collapsed by Default. A
Collapsible fieldset is shown below and displays the title and the description. Collapsed by Default
shows only the title.
•
File – allows a user to upload a file. You have the options to add a specific Upload directory (the final
location of the file), the Max upload size, Allowed file extentions, and you can select a Progress
indicator (either a throbber or bar with progress meter) type.
Grid – for a survey styled question
 List the Options (titles across the top of the grid) and Questions (vertical list) as:
•
The component would display when saved as:
•
October 2014
Hidden – The Hidden field is not used often, but would be an option if you would like to collect
information such as an IP address or username without the user’s input. See the Token values sections
for options.
Page 31
•
•
•
•
Drupal Manual
Markup – Enter a text block.
Number - A variety of ways to capture a number are available.
Page Break – Enter a page break.
Select options – Select this component to offer a list to the user to select from
 List the Options the user must select from as:
A radio button list will display. If you would like the user to be able to select more than one
option, select the Multiple checkbox; a list with a box by each option will display.
• Text area – Select this component to add a large area for the user to enter text. You have the option to
select the width (number of columns) and height (number of rows) of the area. You can also select if
you would like the area to be able to be resized.
• Textfield – Select this component to add an area for the user to enter one line of text. You have the
options to require the content to be unique and you can select the maximum number of characters. A
prefix and suffix option is available as well if text before and/or after the field is needed.
5. Check the Mandatory box if a response is required. This box will display as checked if you checked the
Mandatory box in the Validation section on the components options page.
6. Click the Add button to enter the required component details. Each Field Type will open a page of options
pertaining specifically to that type. Most all contain these fields:
• Label* - The title that is displayed by the form component.
• Field Key* - How the Label is displayed in the results.
• Default value – Add if you would like to display the most likely option displayed.
• Descriptions – The information you enter in the description field will display as text under the
component when the page is viewed.
• Token Values (default options are presented)
• Validation - check the Mandatory box if the user must enter a value
• Display - Various options are presented depending on the component selected. Select as needed to fit
your needs.
 Private (Private fields are shown only to users with results access)
7. Once a field is added the Operations column it will populate with options to Edit, Clone, and Delete. The field
display order can be changed by dragging and dropping the move icon.
*Required
October 2014
Page 32
Option 2
Drupal Manual
The Entire Web Page is a Form – No text outside of the field descriptions is necessary.
1. Select the Webform link on your group home page.
2. Insert desired fields (described in Option 1)
Email Confirmation Setup
To send email confirmations, select the Emails option.
1. Enter the email address of who will receive an email notification that the form has been submitted.
October 2014
Page 33
Drupal Manual
2. Click the Add button to open where you can customize the format of the email that will be received.
Form Settings
The Form Settings options allow you to enter how the user receives confirmation of their submission. You can also add
restrictions to the number of submissions and change the status of the form.
October 2014
Page 34
Drupal Manual
Submission access options are also available and mostly likely all should be selected if they are not already as the
default.
The following Advanced settings are available as well. The “Submit” button text can be changed here if alternate text is
required.
October 2014
Page 35
Navigation
Drupal Manual
Your site navigation is created alphabetically by default when you select a parent (main navigation/subject area) in the
Menu Options while creating a Basic Page. Changing or adding a parent will change the page’s location in the
navigation.
Image 1.3
See pages
31 and 32
for details
about each
field.
Image 1.4
See page 32
for details
about each
field.
October 2014
Page 36
Drupal Manual
See Image 1.3 on page 32.
Main Navigation
Select the <your site name> from the Menu Options. This option will add the page to the top navigation bar.
See Image 1.3 on page 32.
Mega Menu
Selecting a top navigation page as the parent will add the page to the mega menu that appears when a user hovers over
the parent page in the top navigation bar. This page and its children will be displayed in the left navigation too.
See Image 1.3 on page 32.
Left Navigation
Selecting a level two page as a parent will add the page to the left navigation.
See Image 1.3 on page 32.
Quick Links
Selecting the site’s quick links as a parent will add the page to the Quick Links located on the right side of the footer.
See Image 1.3 on page 32.
Mega Menu Icon Image and Link
Adding an image with a button to navigate to a specific page is optional.
1.
2.
3.
4.
5.
On your homepage, click the Group button (View mode) or tab (Edit mode).
Select Menus, then your main navigation menu.
Click List Links on the right side of the page.
On the the top tier navigation, you will have the ability to add an image by clicking on Edit.
Edit these sections to create the menu icon:
o Check the Use an Icon box – this tells the page an icon will be used.
o Image Style – Should default to menu_icon, so there shouldn’t be a need to touch this. Just be aware that
the style control is here.
o Click Choose File to Upload a new icon image – image should be 118 px horizontal x 150 px vertical.
o Feature Teaser – The text in the highlight section.
o Feature Link Title – The text that will appear in the button.
o Feature URL Override – If you leave this alone, it will link to the top-level landing page, but you can set this
to go to a highlighted page within the subsite (or an external page).
o Click Save at the bottom of the screen.
See Image 1.4 on page 32 and screen shot on page 34.
Action Items
Action items can be added to your group’s homepage by entering the Title to display with the URL in the fields located in
the Group Action Items section on the group homepage. Please be sure to included http:// as part of the URL path; it is
required to be either complete or relative just adding www at the beginning is not enough to create the proper link
here.
October 2014
Page 37
Drupal Manual
NOTE: If your group was created prior to July 7, 2014 you will need to add the steps below to have the block appear on
your home page.
1.
2.
3.
4.
5.
October 2014
In View mode select Customize this page.
Select the plus sign to add a pane to the left panel.
Select Block content.
Locate the Sidebar List of Action Items.
Click the green add tab to add to the panel.
Page 38
Modify the Site Navigation
Drupal Manual
To reorder or add an external link to your navigation, login to your homepage https://www.kent.edu/group-name.
Select the Group tab (Edit mode) or button (View mode) then select Menus.
1. Click List Links to see the navigation for the site. If a page needs moved, you can drag and drop it to a new
location. The navigation level can be changed if needed.
Add an External Link
It is possible to add a link to your site navigation that is not located In Drupal and, therefore not available to add to a
menu by selecting a parent in Menu options.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
On your homepage, click the Group button (View mode) or tab (Edit mode).
Select Menus, then your main navigation menu.
Select the Add item tab.
Enter the text you want to appear in the navigation in the Menu link title field.
Enter the page URL in the Path field. If you are linking to a Kent State Drupal page, enter the page node ID as
node/####.
Check both the Enabled and Show as expanded options.
Select the parent of this page. For example, if you were adding a menu link for Undergraduate Admissions,
Admissions would be its parent.
The weight can remain at 0.
Resize to fill the width.
Click the Save button at the bottom of the page.
October 2014
Page 39
News
Drupal Manual
Select News Article from your home page. The following one page form will open for you to complete. Each section is
described below.
Image 1.5
See page 36 and 37 for
details about each field.
Headlines
• Headline - Main headline (in article)
• Short Headline - A shorter headline version - it is shown on the image (overlay) - on the Home page
• Subheadline - A teaser displayed below your headline
Author
Name of author or department publishing the article – not required.
Publishing Options
• Check - uncheck if you are not ready to publish your article.
• Revision - check new revision; every time you save your article it will be saved as a new version that can be
restored later if necessary.
Authoring Information
• Author - defaults to the user
• Date - will autofill when saved if a specific date is not entered. This field populates the order of appearance
online.
• Time - will autofill when saved if a specific time (military) is not entered.
• Note: entering a future date and time will not hold the articles publication until that date and time.
October 2014
Page 40
Drupal Manual
Body
See image 1.5 on page 36.
Add content by pasting content into the text editor. Note, you must insert text via Notepad (PC) or Text/Edit (MAC).
Update formatting where needed and add hyperlinks.
WYSIWYG and HTML editing options are available.
About the Article
•
•
Location: Add campus (selecting multiple is not an option yet)
Tags: List the taxonomy items (i.e., the college, school, department, focus of article)
Sidebar (Ignore this area for now. This feature has not been added yet.)
Photos
Feature Photo – is only used on Success Stories. If you wish to add an image to the body of the article follow the image
instructions.
October 2014
Page 41
Drupal Manual
Videos
Enter the URL of the video you would like featured, as well as a description. The video will automatically size to span the
entire width of its location (body or sidebar).
Featured News
News Story Designation – Do not select anything here. This selection or lack of selection will affect the Kent State main
home page news feed.
Success Story (For UCM use only, at this time. Enhancements coming for other clients.)
October 2014
Page 42
Drupal Manual
Group Audience
Your Groups – Your group should be preselected. If not, select it from the list.
Other Groups – add additional groups as needed and separate with commas if there is more than one.
Setup a News Feed
Choose the Basic Page on which you want to display news. For example, you might create a basic page called News. If
you’re displaying your news on the group home page, skip this step.
On the basic page or group home page, do the following:
1.
2.
3.
4.
Click the Customize This Page button.
Click the plus sign on the panel where you want the news to display. For example, you may want it in the content area as
opposed to the sidebar.
Choose View Panes
Choose one of these display options:
a. OG News Feed - All Headlines Only - This displays only your news headlines as a bulleted list starting with the most
recent, 10 per page.
b.
October 2014
View: OG News Feed - Top 5 Headlines - This displays your most recent 5 headlines as a bulleted list starting with
the most recent - perfect for the group home page.
Page 43
Drupal Manual
c.
View: OG News Feed: Group News - Author, Date Headline - Displays the Headline, Author and Date, 10 per page.
d.
View: OG News Feed: Group News - Summary, Author, Date
October 2014
Page 44
e.
5.
6.
7.
Drupal Manual
View: OG News Feed: Group News - Thumbnail, Summary, Author, Date, Headline – Same as above, but includes
a thumbnail pulled from the featured photo of the news story.
Click Add and then Save.
Drag the newly added feed BELOW the page title and breadcrumbs
Click Save and refresh the page. You will see the news from the organic group automatically has populated.
October 2014
Page 45
Drupal Manual
Profiles
Until profile display is built, the display view will not look as it will in the final version. Some fields may be missing. To
verify that a profile has been created, you can visit www.kent.edu/all-profiles.
Most fields are self-explanatory. If additional information is worth noting in a section, a note will be added under the
screen shot.
View a prototype of how profiles will display:
http://ucm.dreamhosters.com/patterns/prototype/profile-single.html
http://ucm.dreamhosters.com/patterns/prototype/profile-listing.html
1.
Create a profile by going to https://cms.kent.edu/node/add/porfiles. Fill out the fields on the new profile
•
October 2014
Page Title - For the title of the Profile, enter the person’s name as you would want it to display in
their full profile view - for example Dr. Roger Smith, Ph.D.
Page 46
•
•
•
•
•
October 2014
Drupal Manual
FlashLine User Name - be sure to fill in the FlashLine user name if the person is affiliated with Kent
State
Profile photo - minimum dimensions are 500 x 750. You can find many photos at http://photo.kent.edu.
Click on the photo to crop it after uploading.
KSU Status - options would be Staff, Faculty, Graduate Student, etc. - if a status doesn’t exist, you
can type one to add it to the list. One person can have multiple statuses.
List phone numbers using university style, i.e. 330-672-1234
Website – multiple websites can be added
Page 47
Drupal Manual
October 2014
Page 48
Drupal Manual
•
•
•
•
October 2014
Selected Publications - Publications should be recent publications only.
Resume - file types accepted - txt, pdf, doc or docx
CV - file types accepted - txt, pdf, doc or docx
Research & Areas of Expertise - combines the previous separate research and expertise areas into
one section. You may enter up to 10 areas.
Page 49
Drupal Manual
October 2014
•
Courses Teaching - this is an open field. You may format these as needed.
•
Display Options - use this section only if tagging or if you want to promote a profile to a specific slot.
•
Find an Expert/Researcher (For UCM Media Relations Use Only)
Page 50
Drupal Manual
•
Groups audience - it is important that you select the correct group for which the person is
affiliated. One person can be affiliated with multiple groups.
Make sure that the Publish box is checked so that the profile is live. That box should be checked by default.
3. Click Save.
2.
October 2014
Page 51
Predesigned Blocks
Drupal Manual
There are blocks that have been created that you can add to your page. This reusable content can be inserted on pages
in Drupal, such as regional campuses. The content will display without taking the user away from their site. This is
reusable content that should not be or changed in any way. Changing the block would change every instance on the
Kent State website. If you require a different version, you may copy and paste the information into a new pane, edit the
content and save it to your page.
Tuitions and Fees
There is new Tuition and Fees information (approved by Stina in the Bursar’s Office). Follow these simple steps to add
this block to your page.
1.
2.
3.
4.
5.
6.
7.
Click the Customize this page button
Locate the panel you want to add the block to.
Click the plus sign to open the menu of content options.
Select Reusable Content.
Scroll to locate Tuitions & Fees 2014-2015.
Click the green Add button.
Relocate the pane to the desired location on the page.
Why (Insert Major)?
For each department’s Why Xxxxxx? page, a block from Career Services should be added. The page name that is it
placed on must be named with this format: major-why-(insert program name). For example, the theatre department’s
full page URL would be https://www.kent.edu/major-why-theatre. Follow these simple steps to add this block to your
page.
1.
2.
3.
4.
5.
6.
7.
Click the Customize this page button
Locate the panel you want to add the block to.
Click the plus sign to open the menu of content options.
Select Reusable Content.
Scroll to locate View: Why This Major.
Click the green Add button.
Relocate the pane to the desired location on the page.
October 2014
Page 52
Group Theme
Drupal Manual
If allowed by your dean or administrator you can change the colors of your group website.
5.
6.
7.
8.
Go to your group’s homepage.
Click the Edit button or tab.
Expand Display Options.
Select the from the Group Theme list of color options:
October 2014
Page 53
Drupal Manual
Web Standards and Style Guide
Please refer to the Guide to Web Standards for complete details regarding the various website elements.
The Kent State Guide to Visual Standards (May 2014) contains all the visual standards. Both are available at
http://www.kent.edu/web.
October 2014
Page 54
Drupal Manual
Content Addendum: Common Mistakes
1. Text
a. Website is one word
b. Email is not hyphenated
c. Dates:
i. The month in the date should be abbreviated when it appears with the event date (i.e., Aug. 1).
ii. However the month should be spelled out when it appears with the year (i.e., August 2002).
d. Time:
i. 8 a.m. or 3 p.m.
ii. 8:30 a.m. or 3:30 p.m.
iii. 8-9 a.m.
iv. 8 – 9:30 a.m.
v. 10:30 a.m. – noon
vi. noon – 2:30 p.m.
vii. 2:30-3:30 p.m.
viii. 3:30 – 5 p.m.
e. Online is one word.
f. University should appear as university when used alone, please note the lowercase “u.”
g. On first reference, full department names are written out in entirety and capitalized (i.e., University
Relations and Development). On second reference, it may be shortened and lowercased (i.e.,
development).
h. Advisor – use the -or ending, not –er.
i. Ampersand — university style uses “and,” not an ampersand unless an ampersand is part of the proper
name of a non-university entity or if it is being used as navigation or a design element used in the
Website.
i. Website navigation titles should use the ampersand.
ii. Website page content should spell out the word “and.”
2. Terminology – if using any variation of these terms, they must be used in this fashion:
a. FLASHcard – A physical identification card containing a student or employee’s photos. The card has a 10
- 16 digit ISO number printed on it. May also refer to the FLASHcard Office location.
Incorrect terms currently in use:
i. FlashCard
ii. Flash card
iii. FlashCARD
b. FlashLine user name - A combination of a user’s first and last name (up to eight positions, sometimes
with a number) that acts as the login user name for most campus resources. The FlashLine user name is
everything before @kent.edu in the email address.
Incorrect terms currently in use:
i. FlashLine ID
ii. User name
iii. Email ID
October 2014
Page 55
iv. User ID
Drupal Manual
c. Kent State email addresses - The full @kent.edu email address, which includes the FlashLine user name.
Incorrect terms currently in use:
i. University email address
ii. KSU email address
iii. Kent email address
iv. FlashLine address
d. Kent State ID number (Banner ID) - A 9 digit id number, currently beginning with an “8,” that identifies
students, faculty, staff, alumni and other constituents in the Banner system.
Incorrect terms currently in use:
i. Student ID
ii. Banner ID
iii. Employee ID
iv. University ID
3. University Guide to Style includes university standards for approved use of buildings, Regional Campuses, how to
refer to the president and more.
October 2014
Page 56