Quickstart Guide: How To Build A Great Drupal Website

TopNotchThemes Quickstart Guide
BUILD A GREAT
DRUPAL WEBSITE
with your new theme from
You + Drupal + TopNotchThemes = Win!.....1 Creating content ..........................................9

Before you start… The front page
How we’ll build the website Contact page
A note about this guide Posting blog entries
Categorizing content
The basics ....................................................2 Making HTML-styled pages with images
Installing your TNT theme Making custom content types
What if I want to rename my theme? Creating CCK content
One more thing…
Manipulating content display....................16
Configuring your site ...................................4 Blocks and block regions
Basic site configuration Menus
Theme configuration options Views
Installing recommended modules
How can I get more help from TNT? ..........24
Copyright 2009, TopNotchThemes
Gallery of TNT themes ...............................24
TopNotchThemes Quickstart Guide: Build a great Drupal website with your new theme from TopNotchThemes 1
You + Drupal + TopNotchThemes = Win!

Congratulations on your decision to use a TNT theme for your
website! Your choice may have saved you dozens of hours over
creating a Drupal theme from scratch or tweaking a non-Premium
theme from another source.
But in building any website, you’ll need certain skills to make it

work the way you want. Specifically, you need to know:
• How to install Drupal modules and themes;
• How to configure your site’s basic information;
• How to add content (nodes) to your site;
• How to change content appearance through blocks,
views, and other tools.
This guide will show you what you need to know to create a website similar to our screenshots using any
of our themes, including the free Acquia Marina (available at drupal.org/project/acquia_marina). It is not,
however, a full Drupal tutorial. If you need help and don’t find the answer here, we recommend trying the
resources at drupal.org/support first. Still having trouble? TopNotchThemes provides up to an hour of one-
on-one help to our customers: See our contact information at the end of this guide for details.
Before you start…

Just about anyone with patience and problem-solving ability can build an attractive, functional, dynamic
site with Drupal and TNT themes. But you will need some resources already in place before you dive in.
• Basic computer skills. Specifically, this guide assumes that you’re familiar with using web-
based applications that require you to navigate from screen to screen, enter information in
forms, and understand such concepts as user permissions and links. You’ll also need access to
your web server through FTP or SSH to install modules and the theme, and may also need
additional skills to build your full website, notably with graphic design programs and payment
systems. Those skills are beyond the scope of this guide.
• Drupal installed and running. All of TNT’s themes run on Drupal: We currently don’t offer
designs for other CMSes such as WordPress or Joomla.
• Administrative access to your Drupal installation. Ideally you would be the superuser —
that is, the first account created when you install Drupal, and which has all-access permissions
to administer a Drupal site. At the very least you’ll need permission to create content and
administer content types, views, blocks, and themes.
• Firefox or Internet Explorer 7 (or later). While our themes look good in all major browsers,
these are the ones that most visitors will be using, so using them yourself guarantees that your
experience of the site comes closest to theirs.
Copyright 2009, TopNotchThemes, All Rights Reserved • TopNotchThemes.com • Revised: 5 January 2009
But enough prologue. Let’s get cracking!
How we’ll build the website

We’ll build the site in four stages:
1. Basic configuration of Drupal and the theme. Many simple settings deeply affect how
your website looks. We’ll discuss both those settings built into Drupal and those unique to TNT
themes.
2. Creation of content. We’ll tell you how to create pages and blog posts, how to promote any
content to the home (“front”) page, and how to define your own content types using the
Content Construction Kit (CCK).
3. Manipulation of that content into useful and interesting formats. After you’ve created
some content, we’ll show you how to use Views and Blocks so the information they contain is
clear and concise.
We’ll demonstrate using a variety of TNT themes. Most of the features you see here are common to all of
our themes, including block regions, per-type metadata display settings, and flexible CSS. If you have
questions about a theme’s appropriateness for a particular use, send us a note — our job is to provide
the best theme for your application.
A note about this guide

Whenever we direct you to a website page, we cut out the “http://” and (if it’s your own site) the
domain name. So if your website’s home address is http://www.example.com, we might say
“/admin/build/modules” to mean “http://www.example.com/admin/build/modules”.
Any parts of a website address that changes from situation to situation are given in square brackets, for
example “admin/build/themes/settings/[theme_name]”. To reference a page on someone else’s website,
we also give the domain, for example “drupal.org/project/pathauto”.
Website addresses are given as unformatted text, while locations on the server (i.e., those reached
through an FTP or SSH program rather than a web browser) are given in italics.
The basics
Installing your TNT theme
TNT themes install in the same manner as any other Drupal theme: Here are the details.
1. Download and uncompress your TNT

theme package. TNT themes come as
compressed .gz files, which you double click to
unpack. The result is a folder containing “extras”,
“documentation”, and the theme package itself
(in this case, Fresh Start).
2. Move the theme package to its

destination. Typically that would be to the
/sites/all/themes directory of your Drupal
installation, although other options are possible.
3. In a web browser, go to
/admin/build/themes. Click the Enabled
checkbox and the Default radio button. Then
scroll to the bottom of the page and click “Save
configuration”.
4. And there it is! Your TNT theme is ready to be

used. (Your screen will look slightly different from
this.)
What if I want to rename my theme?

That’s easy! Just follow these steps:
1. Select another theme. Changing the default theme’s name could cause problems. To change
to another theme, see Step #3, above. (We recommend you change it to Drupal’s built-in theme,
Garland.)
2. Change the name of the theme’s folder. In the example above, that name is
“tnt_freshstart_6”. This name can contain only letters, numbers, and underscores — no spaces!
This is the “machine-readable name” that Drupal uses internally: In Step #4 you’ll have a
chance to give it an “human-readable name”, with spaces.
3. In the theme’s folder, find the file with the theme’s old name + “.info”. Give that file
the same name as you gave its enclosing folder.
4. Open that .info file and change the text after “name = “. This will be the theme’s
human-readable name.
Now when you go to the theme administration page at /admin/build/themes, you’ll see the theme’s
new name.
One more thing…

Before you start working on your site, we recommend you change the administrative theme to Drupal’s
default, “Garland”. While this isn’t strictly necessary, we’ve found that doing so allows us to work
quicker and with less distraction, since administrative functions will always look the same no matter
what theme we choose. You can make the change at /admin/settings/admin. (But we won’t follow that
advice in this guide’s screenshots: We want to show off our themes!)
Configuring your site

Basic site configuration
Now you’re ready to put in the basic information about your site, such as its name, slogan,
administrative email address, and footer message (if any). All of these settings are made at /admin/
settings/site-information, and appear on the site’s front page as you see below.
But how does a “Slogan” differ from a “Mission”? Here’s an explanation of some of the form’s fields.
Name: This shows up in the title bar of your browser when you visit the site, and optionally at the
top of every page if you’ve turned on the “Site name” option at /admin/build/themes/settings/
[theme_name]. The Name can contain HTML entities (for example, é for é).
Slogan: A short blurb that shows up in the browser’s title bar on the site’s front page, and also in
the header next to the Name if you’ve turned on the “Site slogan”option at
/admin/build/themes/settings/[theme_name].
Location of site information in the “It’s The New Black” theme. (Placement varies from theme to theme.)
Mission: A blurb that shows up on the site’s front page only, usually near the top.
Special TopNotchThemes feature!

In most TNT themes, you can choose to have the Mission show up on every page
instead of just the front page by selecting “Display mission statement on all pages”
at /admin/build/themes/settings/[theme_name] -> Theme-specific settings ->
TopNotchThemes settings -> General settings -> Mission statement.
Footer message: This appears at the very bottom of every page, below even the “footer” regions
for blocks. It can be full HTML, and in fact many designers put links in this area.
You can find out about other fields on this page at drupal.org/node/43794 (“Anonymous user” and “E-
mail address”) and drupal.org/node/15364 (“Default front page”).
Theme configuration options

Many controls for changing the behavior of your site-wide theme are available by going to
/admin/build/themes and clicking the “configure” link next to the theme. (If there’s no “configure” link,
you’ll need to enable the theme. First check the Enabled box, then scroll to the bottom of the page, then
click “Save configuration”. The “configure” link will then be available.) Alternately, the direct URL for a
theme-configuration page is /admin/build/themes/settings/[theme_name].
Additionally, you can change certain settings for all themes by clicking the Configure tab at the top of
/admin/build/themes, or go directly to /admin/build/themes/settings. In this guide we’ll generally discuss
only theme-specific settings.
If you’ve used a theme from somebody other than TopNotchThemes before, you’ve probably been
surprised at the huge range of options available in our designs for Drupal 6 and later. While the sheer
number of them may seem overwhelming at first, the good news is that your site will look great even if
you never touch any of them.
But for those who want more control over their site’s appearance than you can get from any other
theme provider, here are clarifications of some of TopNotchThemes’ special theme configuration options.
Mission statement: With this setting, you can choose whether to show the Mission statement on
only the front page — Drupal’s default — or to make it appear on all pages. This setting only takes
effect if you’ve chosen to display the Mission statement under the “Toggle display” section, which
you’ll find at the top of the same theme configuration page.
Breadcrumb: This setting lets you display the the page-location information known as a
“breadcrumb”, which is usually seen near the header. For example, a FAQ page might appears with
the breadcrumb “Home / Frequently Asked Questions”.
Username: This setting (“Display "not verified" for unregistered usernames”) refers to text that
appears when “unregistered” (i.e., Anonymous) users post comments. Of course this setting only
takes effect if you permit Anonymous users to comment.
Search results: Settings in this section let you control the amount of information that visitors see
when they search the site. Here, we compare search results with Drupal’s default settings (on the left)
to the same results with all of the additional information disabled.
Search results with Drupal’s default settings. Search results that take advantage of TopNotchThemes’
ability to turn off all distracting extra information.
Theme shown: Hip Two Oh
Node settings: By default, Drupal displays

certain information about a node, regardless of its Learn something new…
content type. Further, administrators usually don’t Exposing hidden options
have control over the “Read more” and “Add new To avoid cluttering up the theme
comment” text that appears after many nodes. The configuration page with an overwhelming
settings in this region allow you to vary how all multitude of options, we’ve grouped them
this information displays on a content type-by- into categories such as “Node settings”
content type basis, or to keep it consistent among and “Search engine optimization (SEO)
content types.
settings”. We’ve then “collapsed” these
categories, so when you visit the page, you
TNT themes provide node settings to control the
display of three types of information: only see the category names. To expose the
settings in each category, simply click on
• Author & date (e.g., “Posted on Wed, the category name. Some categories
07/16/2008 - 17:29 by admin”); contain other categories, so you may need
• Taxonomy terms, which are hidden by to click several times to “drill down” to the
default; and setting you want.
• the “Read more” and “Add new
comment” links.
For each of these settings, you can choose to have all content types display the information in the
same way (“Default”), or vary settings depending on content type.
Let’s say you want author & date information to appear throughout the site except on Pages. You
would:
1. Check the box “Use custom settings for each content type instead of the default above” under
the “Author & date” area;
2. Click the word “Page” to reveal options for that content type; and
3. Uncheck both “Display author's username” and “Display date posted”.
Because you checked that “Use custom settings” box, you’d also have to look at the author & date
settings for other content types to make sure they were as you wanted.
Keep in mind that here, as elsewhere in Drupal, similar settings are sometimes found in several places.
In this case you can change where author & date information appears; but to change its format, go to
/admin/settings/date-time.
Search engine optimization (SEO) settings: These settings give you more control over how
your site appears to search engines such as Google.com and Yahoo.com. The two settings are for:
Page titles: These settings change what text appears in your browser’s title bar when you
visit the site, and your decisions here are among the most important for improving your site’s
visibility in search engines. These titles are usually in two parts with a
separator in between them, for example

“Acme Integration Corp. || Welcome to our
site”. You can force Drupal to display any
of four common patterns, or display any
custom (non-HTML) text you choose.
Further, you can change the separator (“||”
in this case) and make the front page’s
title bar appear different from those of the
site’s other pages.
Meta tags: This setting allows you to

change (somewhat) how your site is
categorized and described in search
engines. While the “Meta keywords”
setting isn’t as useful as it was in years
past, the “Meta description” setting often
defines the “preview” potential visitors
get when they find your site through a
search engine — and can be useful for
luring them in.
SEO is an industry unto itself, and Here we see the node settings to change whether the author
and date show up on certain content types. Because the “Use
TopNotchThemes can’t advise you on how to
custom settings...” box is checked, the settings in the Default
adjust these settings to improve your standing
section are ignored; ergo, both the author name and posting
in these search engines. Regardless, the fact
date will show up on Blog entries. Theme shown: Hot Pink
that you can make such adjustments means that
sites with TNT themes can give you a significant
edge in a competitive field.
Installing recommended modules

Most Drupal sites use modules that aren’t in Drupal’s core download, and we’ve created our themes to
take advantage of some of the more common modules. You can download these individually at
drupal.org, and they’re all included as part of Acquia Drupal (acquia.com/downloads).
CCK (Content Construction Kit): Allows you to create content types with field types not
otherwise found in core Drupal. For example, you could create a Flickr-like photo-sharing site by
allowing members to create nodes of the content type “Photo”, which includes an image field,
caption field, and perhaps also a custom field indicating when the picture was taken. We’ll show you
how to do exactly this in the section, “Creating content types using Content Construction Kit (CCK)”.
In addition, these custom fields also come into play when designing Views, as is described in the
section on that subject later in this guide. (drupal.org/project/cck)
Views: This module permits you to design alternate ways of viewing nodes, either individually or as
a collection. The Views module is one of Drupal’s most complicated — and useful — modules. We’ll
step you through the process of using it later in this guide. (drupal.org/project/views)
We’ll mention other useful modules as we encounter them.
Creating content
The front page
If you’re used to building web sites the old-fashioned way you might wonder, “How do I make a home
page?”. In traditional HTML coding you would simply create a file called index.html, but in Drupal any
node can become home page material: Simply check the “Promoted to front page” box under
“Publishing options” when you create or edit the node, and you’re golden.
This node will always be prominent at the

top of the front page because we’ve also
checked “Sticky at top of lists”. That’s
especially useful if your front page contains
more than one node.
For further guidance, we like the screencast Creating the front page by promoting a node.
“Custom Drupal Homepages”, at Theme shown: Bordeaux
mustardseedmedia.com/podcast/episode11
Contact page
A simple contact page comes built into Drupal: To enable it, simply check “Contact” at
/admin/build/contact, and it becomes available at /contact. You can then adjust the form’s settings at
/admin/build/contact, and create a prominent menu link leading to it at /admin/build/menu-
customize/primary-links. This contact page allows visitors to send you email with their name, address,
subject, and message, and little else.
But Drupal’s built-in contact system has its limitations. To create a more-elaborate contact form, we
recommend building it using the Webform module (drupal.org/project/webform).
Posting blog entries

Creating a blog is easy: Each blog post is simply a node of content type Blog! The basic Drupal package
includes this content type, but leaves it turned off by default: To turn it on, go to /admin/build/modules.
Blog posts differ from Pages in two main ways. First, they’re promoted automatically to the front page,
where they will appear below nodes that have been defined as “sticky”. (See the section above about
“The front page” to understand sticky nodes.) Second, Drupal automatically creates a page that contains
blog posts from all users, at /blog, and further pages for posts from individual users at /blog/[user
number]. To give visitors easy access to these blogs, you might want to create menu items that lead to
them: To understand how, see the section below, “Menus”.
Further, the “Recent blog posts” block provides a quick summary of recent posts that can be placed in
any block region on the page. To learn how to do that, see the “Blocks and block regions” section
below.
Categorizing content
Drupal shares a feature with WordPress, Joomla, and many other modern content-management systems:
The ability to categorize content with “tags”. A good example would be if you run a website about
bicycles, and post a blog entry about restoring an old Schwinn with sparkly paint. You might tag that entry
as being about “restoration”, “paint”, and “Schwinn”. Those tags will appear as links at the bottom of
the post if you’ve enabled this option at /admin/build/themes/settings/[theme name], and clicking on any
of them will produce a page of other posts about the subject. This way, you can build up pages of highly
relevant content bit by bit, simply by tagging each post when you create it or at any later time.
This system of categorization is called a

taxonomy, and controls that allow you
(and others) to tag your posts are at
/admin/content/taxonomy.
There, you first set up a Vocabulary,

which is a set of related tags. In our
example above, you might have
organized tags into one Vocabulary, so
that all three terms are part of “Bike
tags”. Or you might decide to split Types of tags vary depending on which boxes you check in a Vocabulary’s
Settings. From left to right. 1) Simple tags, where you can only select one
these tags into several Vocabularies,
at a time, created by leaving all boxes unchecked; 2) Tags where you can
where (for example) Schwinn might go select multiple options, created by checking “Multiple select”; 3) Free
into a Vocabulary “Brand names” tagging, created by checking “Tags”. For this last option, Drupal
which also contains the terms “Huffy”, automatically suggests existing tags as you type.
“Raleigh”, and so forth. Such decisions
are usually made based on a site’s size and complexity.
For simplicity’s sake, we’ll assume you put all tags into that one vocabulary. To set it up:
1. Click the “Add vocabulary” tab at /admin/content/taxonomy.
2. Enter the vocabulary name. This is a human-readable name, such as “Bike tags”. Optionally,
you can also add a Description of the vocabulary and Help text.
3. Check the boxes for the content types where you’d like to be able to apply these
terms. Let’s say that you run a bike shop, with content of type Page and Blog. You might only
want blog entries to be tagged, as you use the content type Page for business content that
doesn’t need tagging, such as directions to your shop. In that case you would only check the
Blog box.
4. Indicate how you want tags entered, as is illustrated in the graphics above. Additionally,
you can force people to tag content when they create it by checking the Required box, and
arrange Vocabularies by giving the ones you want to appear first a lighter (i.e., lower) Weight.
5. Click Save.
Now when you create or edit a node in the content type you indicated — in this case, Blog — you’ll be
able to add tags to categorize the content. You can also use Views to change how nodes marked with
certain tags are displayed, for example showing a picture of the Raleigh logo next to all posts about
Raleigh bikes (with the addition of the Taxonomy image module, drupal.org/project/taxonomy_image).
For an introduction to Views, see the section “Manipulating content display”.
With TNT themes, you have more control over taxonomy display than with most other themes: You can
decide which vocabularies to show, and in what format, by changing settings under “TopNotchThemes
settings” at /admin/build/themes/settings/[theme name]. For example, you may want to use one
vocabulary for internally organizing or controlling the display of your content, but another for public-
facing categories. These settings allow you to select which terms will be displayed on the content itself.
Making HTML-styled pages with images

Out of the box, Drupal is great for managing basic information without styling or graphics. But many
beginners get frustrated when they try to create something a little more alluring, as Drupal doesn’t come
with a styled-text editor or graphic tools. Both are available in numerous modules, of course: FCKeditor
(drupal.org/project/fckeditor) and the YUI Rich Text Editor (drupal.org/project/yui_editor) are two that fill
the first need, while IMCE (drupal.org/project/imce) and ImageCache (drupal.org/project/imagecache),
and several others fill the second.
But we’re going to show you how to create a page like the Executive Bio one to the right using only
Drupal’s built-in components. (This page can also be created using CCK and Views, as we’ll show you
later.) This process we’re going to show you first is frankly a bit of a workaround, but it’ll introduce you
to a simple way to add images and formatting to a Drupal page.
You’ll have to be logged in as a user that has access to

the “Full HTML” input format. By default, Drupal only
gives that access to the “superuser” — that is, the user
created when you first installed Drupal. You can give
that access to other users on the “Input formats”
administration page at /admin/settings/filters; for more
information about permissions and roles, see /getting-
started/6/admin/user/permissions and
/getting-started/6/admin/user/roles, respectively.
1. Turn on Drupal’s Upload module at

/admin/build/modules.
2. Make sure files will be put where you
want them on the server by checking the An example of HTML-styled text.
settings at /admin/settings/file-system. Theme shown: Green World
3. Create a node of content type Page by
going to /node/add/page.
4. Fill in the Title and Body, using HTML in the Body field as you like. Leave out the
graphics for now. To learn how to use HTML, see w3schools.com/html.
5. Click the “Input format” link on the node editing page and select “Full HTML”. By
default, Drupal allows you to create pages using only a subset of HTML tags called “Filtered
HTML”, which omits many of the tags you see in this example (such as <h1> and <img>).
6. Click the “File attachments” link and upload your graphic files, one at a time.
Underneath each successfully uploaded graphic you’ll see the URL showing where it’s located
on the server — typically at
/sites/default/files/[file name].
7. Uncheck the List box next to
each graphic. If you fail to do
this, your graphic might appear
twice — once where you want it, Attaching a graphic. Theme shown: Extra Extra
and once at the bottom of the
node.
8. Go back to the Body field and insert the graphics, using their new URLs. In this
example, we used the CSS property “float” within a <div> tag to gain pixel-precise control over
graphic positioning. The specific code here is:
<img src="/sites/default/files/headshot.jpg" style="float: left; margin: 0 15px 15px 0;" />
For more information about CSS properties, see w3schools.com/css/css_reference.asp.
Making custom content types

So now you’ve seen how to create Pages and Blog posts, which come built into Drupal. Now we’ll show
you one of Drupal’s most powerful features: the ability to create your own content types with unlimited
custom fields. Your key to this castle is the Content Construction Kit, or CCK (drupal.org/project/cck).
CCK is useful on its own, and lets you create number and text fields, along with those that reference
users and other nodes. But to get its full effect — keys to the castle rooms, so to speak — you may
want to download additional modules that add CCK fields formatted as:
• Addresses
• Currency
• Media files, such as audio and video
• Email addresses
… or any of a wide range of other types. A

list of such modules is at drupal.org/project/
Modules/category/88. Most of these modules
have no direct interface at /admin, but
instead subtly change the way you create
content types by adding new fields, options,
and controls. As always, read a module’s
documentation if you’re unsure of how it
works.
CCK’s interface for creating fields.
Theme shown: Nice Threads
We’ll demonstrate CCK by making a content
type called “Executive” with fields for an
image, name, position, and bio. You’ll first need to install the ImageField module, which is available at
drupal.org/project/imagefield. You’ll also need to install two additional modules that ImageField
requires: FileField (drupal.org/project/filefield) and ImageAPI (drupal.org/project/imageapi).
1. Turn on the relevant modules at /admin/build/modules. You can safely turn them all on, but
if you prefer to have a lighter touch, turn on at least Content, FileField, ImageField, and Text in
the CCK area; and ImageAPI under the ImageCache area. (You’ll have to do this in several
passes, as some modules require that others be turned on first.)
2. Create the content type by going to /admin/content/types/add. The entry form has options
very much like those you see when you create a node. But here, you’re creating defaults. So if
(for example) you check “Promoted to front page” when creating the Photo content type, then
that box will be checked when you create a Photo node. In thisk case we’ll uncheck that
Promotion box, and I recommend you disallow visitors from leaving comments. (Think of what
they might say about your esteemed colleagues!) Click “Save content type”.
3. Click “manage fields”. You’ll see a list of three fields that Drupal installs and that can’t be
deleted: Title, Body, and Menu settings fields. Underneath that is the “New field” area, where
you provide your custom fields’ Label (human-readable name), field (machine-readable name),
and field type. After you select a field type, you may also have an opportunity to indicate the
“widget” for that field, depending on which CCK modules you have installed and turned on.
4. Add your fields. When you add each of these through the interface pictured above, you’ll see
another screen after hitting the Save button: This second screen lets you indicate numerous
options for the field, depending on its type. We’ll add four, with the following options:
• Headshot (field = headshot, type = Image)
• Name (field = name, type = text, widget = text field). Note: We’re going to want to use HTML
in this area, so under “Global settings” > “Text processing”, select “Filtered text (user selects
input format)”.
• Position (field = position, type = text, widget = text field)
• Bio (field = bio, type = text, widget = Text area (multiple rows); as with the Name field,
indicate “Filtered text” here.)
5. Optionally, move the fields into the order you’d like them to appear when someone creates a
node of the Executive content type. (This is more important when creating content types that
will be used by people other than the administrator, to make the interface more user-friendly.)
Now you can create an Executive-type node by going to /node/add/executive. If you want other users to
have this ability, remember to allow that through settings at at /admin/user/permissions!
The final step is to make sure your custom fields will look the way you want, by clicking the “Display
fields” tab. You’ll see a table with all your custom fields shown, one per row. Options for each field vary
slightly depending on the type of field
it is, but here’s basically what each
column means.
• Field: The human-readable
name of your field.
• Label: Where (and whether)
to indicate the name of the
field. “Inline” in this case
means that it will appear next
to the field itself, rather than
above it.
Changing the appearance of custom fields. Theme shown: Fresh Start
• Teaser: How the field should
appear in a node’s short form.
This “teaser” format mostly appears when you promote a node to the front page (as is
described in the “Creating Content” section), or when the node is part of an RSS feed. If you
choose Default, this field will appear with the settings you specified on the “Post settings” page
at /admin/content/node-settings.
• Exclude: If checked, this field won’t show up in the teaser. (The second Exclude checkbox to the
right of this one controls whether the field shows up in the “Full node” view.)
• Full node: As with the teaser, this popup menu controls how the field appears in the node’s
full, original format — that is, when someone clicks on the node’s title.
Later on we’ll be creating a view that presents a list of executives where, if you click on a name, it goes
to their individual node. So we really should make those nodes look good from the start, right? I
recommend the following changes:
• Change all of the Labels to “<Hidden>”
• Under both Teaser and “Full node”, change the popup menu to Image.
Creating CCK content

Creating pages of the “Executive” custom content type is easy, because it works exactly like other
content types! The only difference is that the additional fields that you created — headshot, name,
position, and bio — appear on the same form as
the standard Title and Body fields. Let’s see what
that looks like.
1. Go to /node/add/executive.
2. Put the executive’s name in the Title
field. Unfortunately, Drupal requires that
you put something in the Title field, which
can’t be styled in HTML and appears at the
top of the node. So for now, we’ll use that
field for the executive’s name. We’ll use
the Name field later, when we use Views
to display this page of executives’ bios.
3. Leave the Name field empty.
4. Leave the Body field empty. We’ll
instead put the bio into the Bio field that
you created. We actually could have used
this field instead of creating a new one, by
renaming it “Bio” under the Submission
Form Settings section at
Creating a node in the content type you created using CCK.
/admin/content/node-type/executive Theme shown: Child’s Play
when we first set up this content type.
Either way works fine.
5. Upload the executive’s photo in the Headshot field. This uses the same upload dialog
you saw earlier in the section, “Making HTML-styled pages with images”.
6. Fill in the Bio field, making sure to change its Input Format to “Full HTML” if necessary.
7. Click Save.
Manipulating content display

By now you’ve gotten your site set up and entered some basic information. But there’s still lots of room
for improvement! One of Drupal’s biggest features — and where TNT themes shine — is in how it lets
you rearrange that information in interesting and dynamic ways. Such ways include:
• Blocks, which put information in various places on the page
• Menus, which provide quick access to any point on your site that can be reached by typing in a
URL
• Views, which collect parts of multiple nodes and display them in a unified and useful way
We’ll explore how to do each of these in turn.
Blocks and block regions

Every Drupal theme divides its pages into regions. These are indicated on the theme’s block
administration page, at /admin/build/block/list/[theme name]. Generally speaking, the more regions a
theme has, the more flexibility you get
when designing your site. (Not all theme
designers are equal, though, and some
include regions that are of little value.)
Drupal’s default theme, Garland, has five

such regions; free themes usually have
about that many or a few more. A typical
TNT theme has over 15 block regions,
carefully arranged for maximum versatility.
Most block regions are “collapsible” — Many block regions adjust themselves to fit the screen when adjacent
that is, other block regions fill in the spaces regions are empty. Here, we removed blocks from the “preface
they occupy if they’re empty. In the example middle” block region, and the “preface first” and “preface last”
blocks filled in the gap. Theme shown: Bubblr.
depicted here, that’s most noticeable in the
“Preface” and “Postscript” areas.
On the block administration page is a long list of blocks, such as “Navigation” and “Who’s online”.
Some are created automatically by Drupal itself, while others are created by
modules you’ve added; in addition, you can explicitly add blocks if you want.
(We’ll show you one way to do that when we create a view, below.)
Most of these blocks can be moved to any of a theme’s regions by either

selecting the region’s name in the popup menu, or by dragging the block by
its “compass” icon ( ) to under the region’s name in the list. Then, scroll to
the bottom of the page and click “Save blocks”.
One of the most frequent questions we get is, “Why didn’t a block show up
after I moved it to a region?” The tricky part is that a block will only appear
under certain conditions, among them:
• The block must contain content. Let’s say, for example, that you’ve
created a block that lists the titles of recent blog posts, with the title
“Latest blog posts”. If there are no blog posts, no part of that block
Selecting a block region
will show up: Even the title will remain hidden.
using the popup menu.
• The block must be set to appear on the page you’re viewing. At the
bottom of the page where you edit a block (such as /admin/build/block/configure/user/3) is a
section for “Page specific visibility settings”. By default, blocks are set to appear on all pages,
but you can change that setting to make a block show up (or be hidden) on only certain pages.
Garland’s block regions. Block regions for Fresh Start. Most TNT themes
have even more regions, including a right sidebar,
multiple headers, and multiple footers.
• You must meet any other conditions that are programmed into the block. For example, the “User
login” block doesn’t appear to users who are already logged in, and a block containing the
“Create content” link won’t appear to those who don’t have permission to create content.
(That’s why an anonymous user sees Drupal’s automatic Navigation block very differently from
how an administrator sees it.) Further, some blocks have custom programming that change how
they appear depending on certain conditions. Such blocks are usually created by custom
modules — for example, the GMap module creates blocks that show maps only on pages with
location information. Reading those modules’ documentation will help you to understand why
blocks show up only in certain places.
Another frequent question we hear is, “How do I remove a block’s title?” To do so:
• Go to the block administration page at /admin/build/block;
• Click “configure” next to the block you want to change;
• In the “Block title” field under Block Specific Settings, type <none>.
A final note: You might have noticed that the page for block administration changes its appearance to
match the theme whose blocks you’re editing, regardless of what theme you’ve indicated on the theme
configuration page (/admin/build/themes) or the administration theme page (/admin/settings/admin).
But that makes sense when you think about it: Arranging blocks is a visual task that requires you to see
the block regions available for a particular theme. As soon as you leave the block administration page,
you’ll see the “correct” themes.
Menus
The first thing you see on a brand-new Drupal site is a menu — specifically, the Navigation menu in the
left column, linking to all sorts of administrative functions. It’s a good example of a Drupal menu, as it:
• Contains links to nodes throughout the site. In fact, any node can become a menu item.
• Contain links created by Drupal, by modules, or by you. At first, the Navigation menu
contains links created by the Drupal software itself, and some other menu items come into
existence when you install modules. You can add your own links to existing menus as well.
• Is contained in a block, which can appear in any block region. The menu’s items —
that is, the links themselves — are set up at /admin/build/menu-customize/navigation. However,
to make that menu itself appear, the block containing it must be placed in a region. By default
the Navigation block in the left column, but it could go pretty much anywhere. Not all menus
look good in all regions, though. For example, a menu might be too vertically oriented to fit well
in horizontally shaped region such as headers and footers. Some menus — including most in
TNT themes — avoid this problem by intelligently adapting themselves to the shape of the
regions in which they’re placed.
There are two main ways to add items to existing

menus:
• Create a menu link by editing a node.
On every node-editing page (reached by
going to /node/[node number or alias]/edit)
is an area titled “Menu settings”. There you
can indicate the clickable text to appear in
the menu, what menu it should appear part
of, and what its “Parent item” is. In the
example shown here, the Locations link is An example of primary links, expanded to enable a submenu
the parent of the three city links. Such an (“frank’s blog”). The same primary links are also shown in a
arrangement, where links are nested inside block to the right, while secondary links show up next to the
each other, is called a “hierarchical menu”. search box in this theme. Theme shown: Floristo
• Edit the menu directly by going to
/admin/build/menu-customize/[menu name]. There you can also delete, rearrange, and edit
existing menu items.
• Check the Expanded checkbox to show child items underneath a parent. If you’ve set
up a hierarchical menu as described earlier, you can force Drupal to always display an item’s
submenus by checking the Expanded box next to the parent item. This is also how you can
create dropdown menus, although only some TNT themes have this feature.
In addition to the Navigation menu, Drupal comes with two other special, built-in menus: Primary links
and Secondary links. These typically appear automatically near the top of the page, arranged in a
horizontal format as is shown above. They’re particularly handy for highlighting the most important
locations in your site, as has become standard in web design over the years.
Views
Finally we come to one of Drupal’s greatest strengths: the contributed module Views
(drupal.org/project/views), which allows you to aggregate information from many nodes into pretty
much whatever format you like.
To get a feeling for the power of Views even before you install it, go to /admin/build/block, move the
“Who’s new” block to a block region, click “Save blocks”, and then visit any page on your site. See that
list of members who recently joined? That’s something that could be done in Views. In fact you can make
Drupal display several formats of lists containing any combination of fields from any combination of
nodes, users, files, comments, and other Drupal elements.
Views’ flexibility and complexity can easily overwhelm you the first time you encounter it, and a
complete discussion of its uses could easily fill a book. We’re going to walk
through a (comparatively) simple example:

Building the Executive Bio page mentioned in the
“HTML-styled pages, with images” section. We’ll
use the Executive content type we created in the
section, “Making custom content types”: If you
didn’t go through that exercise earlier, do so now.
(Don’t worry, we’ll wait.)
Before you create the view, you’ll first need to

install the module and turn it on at
/admin/build/modules. Then, create a few nodes of
content type Executive — that is, one for each
person you want to feature on the final page. The
main fields to fill out are our custom ones: Name,
Position, Bio, and Headshot (which is an image
field). You’ll also be required to give each Views’ main controls. Theme shown: Bubblr
Executive node a title: In truth, it doesn’t matter
what text you put in that field, since we won’t be using it in the final View. (You might put the
executive’s unique company ID there, for example.)
Now we’re ready to create the view! To do so:

1. Go to /admin/build/views. Click the Add tab.
2. Give the view a machine-readable name. We’ll call our demonstration view “team”. The
next two fields are optional, and for “View type” select Node, then click Next.
3. Click the plus sign next to the Fields link.
4. Scroll down and select the fields you’d like to show up in the view. In this case, that’s
“Content: Image: Headshot”; “Content: Text: Bio”; “Content: Text: Name”; and “Content: Text:
Position”. Then click Add. At this point you’ll be asked for details on each field’s display: When
everything looks good, click Update to move on to the next field.
5. Click the plus sign next to the Filters link.
6. Scroll down and select the nodes you’d like to display in this view. In this case, that’s
easy: You want all published nodes of the content type “Executive”. Check “Node: Published”
and “Node: Type”, then step through the option screens for each, clicking Update to move on to
the next one.
At this point you’ll see all the information in the “Live preview” area near the bottom of the screen.
You’re about halfway there! Now, we need to create a page and format it the way we want. Continuing
on:
7. Click “Add display” while Page is selected on the popup above it. Up until now,
you’ve been editing the view’s “defaults”, which would apply to the
information as it would appear in a

Page, Block, Feed, or Attachment. By
adding a Page display, you’re telling
Views “I intend to make a page with
this information”, and will have a
chance to add page-relevant options
(such as the page’s URL).
8. Under the “Page settings” link,
click the word “none” next to
Path. Enter the path name, and
click Update. We’ll use the word
“team” as the path name.
9. Click Save, then go to /team to
see how things are going. Not
bad... but not quite right. We’ll fix it up
a bit in a minute. But also note that
this was the first time you saved your
view: If you had left the views
administration screen for any reason,
you would have lost all your work! For
that reason, I recommend saving often
while creating views. (We didn’t show
that step here because it can be done The workflow for changing views goes from the top of the page
at any time.) to the bottom. First, click on a parameter you want to change;
then, make alterations to its options below; third, preview the
changes you made. Theme shown: Acquia Marina
Now for the hard part: Adding those last
tweaks that make the page look the way you
want it.
10. Click the [Edit] link near the top of the page. This is a neat little trick in Views: While your
cursor is over the view, you’ll see links at the top labeled [Edit] [Export] [Clone]. You’ll return to
Views’ administrative UI. (This trick doesn’t work in all themes. You can always return to the
view’s edit page at /admin/build/views/edit/[view name].)
11. Under Fields, click “Content: Image: Headshot (field_headshot)”. We’re first going to
make the headshot appear as a graphic, rather than with a generic file icon: As usual with the
Views interface, clicking on a parameter such as a field name presents you with the controls to
change its appearance lower on the page.
12. Under Label, click None; Under Format, select “Image linked to node”; click
“Update default display”. Now if you scroll down (or visit /team), you’ll the the executives’
actual faces.
13. Go through the same process for the other three fields, changing Label to None. Of
course that means clicking on each field’s name, then making your changes, then clicking
“Update default display”. You can make other changes if you like, of course.
14. Next to the Fields link, click the “rearrange fields” icon, which looks like this: . You
can then move the fields into the order you want. (I used the order: Name, Position, Headshot,
Bio.) As always, click “Update default display” to make the change take effect and see what you
did.
At this point, save your view and visit it at /team. It looks pretty good, doesn’t it? There’s just one thing:
If you followed this guide’s instructions from the beginning, the executive’s name doesn’t appear! That’s
because when we created the page in the earlier “Creating CCK content” section, we left the Name
field blank to avoid having their name appear twice — once in the required Title field, and once in the
Name field.
But with Views, we don’t have to display the required Title field, which doesn’t allow us to use styled
text. Instead, fill in the Name field with the (HTML-styled) executive’s name and it will appear properly.
But before we’re done here, we’d like to show you a trick to make it look even better.
15. Under “Basic settings”, next to Style, click the Unformatted link. You’ll see a list of
intriguing (and unexplained) options below, including List, Table, and Grid. (You might also see
other options if you have certain modules installed.) Try changing it to a Grid that’s 1 column
wide — you might like the display better! Get to know these other Style options, since making a
tiny change here will make a huge difference to your page’s appearance.
There’s just one thing we forgot: Our “Team” menu still leads to the old Executives page, doesn’t it? You
can change that either by editing the view itself (under “Page settings”), or by editing the menu you
created earlier to change the URL it leads to (at /admin/build/menu).
Finally, we’ll make the same information appear easily in other formats. In our case, we’ll create a block
so people can learn about our executive team from any page by clicking links in the sidebars.
1. Select Block and click “Add display”.
2. Under Fields, click “Content: Image: Headshot (field_headshot)”. We’re going to
remove the graphic of each executive from the Block view, because it would be too big to show
up in the sidebars.
3. Click Override. This is a very important step, and many people ruin their views by forgetting
it! If you don’t click Override, then any changes you make here will also affect the Page view at
/team. In other words, you could easily undo all the work you just did! So remember: If you want
to affect only one type of view, click Override.
4. Check “Exclude from display”, and then click Update. You still see the image, right?
Look above at that Preview button and you’ll see why: You’re looking
at the Default version of the view, not the Block version.

But if you change that popup menu to Block and then
click Preview again, you’ll see how the Block version
looks: that is, without the graphic.
5. Do actions like Steps #3-5 to: exclude the Bio
from the display; change the format of the Name
to “Plain text”; and “Link this [Name] field to its
node”. The steps are very similar: only the settings are Our finished block view.
different. Theme shown: People Source
We now have a pretty good, simple listing of executives’ names linked to their descriptions, and their
titles underneath. One common thing people want to do is to make all that information run together in
one line to make the block more compact. We didn’t do that on our sample site, but here’s how you
would if you wanted.
1. Under “Basic settings”, next to “Row style”, click the gear icon that looks like
this: . This lets you change some options of how the fields appear in the block.
2. Click Override to avoid messing up your other views.
3. Check both “Content: Text: Name (field_name)” and “Content: Text: Position
(field_position)”; in the Separator field, enter an asterisk and space (“* “). That will
make them appear in a single line, but not run together. As always, click Update and look at the
results below.
Finally, a few finishing touches.

1. Under “Basic settings”, change the Style back from Grid to Unformatted.
2. Under “Block settings”, click None next to Admin and change it to “Executive
links” or any other title you’ll remember. Click Update, and then Save.
Now you have a block with links to your executives’ bios! To make it active, go to /admin/build/block
and move the block to wherever you’d like it to appear: For help doing that, see the section “Blocks and
block regions”.
Need more help? Views has extensive documentation built into the module itself. However, you need to
also install the Advanced Help module (at drupal.org/project/advanced_help) to access it. (The Views
interface also includes a prominent link to the Advanced Help module.) Further documentation is
available on Drupal.org: A good place to start is drupal.org/handbook/modules/views.
How can I get more help from TopNotchThemes?

We hope this guide has helped you set up your new Drupal website and use some of the unique
features of a TNT theme. You should now have the basic toolkit needed to set up your own dynamic
website using Drupal’s core features and key modules such as CCK and Views.
If you have any questions about using your theme from TopNotchThemes on your website, or have any
custom theming needs, please contact us via the form on our website at topnotchthemes.com/contact.
Gallery of TNT themes

TopNotchThemes offers dozens of Drupal themes for business, entertainment, commerce, social-
networking, and general-purpose sites. Below is a sample: To see them all, visit topnotchthemes.com.

Quickstart Guide: How To Build A Great Drupal Website

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Quickstart Guide: How To Build A Great Drupal Website

Uploaded by

Copyright:

Available Formats

TopNotchThemes Quickstart Guide

You + Drupal + TopNotchThemes = Win!.....1 Creating content ..........................................9

You + Drupal + TopNotchThemes = Win!

But in building any website, you’ll need certain skills to make it

Before you start…

But enough prologue. Let’s get cracking!

How we’ll build the website

A note about this guide

1. Download and uncompress your TNT

2. Move the theme package to its

4. And there it is! Your TNT theme is ready to be

What if I want to rename my theme?

One more thing…

Configuring your site

Special TopNotchThemes feature!

Theme configuration options

Node settings: By default, Drupal displays

separator in between them, for example

Meta tags: This setting allows you to

Installing recommended modules

This node will always be prominent at the

Posting blog entries

This system of categorization is called a

There, you first set up a Vocabulary,

Making HTML-styled pages with images

You’ll have to be logged in as a user that has access to

1. Turn on Drupal’s Upload module at

Making custom content types

… or any of a wide range of other types. A

Creating CCK content

Manipulating content display

We’ll explore how to do each of these in turn.

Blocks and block regions

Drupal’s default theme, Garland, has five

Most of these blocks can be moved to any of a theme’s regions by either

There are two main ways to add items to existing

through a (comparatively) simple example:

Before you create the view, you’ll first need to

Now we’re ready to create the view! To do so:

information as it would appear in a

at the Default version of the view, not the Block version.

Finally, a few finishing touches.

How can I get more help from TopNotchThemes?

Gallery of TNT themes

You might also like