Drupal: Getting Started Guide

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'salso 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.

To be able to submit feedback in the forums and such, you'll need to log into our site. 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 people a quick and easy way to find answers to their questions.

How do I get started?

These help pages are designed to help you convert the basic installed site into a site tailored for you. 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:

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.

More help:

Logging In to Your Site

Go to your web site and look for the log-in block/link in the left-hand side block. It should look like this:

Log in block

You can tell when you're logged in because a menu should show up that has the create content link, administration menu, etc. The title of the menu will be your user name.

navigation menu

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 on the"log out" entry at the bottom of the administrator 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 Info screenshot
(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 Drupal 101 site, the text in the left-hand corner will say"

Site Information | Drupal 101

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

Site Name screenshot

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.

Adding images and files

Adding an image or file to your site is easy with the WYSIWYG editor. Both work almost exactly the same, as it is controlled by the same module.

Adding an image 

First, click on the icon that looks like a little tree.

adding an image

 

This will pop up a window (see below). Click on the icon that looks like a file directory. 

adding images
(click for full sized image)

 

This will pop up another window where you can upload files. 

adding images
(click for full sized image)

 

You can browse and upload additional files, or you can select a file that has already been uploaded.

If you'd like to organize your files into folders, you can create the folders via FTP and then use the drop down box under the file listing to select which folder you want to work with.

You can select the image you want either by clicking on add to the right of its name or clicking on the image's name and then clicking on the image when it pops up in that blank area in the box above.

You'll then be taken back to the first pop up window.

You have to input an image description. It's good to input a good, short description since Google and other search engines do pay attention to those.

If you want to align the image to the left/right or anything like that, click on the Appearance tab.

adding an image
(click for full sized view)

Once you're finished, hit Insert and the image will be added to your page.

Adding a file

Adding a file works almost exactly like adding an image, except you'll need to highlight the text to be linked first, and then click on the button that looks like a link in a chain.

adding a file

The rest works pretty much the same way - a window will pop up. Click on the directory button.

Browse and upload your file.

Click add to the right of the file's name to add it to your page.

You'll be taken back to the first pop up window. Here you can either hit Insert to finishing adding the link, or use advanced options like forcing the link to open in a new window (helpful if you're linking to a page outside of your own site).

The Navigation 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 Navigation Menu when you're logged in. This is the menu that is titled by your username.

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. Times you would need FTP access include 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.)

WYSIWYG editor screenshot

(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.

menu

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, click on the "status report" link. This will tell you what you need to do. It could be that your modules have an upgrade available, that you haven't run the cron file in a while, etc.
Warning box screenshot

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.

Some of the itema listed below, such as image galleries and content templates, are contributed modules that will only be available if you add them to your Drupal installation.

Content management

This is where you can:

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

Site building

This is where you can:

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:

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:

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

Mult Dems screenshot
(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.

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

Blog for Oregon screenshot
(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:

bottom of page screenshot

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: <!--break-->

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.

Changing your banner/logo

Want to change the banner/logo on your site?

  1. Log in.
  2. Go to the admin menu, then click on Themes.
  3. To the right of your theme's name, click on Configure.
    Configure theme
    (Click for larger version)
  4. On that page you can upload a banner (logo) as well as a shortcut icon (also known as favicon).

    Theme Config
    (Click for larger image)

  5. Submit your changes.
  6. 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.

favicon screenshot
(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.

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 someone who can do it for you.

The size of the banner/logo you can upload depends on the settings for your theme.

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.

Some themes only utilize one sidebar. Anything added to the other sidebar will be placed in the sidebar that is used by the theme.

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.

blocks page screenshot
(Click for larger image)

Making your main content use up more of the page

Using the page specific settings is a good option when you have a page that needs to be wide and you don't want the left-hand and/or right-hand column to show. You can turn the blocks off for those specific pages, which allow the page to fill up a larger area.

Please note: this may not work for your theme if the main content area has a specific width set to it. You'd need to create a block with css in it that is used just for those pages you want full-width.

 

Save the block.

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 <br /> at the end of the previous line.

Example:

<p>Line one's text here. <br />
Line two's text here. </p>

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:

<p>Paragraph one here.</p>

<p>Paragraph two here.</p>

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).

Links and Link anchors

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://www.nu-look.net/guide/drupal_getting_started_guide or http://www.nu-look.net/guide/node/3).

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 (drupal_getting_started_guide, node/3, etc.) and then a # sign and then the anchor name.

Example:

http://www.nu-look.net/guide/drupal_getting_started_guide#Measure37refor...

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.

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.

Teasers are not available by default. You either need a module that creates them, or one needs to be added via the Content Creation Kit (cck).