Getting Started Guide: Drupal

This guide has been created to help you get started using your Drupal site.

It is recommended that you review these pages before starting on your site. They'll save you a lot of time and headaches.

It's also good to check back regularly, as these pages are not static - we'll update them as new information/abilities become available, add more screenshots, etc. We'll also make changes on them in response to your feedback.

If you already have your log-in for your county site, you can use it on this site to log in. Here's an example.

Say my log in name is webmaster at the site multnomah.oregondemocrats.org and my password is donkeysrule (this log-in information is a sample and will not actually work).

To log in on this site I would use:

username: webmaster@multnomah.oregondemocrats.org
password: donkeysrule

Once you're logged in, you are welcome to change your user name to something easier, such as your real name. You can do so using the "My account" link in the top right-hand sidebar. Doing it this way saves you from having to register and await a log-in link in your e-mail.

If you don't have a log-in, that's ok too. Just register on the site and as soon as we approve your account (this protects the site from spammers), you'll be able to post on the site.

Please feel free to add your tips, comments, and questions. This helps us grow our support site and give the counties a quick and easy way to find answers to their questions.

You can also post support tickets on this site to alert us to bugs, trouble, etc. on your site.

How do I get started?

You will start with a copy of the "model" county site, which already has a lot of the structure defined.

The model site is visible at model.county.oregondemocrats.org.

You can experiment with the "insides" of the drupal site by logging into the demo site.
The demo site is a copy of the model site that you can make changes to. It is restored
every night to be like the model site.
Demo Site: demo.county.oregondemocrats.org.
User: webmaster
Pass: demo_master

These help pages are designed to help you convert the model into a site tailored for your county. The instructions here are very basic. Drupal is capable of much much more, and as you get familiar with the system and see what others have done, you may want to explore new features on your web site.

Please review the topics in this getting started guide first.

Start with the items in the Tips & Hints forum, especially:

If you have questions, please post them in the forums here, and if you have gained some experience, please watch the forums here to help out those following you. We are counting on the group of users here to support each other as much as possible.

More help:

You can get help from Jenni Simonis. She works on Drupal professionally, and the DPO pays her for providing assistance with DPO site support. She is available for you as well, but she needs to make a living, so don't expect too much free support.
The Drupal Cookbook at the official Drupal site
Try googling "Getting Started with Drupal" for several informative sites
There are several books at various levels of technicality. See Amazon.com

Logging In to Your Site

Your site initially has a url of:

http://[countyname].oregondemocrats.org

This "subdomain" (and 3 email forwarding addresses) come automatically with each county that participates. (If you want a custom domain and more control over email, contact John Springer for details.)

Go to your site's url, and click on the "User Login" link in the lower left sidebar. (If there is no login link in the sidebar, and you aren't already logged in, then go add "/user" after your site name in the url. That will give you a login page.)

(click for larger image)

Each site already has an administrative user called "webmaster", with a unique password.

Enter the user name webmaster and the password into the login box, and click Log In.

You can tell when you're logged in because in the upper right hand sidebar, there will be an administrative menu with entries like "site building", "content", "user management", etc.

(click for larger image)

Your login status is "remembered" on your computer, so when you return to the site, you may still be logged in. To log out, click onthe "log out" entry at the bottom of the administator menu.

Changing site information

Chances are, your first couple of questions are:

Using the links above you can find more detailed information on those questions.

There are several bits of information that can be changed on the Site Information page under administer (/admin/settings/site-information).

Included in that are:

Site Name (that's what shows at the top left-hand corner of your browser)
Main e-mail address (any e-mails that go out from the site, such as log-in information, will show this address)
Slogan
Mission
Footer
Default front page

(Click for larger image)

The main pieces on this page you're going to use are the Site Name, E-mail address, Footer, and Default front page.

Site Name

This is what shows up in the left hand corner of your web browser. It is the text to the right of the |. The text to the left of the | is the name of the page you're on.

Page Title | Site Name

So if you're on the Site Information page at the DPO's Drupal Support Site, the text in the left-hand corner will say"

Site Information | DPO's Drupal Support Site

You can control what this says by changing the Site Name and the title of each page, event, etc.

(click for larger image)

E-mail address

Whenever an e-mail goes out from the site, such as that with log-in information for a site user, the e-mail address attached to that message can be set on this page.

Be sure it's an e-mail address that actually exists, because you may occasionally get responses or e-mails to that address.

Slogan & Mission

Slogan and Mission are rarely used in Drupal sites, and many themes do not use them. That means even if you input information (and turn them on via the Theme configuration page - /admin/build/themes), they may not show up. How they look and where they appear are controlled entirely by the site's theme.

The Slogan can also show up on your front page in the upper left-hand corner of your web browser.

Footer

More information on the footer, including how to use it, can be found here.

Default front page

More information on the front page options can be found here.

The Administator Menu

All the control you need to create new web pages, upload images, set up forums, is available in the Administrator Menu, which appears in the upper right sidebar when you are logged in.

With Drupal, you don't need to know HTML code and you don't need to know how to ftp content up to your site. It does everything through simple forms you fill out.

The first couple times you use Drupal, navigating it can be a bit difficult. That's especially true if you've never built a web site before or have only done them through html coding (either by hand or using software like Front Page or Dreamweaver) and uploading by FTP.

With Drupal, FTP access is rarely needed. Most activities that might required ftp access are done for you by the DPO. This includes things like initial set up , module upgrades and changes, and changing the theme. Everything else is done in your browser.

When you create HTML code in a page, you use a simple WORD-like toolbar that lets you apply styles, make lists, add links, create tables, and more. You see the results of your changes on the page, not the code behind it. (Note: the WYSIWYG (What You See Is What You Get) editor does not work correctly with Mac Safari. So if you are on a Mac, you'll want to use Firefox instead.)

(Click for larger image)
Note: Your WYSIWYG bar may look different than the one shown above. There are a variety of options available, which can be set by the site webmaster by editing the TinyMCE settings.

First, you'll need to be logged into your web site in order to do anything. So log on with the information that has been provided to you.

Now you can begin work on your site.

Common Questions

Chances are, your first couple of questions are:

Using the links above you can find more detailed information on those questions.

How do I navigate my site? Where do I go? What do I do?

Chances are you're going to be using two links from your Navigation Menu more often than anything else: Create Content and Administer.

Create Content

This is where you go if you want to add content to your site. From here you can add pages, books (different from a page in that you can create child pages that automatically link to each other and the parent page), events, etc.

Administer

This is where you control how your site looks and operates, as well as view the logs.

Note: If you see a red box that appears at the top of your page that looks like the following, don't worry. This shows up when a module or other item has a newer version available. It will be taken care of by the system administrator. Sometimes we wait to do upgrades because of a bug found in a newer version. As such, this will sometimes appear for an extended period of time.

There are six sections under Administer. They are listed below with the most common actions you'd take under each.

When working with items listed as Advanced, you should take caution. Changing these items can drastically change the way your site works. You may want additional help before changing any of these options.

Content management

This is where you can:

See a listing of everything on the site- Content
Change how content behaves, such as whether it automatically promotesto the front page, are comments allowed, etc. - Content Types
How comments are handled, including dealing with those in moderation - Comments
Creat forums - Forums
Create image galleries - Image Galleries
Pull in a rss feed from elsewhere, such as the DNC - News aggregator

Advanced options: Content Templates and the tabs that show up on the Content Types page.

Site building

This is where you can:

Change what shows up in the sidebars - Blocks
Change your menus, including the drop-down menu at the top - Menu
Change aspects of your theme, such as whether the Slogan shows up, whether who submitted an item shows up under the page title, etc. - Themes
Change the URL alias for pages, or add additional ones to pages - URL aliases

Advanced options: Views, Modules

Site Configuration

Almost all the options on this part would fall under Advanced. The one you'll use the most is Site Information, which is explained here.

User Management

This allows you to:

Create new users and see which users are already on your site - Users
Change whether registration is allowed, closed, or if new users have to be approved - User Settings

Advanced options: Access Control, Access Rules, Roles

Logs

Here you can see what errors people are getting, what are the most viewed pages, etc.

These logs are simple logs.

Help

Here you can find some information on how to work with your site.

Changing your front page

A question that comes up a lot is how to change your front page. People are looking for something called index or index.htm, since that is how they've controlled the front page in their sites previously.

Drupal does not work that way. There is not an "index" page, and no pages have .htm or .html after them. They don't have a .anything at all. Page names are things like:

/home
/events
/2007/05/28/act_blue_contributions_now_available

The one thing you should know is that you shouldn't put any spaces in web site names (otherwise known as URL aliases or a URL path). Instead, use the underscore so that all web browsers and e-mail programs handle the links properly.

Ok, so now what do I do?

So now that you know there isn't an index page, how do you change your front page? You actually have two options:

A front page that only houses one node.
A front page that houses "teasers" to a variety of different nodes.

I'll now go over the differences, an example of each, and how to do it.

A front page that only houses one node

You would use this if you want to have a traditional front page. This may be using tables, if you'd like, to create a front page. This means your front page probably doesn't change that often -- it's more likely to be very little lengthy text (maybe a welcome) with links off to other content.

An example would be the Multnomah County Democrats' web site: www.multdems.org

(Click for larger image)

The center portion of the front page is a node that uses tables. You'll notice that when I am logged in, I get tabs above the main portion of the site (view, edit, outline, etc.). To change the content on the front page, I just click the "Edit" tab.

The front page of the DPO's web site also used this type of front page before going to a more advanced option (block regions).

To create this kind of front page, first create your page. Be sure to set the URL path to something obvious like "home" (or even "index," if you'd like). I use "home" because it works well with search engines.

Then go to the "Site Information" page, which is located under your administer menu.

Scroll down to the bottom of that page. There you'll find a setting for the default front page. Change "node" to whatever you used as the URL path for your page:

Default front page setting screenshot

Hit "Save Configuration."

This will now change your front page.

A front page that houses "teasers" to a variety of different nodes

Your second option is a page that changes whenever you "promote" an item to the front page.

An example of this type of site is Blog for Oregon, www.blogfororegon.com

(Click for larger image)

The address to this page is /node.

You'll notice this page has two nodes visible on the front page (there are 10 in total). These nodes show up on the front page because they have been "promoted" to the front page.

Obviously more than 10 nodes have been promoted to the front page in the year+ that the site has been online. You can get to older items via links at the bottom of the front page:

There's also an icon (the orange one on the left) that gives site visitors access to the RSS feed for your site.

Any time you add an event, blog entry, page, etc., you can have it be "promoted" to the front page. If you don't have teasers set up on your site, it will automatically pull the first 600 characters (you can change this on your administer menu: /admin/content/node-settings).

You can also control what is pulled as the "teaser" by using a comment that tells it where to break. That comment is:

A comment is a piece of text that does not show up on the page (but can be seen in the html). Typical uses are for documentation.

If you insert that text where you want the teaser to end, it will use that instead of the first 600 characters.

Note: You must add that comment when the rich-text editor is off. This means clicking on "disable rich-text" under the text area.Otherwise the editor just sees the comment as text.

disabling rich text screenshot

Items will be added to your front page in date order, newest first. Any item that has been set as "sticky" will be placed at the top of the page, regardless of age.

You'll find the "promote to front page" and "set as sticky" options at the bottom of your page creation/edit screen under "Publishing options."

What is this other stuff that is showing up on my front page?

If you have other text that is showing up in the "main" section on your front page, check your Site Information page. If you've set a Slogan or Mission, these can show up on the front page as well. You can either delete the text, or on the Configuration tab on the Theme page (/admin/build/themes), you can turn them off.

The footer on that page controls the text that shows up at the bottom of the page.

Some important concepts...

Some items you should take note of before you start working on your site...

1. Content is stored in "Nodes", not HTML pages.

Drupal works by keeping all the content you specify in a database, where it is indexed and categorized. Web pages are created by retrieving sets of data, called "Nodes" and displaying them in some defined format. It is fairly easy in Drupal to completely change how information is displayed without having to regenerate the basic content. Because it works by displaying Nodes in Formats, there are no ".html" pages like there are in a traditional static web site. Instead you simply call up a node. Nodes can have names as well that are aliases for the node. So calling up this url displays the Getting Started page:

http://county.oregondemocrats.org/node/35

and so does this one:

http://county.oregondemocrats.org/getting_started

And calling up this url displays a page that contains the Titles and "Teasers" for all the press releases (each of which is a node) on the DPO web site:

http://www.oregondemocrats.org/news

Drupal makes it easy to have pages that display the content of a single node, like an ordinary web page, or that display specific data, like Title and Teaser, from all the nodes of a particular type.

2. You have some choices about how you create the HTML code on your pages.

Whenever you have an area to enter some text, Drupal displays some input choices just below it:

The first choices is "disable rich-text" (or "enable rich-text"). This turns automatic HTML generation on and off. If you are in rich-text mode (the link says "disable rich-text") then you content is displayed just like it will look on the finished page, and you get a WORD-like toolbar over the text that you can use to apply formatting, insert images, etc.

If you are NOT in rich-text mode (the link says "enable rich-text"), then the box where you enter content shows you the actual raw HTML code, and you can edit it the old-fashioned way if you need to.

You also can click on the button for "Input Format" and choose how much automation you want on the content you enter. The editor will strip out content you put in that does not match the format. That is, if you select "Filtered HTML" and you type in the code for a form or table, it will throw out that code. So if you discover that you're not getting what you expected after entering some HTML code, check your input format setting to see if that's the problem.

This WYSIWIG editor likes to "eat" certain kinds of code. This includes forms, Paypal donation forms, image maps, and css.

If you frequently need to enter raw html code, you can set your personal settings so that your WYSIWYG editor is turned off by default. (Under My Acount). This stops you from accidentally breaking code on your site. You can still easily turn on the editor by clicking the "enable rich-text" link under the Body text area.

One such item that can be broken by this editor being on is the "full-width css" block. I created this block to add css to those pages that need to be full width (no right-hand column, the main body would flow under the entire area under the banner & menu). If you open this block up while you have the WYSIWYG editor on, it will no longer function properly.

3. The WYSYWIG Editor Bar

Drupal gives you an easy-to-use tool bar to add bold, underline, links, images, etc. It shows up on all content creation/edit pages, as well as block edit/creation pages.

(Click for larger image)

Most of the tools are obvious. The "chain link" is used to create a link on selected text or graphic. The broken chain removes the link. The little tree is used to insert an image. One other extremely important tool is the "Paste From Word" tool, a little clipboard with a flying W on it.

Microsoft WORD creates text that introduces numerous problems in an HTML page. It tends to retain a lof formatting commands from WORD that do not translate well or at all to the web. It also retains what are called "high-order characters" - characters outside the normal character set that the web generally work with. Examples of this are n-dashes, curly quotes, curly apostrophes, elipses. If copy text that contains these kinds of characters and just paste it into the content box, the page is likely to be displayed with question marks or black diamonds or fractions in it, at least for some users. These are the high-order characters being mis-rendered. You can prevent this by simply clicking on the Paste from Word tool, paste the content into the resulting window, and the click Insert to place it into your page. The Drupal editor will clean out all the problem on the way. It's wonderful!

4. Uploads are stored in the files directory

Each site has a files directory. The url into the files directory is

http://[countyname].oregondemocrats.org/sites/[countyname].oregondemocrats.org/files/

or, from inside the site, use a relative reference of:

/sites/[countyname].oregondemocrats.org/files/

If you upload a document or graphic as an "attachment" to a page, that's where it will go. If you upload a graphic using the image gallery, it does into files/images. You need to know this to reference the document or graphic properly in other places. After you've uploaded something as an attachment to a page, it shows you the url for the attachment right below the attachment box.

Changing your banner

Want to change the banner on your county's site?

Log in.
Go to the admin menu, then click on Themes.
To the right of your theme's name, click on Configure.

(Click for larger version)
On that page you can upload a banner (logo) as well as a shortcut icon (also known as favicon).

(Click for larger image)
Submit your changes.
Refresh your browser to show the changes. You may need to clear your browser's cache.

Note: When you upload the banner, it will change the filename to themename_logo.FILETYPE. This will be stored in your site's files folder. File type could be .jpg, .gif, etc.

The shortcut icon is that little graphic that shows on tabs in Firefox, IE, etc.

(Click for larger image)

How do I create a banner?

To create a banner for your web site, you are going to need access to a graphic design program, such as Photoshop, Photoshop Elements, Paint Shop Pro, etc.

In that program, create an image to fit in the banner space. The space is currently 800 pixels wide by 100 pixels tall.

Once you've created it and saved it as a jpg or gif. Gif is typically used for images that have a transparent background.

Then you can follow the steps listed above to upload your banner.

If you've never created graphics like this before, you may want to find a volunteer who can do it for you.

Calendar items

Each site comes with a built-in calendaring system.

A graphical calendar and events listing page have been created for you. The calendar is located at /calendar. The listing page is at /event/listing. You add items to the calendar and the event listing by creating a new item of type "Event". Any event you add to the page will be automatically added to these two pages. Events are shown in date order on the event listing page (past events are not shown).

You can do repeat events.

To add an event

Click "create content" in the left-hand sidebar.

Click "Event" on that page.

This brings up the add an event page.

Fill in the date/time the event begins and ends.

Fill in the event name, teaser, and the event description (body).

(Click for larger image)

It is important that you fill in both the teaser and the description.

The teaser is used on the auto-generated events listing page.

The description is used on the page people go to if they click on a link to the event (such as on the calendar view).

Try to keep the teaser short -- just use a quick description for the event. For full details people will always be able to click on the event name to see the full description.

Click submit.

Your event is now on your calendar as well as on the event listing for your site (/event/listing).

Editing events

To edit an event, click on the event name either on the calendar view or in the upcoming events view. Both will take you to the full event listing.

Click on the edit tab.

There you can edit the event's details.

You can also find the full listing of events by going to the content administration page on your site (/admin/content/node) and filtering for node type.

To delete an event

Follow the directions above for editing an event.

At the bottom of the page is a Delete button. Click on it.

Drupal will confirm you want to do this before it actually deletes it.

The side columns

The columns on either side of the main body of the site are called sidebars. There is a left sidebar and a right sidebar.

Currently, on the county sites only the left sidebar shows for users who are not logged in. The right sidebar appears once you're logged in. It contains the Navigation menu and the administer menu.

Since the right sidebar is text heavy, it is set to have the white background. The left sidebar has no background, so you instead see the background of the web site.

All of the information in the two sidebars are "blocks." You can access the blocks under the administer menu (/admin/build/block).

You can control where the blocks will show. Most often you're going to use the left or right sidebars.

You can also control in what order the blocks show up in based on their weight -- smaller items float to the top.

You can use the blocks already created for you (such as search, log-in, etc.), or you can create ones of your own.

Choosing when/where the blocks show up

You can also control when/where the blocks will show up. This is handy for when you want an item to show up only on specific pages, such as a table of contents for your monthly newsletter.

Click configure next to the block you want to edit, Scroll down. Towards the bottom are "Page specific visibility settings" where you can choose when and where the block shows up.

(Click for larger image)

Making your main content use up more of the page

The above tip is also a good option when you have a page that needs to be wide and you don't want the left-hand column to show. You can turn the blocks off for those specific pages, which allow the page to fill the entire area underneath the banner and menu.

Because of the way the right-hand sidebar is formatted, the above tip only works when hiding the left sidebar, not the right.

All of the county sites, except Washington and Yamhill, have a block set up that is called "full-page css." This block adds css to the page that allows the main content area to stretch across the entire area under the banner/menu.

It is currently set up to be used on one admin page and the calendar page.

Please note: Before you click configure on this block item, click on "my account" in the left-hand column. Then click edit. Scroll down to where the tinymce options are displayed (they'll be minimized). Click on the name to expand it. Set it to false. Submit the page. This is extremely important, as the WYSIWYG editor will eat the code in this block if you open it with the editor turned on. You can turn it back on after you edit this block.

(Click for larger image)

TinyMCE screenshot

To add it to additional pages, click configure to the right of the block name and then add those page URL addresses to the bottom section:

Block location

Save the block.

You'll also need to go to the blocks you currently have set to show up in the left-hand column and turn them off for the page(s) you want to show at full width as well. You'd do it the same way shown above.

Changing the footer

To change the footer, go to the Site Information page from the administer menu (/admin/settings/site-information).

There you can change what text is put in the footer.

footer screenshot

You will need to use paragraph breaks and line breaks in order to put text on separate lines.

If you want text directly on the next line, use at the end of the previous line.

Example:

Line one's text here. 
Line two's text here. 

Looks like this:

Line one's text here.
Line two's text here.

If you want text to skip a line, which is in effect creating a new paragraph, use the paragraph coding. If has an opening piece of code and an ending piece of code. This is different than the line break, which only has one piece of code.

Example:

Paragraph one here.

Paragraph two here.

Looks like this:

Paragraph one here.

Paragraph two here.

Failure to use the line or paragaph breaks will cause your footer text to run together on one line (or multiple lines if there is too much text to fit on one line).

Online contributions

Looking for a quick and easy way to take contributions over the Internet?

Act Blue can help!

Their service is now available to every county party within Oregon.

With Act Blue, you can take donations, including recurring donations, sell event tickets, and more.

A few counties in Oregon have already begun using the service, including Yamhill County. Multnomah County is using it in addition to its regular credit card processing services. Since Act Blue doesn't cost a thing until it is used (and then only a small processing fee), it makes sense to take advantage of it. After all, millions of people around the country are visiting Act Blue and making donations.

Getting online with Act Blue means that those looking at Oregon's fundraising pages can easily find you and donate.

This service is especially helpful for those counties who don't currently have a credit card processor, but are working on new web sites. There's no fees to sign up with Act Blue, and it's pretty easy to do.

E-mail them at info@actblue.com for more information.

Link anchor

What is a link anchor?

An anchor allows you to link to content within the same page. This is regularly used on items such as newsletters, which have a Table of Contents at the top of the page that then link to items further down the page.

It can also be used to link to that portion of the page from another page on the web site. However, doing so is a bit more difficult since you won't have access to a drop down listing of anchors.

Creating an anchor within your page

Click next to the area you want to link to. This could be at the beginning of the title for that page. You do not need to highlight anything.

Click on the anchor in the WYSIWYG editor. This brings a pop-up window.

link anchor screenshot

Name your anchor. Keep it short, without any spaces.

Hit insert.

This adds the anchor to that spot on your page.

Go to where you want to link from, such as your Table of Contents. Highlight the text you want to link, and then hit the chain icon in your WYSIWYG editor.

Inserting a link

Put in the page name that you're currently on as the Link URL. This is very important, otherwise the anchor will not work. If you don't know the URL for the page you're working on, "Submit" the page and then edit it. This will allow you to see the node/# address to the page. If you've set a URL path for the page (such as "home," "about_us," etc.), that is the Link URL for that page.

On the Anchors drop down, choose which anchor you want to use. It will only show you anchors on the current page.

Hit insert.

Now you have linked that text to the section further down the page.

Linking from one page to an anchor on the other page

Doing this is more difficult than linking within the page, as you will not have the drop down listing of anchors to choose from.

Set up your anchors on the page as shown in the above example. I recommend writing down the names of all your anchors so you'll remember their exact name. You'll need this for when you create the links on your other page. Also write down the URL for the page these links are on (such as http://county.oregondemocrats.org/Junenewsletter or http://county.oregondemocrats.org/node/165).

Once your anchors are in place, submit the page. Then go to the page where you want to create the links. Hit edit.

Go to where you need to put the link. Highlight the text and click the link (chain link) icon.

For the Link URL, type in the address to the page you're linking to (JuneNewsletter, node/156, etc.) and then a # sign and then the anchor name.

Example:

http://county.oregondemocrats.org/JuneNewsletter#Measure37reform

Hit Insert.

This will link the text to an anchor on another page.

What is a node?

You'll notice that throughout your Drupal installation, and these tips, that the word "node" is used a lot.

With Content Management Systems (CMS) like Drupal, nodes are the actual content within the site. They can be pages, events, forum postings, and more.

Drupal and its modules come with several node types - web page, book page, event, forum topic, and blog included.

Advanced users can also create their own node types. This is used on the DPO site where we have it set so you can submit a biography, resolution, etc. and they are automatically added to the correct pages. The items on the form are customized to meet the needs of the node.

For example, the resolutions node type collects the resolution's sponsor, date approved, and a "teaser" for the resolution.

A "teaser" is a shorter version of the full node. When a block for a teaser is available on the node creation page, it allows the user to have full control over the content of the teaser. This is often a synopsis of the page or the first few lines/paragraphs copied from the body.

How do I get images for my site?

A frequently asked question has been: how do I get images for my site?

People are looking for images for things like contribute, volunteer, and more.

Below we've added some graphics that are free for you to use.

They come from the DPO, DNC, and Multnomah County Democrats' web sites. Feel free to post images that you'd like to share with fellow Democrats as well.

Note: The border around the images are not a part of the image.

To save an image, right click on it and select the option for saving the image (this varies between browsers and operating systems).