Ready Reference 063014

Introduction to Drupal 6

Introduction

This page provides instructions for using the Drupal Web Content Management System. Drupal

makes publishing content relatively easy and allows you to modify Pace web pages directly from

your web browser after logging into the site with admin/editor privileges.

Getting Started

To request access to your department’s webpage, your direct report or someone in your area with

admin permissions will need to place a helpdesk ticket. All requests can be submitted to

https://help.pace.edu or by sending an email to pacehelpdesk@pace.edu.

Logging into Drupal

Note: The preferred browser to use is Mozilla Firefox

open a browser and navigate to http://www.pace.edu/{Your Site Name Here}/user/

type your MyPace Portal Username and Password

click Login

After authenticating, you will be directed to your profile page. Information on how long you

have been a member to the website will display. To acknowledge you have authenticated

successfully, you will notice a black admin toolbar at the top of the page shown below.

Note: The red box marked below indicates the amount of users and administrator/editors that are on the site.

Note: Please remember to log out of Drupal if no editing is done. To sign out, click on the Log Out (username)

-1-

Overview of administration page components and features

Number Name Description

1 Admin Toolbar Select options to create a page, view various

content, update banner, etc.

2 Header Department or Organizations Name

3 Dark Blue Navigation Bar Navigation bar on all Pace pages

4 Area Banner Banner representing your site

5 Quick links Top right navigation for up to 5 links

6 Teal Blue Navigation Bar Navigation bar on all Pace pages

7 Primary Tabs Tabs to View and Edit page

8 Body Area to display content

9 Primary Links Right side menu containing Drupal pages

10 Footer General University information and links

1

2 3

4 5

6

7

8 9

10

-2-

Using the File Browser

The File Browser is a central repository for storing files, PDFs, images etc. It can be accessed

within the profile page or when editing a page.

To access file browser from Profile page:

click icon on the far right of the Admin Toolbar

click File Browser in the main window

The toolbar has the following options available:

Icon Name Description

Save images, documents, PDFs, and other

miscellaneous files to the file browser

Reduce the size of the selected image with the

provided dimensions (three sizes)

Delete a file based on what is selected

Adjust the visual dimensions of the image and

optimize its size

Cuts out certain section of an image

Rename a file

Create and remove folders in the directory

Insert images, documents, PDFs, and other

miscellaneous files from the file browser

Upload files

The instructions below show how to upload files to the Drupal site.

select folder from the in the left navigation pane to place an image

click Upload button

The files upload dialog box will display.

-3-

click Browse

navigate to folder that contains the image to upload

select image and click Open

Once the picture file is selected on storage device (e.g., desktop, Network drive),

click Upload

Note: It is not recommended to select a thumbnail (see above) since each of the thumbnails predefined size

may cut out part of your image if the width and height does not have the same dimensions.

Resize an image:

select image to resize from folder directory in the left navigation pane

click Resize on toolbar

type the desired pixel width and height in the spaces provided

Note: Drupal will adjust the height ratio in relation to the width you have specified.

-4-

Crop a file:

select image to crop from folder directory in the left navigation pane

click Crop on toolbar

Once the image is selected, a green box will appear around the picture. Once you click and drag

anywhere within the green box, a red box will display. Within the red selected image is the area

that will become the new image.

To finalize crop:

click Crop

Rename files

select image to rename from folder directory in the left navigation pane

click Rename on toolbar

type file name next to New name

Delete Files

select you desired file from folder directory in the left navigation pane

click delete

-5-

A confirmation box displays:

click OK

Managing Directories for file storage

The user has the option of adding or removing a folder from left navigation directory tree.

To add a folder:

select parent folder from left navigation and under Root

click Directory

type folder name next to Subdirectory name

click Add

Note: the newly created folder will display under selected parent folder.

Editing & Creating a Page

Existing webpages can be modified or a new page can be created for the site.

To update an existing page:

navigate to the desired page

click on the Edit tab

-Or -

To create a new page:

hover over Content Management from the Admin Toolbar

hover over Create Content

click Page

-6-

The Drupal page will display:

type the title of page under Title

type the content of webpage under Body

The WYSIWYG Editor Toolbar has the following options available:

Icon Name and Description

Source – View HTML code

Cut – Remove the selected data from its original position

Copy – Create a duplicate from the selected data

Paste – Inserts font, styles, and miscellaneous code

Plain text - Inserts text without formatting

Paste from Word – Inserts content copied from Word

Check Spelling – Review the body of the page for spelling errors

Spell Check As You Type – Enable SCAYT option to indicate

spelling errors

Find – Enter the word or phrase to locate within the page body

Replace – Enter the word or phrase to substitute within the page

Select All – Select all content within the body

Remove Format – Remove all fonts and styles within selected

area

Insert Image – Use the file browser to upload and insert images

to the body of the page

Flash - Insert a SWF animation or a FLV video

Insert Table – Table can be customized with its own color and

styles

-7-

Insert Horizontal Line – A grey horizontal line will appear based

on the cursor’s location when button is selected

Insert Smiley – Place in stylized faces and images

Insert Special Character – Add numbers, characters, and symbols

IFrame – An inline frame is used to embed another document

within the current HTML document

Bold – Change characters to a stronger appearance

Italic – Transform characters to right upward slant

Underline – Draw a line under the selected word

Subscript – A letter or figure written below the line of text.

Superscript – A letter or figure written above the line of text

Insert/Remove Numbered List – Creates a ordered list using

numbers or letters

Bulleted List – Creates a bulleted list

Insert Indent – Positions text further from the margin than the

main part of the text

Align Text Left – Alignment of the text will be on the left margin

of the page

Center – Aligns the content along the center of the page

Right – Aligns the content along with the right margin

or Justified – Distributes the text evenly between the margins

Text Direction – Changes the direction of the text within the

selected area

Insert Link – Select the text or image for which you want to

create a link

Anchor – Anchor is used with link to jump to a specific location

within the same page

Font Name, Size – Drupal provides hidden default font and size.

A selection can be made to change the default font and size

Font Color – Changes the color of your text.

Background Color – Changes background colors, images, or

texts in a document

Maximize – increase screen view of page your editing

Show Blocks – indicates different tags present on page

-8-

Inserting a Image

The following instructions will show how to insert an image to the body of the page.

insert the cursor in the content area where the image will be placed

select the Image icon from the toolbar

select the Browse Server icon once the Image Properties pop-up window appears

click the folder where the image resides

select the image you want.

select Insert File.

click OK.

Links

Create an Internal Link

Internal links refer to alternative pages found within the same Drupal site.

choose the image/text that will have a link attached

select the Link icon from the toolbar

select Drupal within the Link Type drop down list

-9-

type in the name of the page, and the system will show all relevant page names

click on the page you would like

select OK

Create an External Link

An external link is connected to an external webpage or file ( i.e. .doc, .pdf, .jpg, etc.)

Create a link to a website:

choose the image or text that will have a link attached

select the Link icon from the toolbar

click the Link Type URL within the Link pop-up window

click the appropriate procedure (in most cases http://)

type or paste the URL in the URL field

click OK.

Create a link to a file:

choose the image or text that will have a link attached

select the Link icon from the toolbar

-10-

click the Link Type URL within the Link pop-up window

select the Browse Server icon from the File Browser window

select the file or image you want to upload

click Insert File button

Note: Within the URL text field of the Link pop-up window, the path to file should

appear.

click OK.

Edit an Existing Link

click on the text which is linked

select the Link icon

adjust the URL address

Delete an Existing Link

click on the text or image that is linked

select the Unlink icon from the toolbar

Create an Email Link

click on the text you want to link

select Link icon from the toolbar

click Link Type Email from the Link pop-up window

enter the email address. (Optional) Add subject and message body

select OK

-11-

Create an Anchor Link

insert the cursor in the content area where the image will be placed

select the Anchor icon from the toolbar

type the name of the anchor you are making in the Anchor name field

select OK.

Note: Where the cursor was inserted, an anchor icon should appear.

type in and/or click the text which will link to the anchor

select the Link icon

select Link to anchor in the text from the Link Type

choose the proper anchor name from the Select an Anchor Name drop down menu

select OK

Tables

use the Insert/Edit Table button to insert tables. The Table Properties pop-up

window will appear

-12-

Type the amount of Rows and Columns you desire

Input the width of the table in the Width field

Then hit OK

There are a few things to keep in mind before saving your webpage:

Option Description

Input Format By default Raw HTML is automatically selected. Other options such

as: Filtered HTML, Full HTML, and PHP code, may alter the HTML

code that is generated in the body of the page. To prevent unwanted

changes, leave the Raw HTML option selected. Raw HTML leaves

the code in raw format.

Menu settings Within the menu link title, input the text you would like to appear

within the primary links (e.g. menu). Both the title of the page and the

menu link title should be the same..

Meta tags No additional steps are needed. Drupal by default provides the

necessary meta tags.

Revision information. This option allows you to backup any changes you make to your

pages. Create new revision box must be checked off in order to save

any content. Further descriptions of the change can be added in the

log message field.

Authoring information By default new pages will be assigned to person who created the

page. You can change the name to someone else’s with access to site.

-13-

Publishing Options To have a page published for the end user to see, the published

checkbox must be checked. To hide a page and have it only viewable

to an administrator/editor, the published box must be unchecked. The

Promoted to front page and Sticky at top of lists are options only

used for blogs and are not compatible with webpages.

URL path settings The defaulty option for automatic alias is checked off. Thus, Drupal

will assign a URL address automatically based on the title of the

page. To create your own alias, uncheck this option and provide the

address to page, excluding the domain and your departments home

address (e.g., www.pace.edu/ITS/).

Printer, email and PDF Display a printer-friendly icon and/or email icon on a page for

visitors by placing a checkc next to your desired optioins: Show link,

Show link individual comments, and Show Printer-friendly URLs

list.

Comment settings Uncheck Disabled, Read only, and Read/Write to prevent visitors

from commenting on pages.

URL redirects Create a list of URL redirects to point to the page you’re on.

View all Published and Not Published (Non-Published) Pages

All content, published and non-published, are listed on the content page.

click Content Management from the admin toolbar

select content and click list

The content Pages are listed starting from the most recently published down to the oldest. To

view the desired page

click on the title

To make changes to the listed page:

click edit link

-14-

Show Only Items Where – In this section you can filter by status (published and not published)

or type (Page and Webform) and by selecting additional options under each item.

Note: Under the “status” drop down list, discard the following option since they are not being used by Pace’s

site: Promoted to front page, demote from front page, Make sticky, Remove stickiness, Update URL alias,

Delete meta tags

Update Options – Change the status (Publish, Not Publish, Delete) of the Content by selecting.

from the drop down list

Note: When publishing a page, the URL alias may change.

Primary Links

The primary links allow you to rearrange

click Site Building from Admin Toolbar

select Menus and click List Menus

click Primary Links or the name of the website displayed

You will be able to perform the following steps:

rearrange the Menu Items by dragging it up, down, left and right

-15-

click Save configuration