Your Federal Quarterly Tax Payments are due April 15th Get Help Now >>

Drupal - Quickstart Guide - How to build a great Drupal website by wantyo

VIEWS: 140 PAGES: 25

									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 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 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   •   •   Revised: 5 January 2009
TopNotchThemes Quickstart Guide: Build a great Drupal website with your new theme from TopNotchThemes        2

   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
     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, we might say
   “/admin/build/modules” to mean “”.

   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 “”.

   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.

Copyright 2009, TopNotchThemes, All Rights Reserved   •   •   Revised: 5 January 2009
TopNotchThemes Quickstart Guide: Build a great Drupal website with your new theme from TopNotchThemes        3

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

4. And there it is! Your TNT theme is ready to be
   used. (Your screen will look slightly different from

Copyright 2009, TopNotchThemes, All Rights Reserved   •   •   Revised: 5 January 2009
TopNotchThemes Quickstart Guide: Build a great Drupal website with your new theme from TopNotchThemes         4

   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,
     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

Copyright 2009, TopNotchThemes, All Rights Reserved   •   •   Revised: 5 January 2009
TopNotchThemes Quickstart Guide: Build a great Drupal website with your new theme from TopNotchThemes                             5

                             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 (“Anonymous user” and “E-
   mail address”) and (“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.

Copyright 2009, TopNotchThemes, All Rights Reserved   •   •   Revised: 5 January 2009
TopNotchThemes Quickstart Guide: Build a great Drupal website with your new theme from TopNotchThemes                                      6

   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

Copyright 2009, TopNotchThemes, All Rights Reserved   •    •    Revised: 5 January 2009
TopNotchThemes Quickstart Guide: Build a great Drupal website with your new theme from TopNotchThemes                              7

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

       Search engine optimization (SEO) settings: These settings give you more control over how
       your site appears to search engines such as and 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

Copyright 2009, TopNotchThemes, All Rights Reserved   •   •    Revised: 5 January 2009
TopNotchThemes Quickstart Guide: Build a great Drupal website with your new theme from TopNotchThemes                                  8

               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, and they’re all included as part of Acquia Drupal (
       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. (

Copyright 2009, TopNotchThemes, All Rights Reserved   •   •   Revised: 5 January 2009
TopNotchThemes Quickstart Guide: Build a great Drupal website with your new theme from TopNotchThemes                         9

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

   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 (

   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.

Copyright 2009, TopNotchThemes, All Rights Reserved   •   •   Revised: 5 January 2009
TopNotchThemes Quickstart Guide: Build a great Drupal website with your new theme from TopNotchThemes                  10

   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

   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

   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.

Copyright 2009, TopNotchThemes, All Rights Reserved   •   •   Revised: 5 January 2009
TopNotchThemes Quickstart Guide: Build a great Drupal website with your new theme from TopNotchThemes         11

   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,
   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
   ( and the YUI Rich Text Editor ( are two that fill
   the first need, while IMCE ( and 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.

Copyright 2009, TopNotchThemes, All Rights Reserved   •   •   Revised: 5 January 2009
TopNotchThemes Quickstart Guide: Build a great Drupal website with your new theme from TopNotchThemes          12

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

Copyright 2009, TopNotchThemes, All Rights Reserved   •   •   Revised: 5 January 2009
TopNotchThemes Quickstart Guide: Build a great Drupal website with your new theme from TopNotchThemes                       13

   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 (

   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
   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
                                                                                     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 You’ll also need to install two additional modules that ImageField
   requires: FileField ( and 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”.

Copyright 2009, TopNotchThemes, All Rights Reserved   •   •   Revised: 5 January 2009
TopNotchThemes Quickstart Guide: Build a great Drupal website with your new theme from TopNotchThemes               14

       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

Copyright 2009, TopNotchThemes, All Rights Reserved   •   •   Revised: 5 January 2009
TopNotchThemes Quickstart Guide: Build a great Drupal website with your new theme from TopNotchThemes                    15

               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.

Copyright 2009, TopNotchThemes, All Rights Reserved   •   •   Revised: 5 January 2009
TopNotchThemes Quickstart Guide: Build a great Drupal website with your new theme from TopNotchThemes               16

       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
      •    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

Copyright 2009, TopNotchThemes, All Rights Reserved   •   •   Revised: 5 January 2009
TopNotchThemes Quickstart Guide: Build a great Drupal website with your new theme from TopNotchThemes                                   17

   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.

Copyright 2009, TopNotchThemes, All Rights Reserved   •   •     Revised: 5 January 2009
TopNotchThemes Quickstart Guide: Build a great Drupal website with your new theme from TopNotchThemes        18

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

   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.

Copyright 2009, TopNotchThemes, All Rights Reserved   •   •   Revised: 5 January 2009
TopNotchThemes Quickstart Guide: Build a great Drupal website with your new theme from TopNotchThemes              19

   There are two main ways to add items to existing
     •     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.

   Finally we come to one of Drupal’s greatest strengths: the contributed module 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

Copyright 2009, TopNotchThemes, All Rights Reserved   •   •   Revised: 5 January 2009
TopNotchThemes Quickstart Guide: Build a great Drupal website with your new theme from TopNotchThemes          20

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

Copyright 2009, TopNotchThemes, All Rights Reserved   •   •   Revised: 5 January 2009
TopNotchThemes Quickstart Guide: Build a great Drupal website with your new theme from TopNotchThemes                                21

               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.

Copyright 2009, TopNotchThemes, All Rights Reserved   •   •   Revised: 5 January 2009
TopNotchThemes Quickstart Guide: Build a great Drupal website with your new theme from TopNotchThemes           22

       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

   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

Copyright 2009, TopNotchThemes, All Rights Reserved   •   •   Revised: 5 January 2009
TopNotchThemes Quickstart Guide: Build a great Drupal website with your new theme from TopNotchThemes                              23

               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 to access it. (The Views
   interface also includes a prominent link to the Advanced Help module.) Further documentation is
   available on A good place to start is

Copyright 2009, TopNotchThemes, All Rights Reserved   •   •   Revised: 5 January 2009
TopNotchThemes Quickstart Guide: Build a great Drupal website with your new theme from TopNotchThemes        24

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

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

Copyright 2009, TopNotchThemes, All Rights Reserved   •   •   Revised: 5 January 2009

To top