quickstart guide: how to build a great drupal website

You + Drupal + TopNotchThemes =Win!.....1Before you start…How we’ll build the websiteA note about this guide

The basics ....................................................2Installing your TNT themeWhat if I want to rename my theme?One more thing…

Configuring your site ...................................4Basic site configurationTheme configuration optionsInstalling recommended modules

Creating content ..........................................9The front pageContact pagePosting blog entriesCategorizing contentMaking HTML-styled pages with imagesMaking custom content typesCreating CCK content

Manipulating content display....................16Blocks and block regionsMenusViews

How can I get more help from TNT? ..........24

Gallery of TNT themes ...............................24Copyright 2009, TopNotchThemes

BUILD A GREATDRUPALWEBSITE

with your new theme from

TopNotchThemes Quickstart Guide

http://www.topnotchthemes.com

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

You + Drupal + TopNotchThemes = Win!Congratulations on your decision to use a TNT theme for yourwebsite! Your choice may have saved you dozens of hours overcreating a Drupal theme from scratch or tweaking a non-Premiumtheme from another source.

But in building any website, you’ll need certain skills to make itwork 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 anyof 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 theresources 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, dynamicsite 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 informs, and understand such concepts as user permissions and links. You’ll also need access toyour web server through FTP or SSH to install modules and the theme, and may also needadditional skills to build your full website, notably with graphic design programs and paymentsystems. 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 offerdesigns 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 permissionsto administer a Drupal site. At the very least you’ll need permission to create content andadminister 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 yourexperience of the site comes closest to theirs.

TopNotchThemes Quickstart Guide: Build a great Drupal website with your new theme from TopNotchThemes 1


http://www.drupal.org/support

http://www.drupal.org/project/acquia_marina



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

2. Creation of content.We’ll tell you how to create pages and blog posts, how to promote anycontent to the home (“front”) page, and how to define your own content types using theContent Construction Kit (CCK).

3. Manipulation of that content into useful and interesting formats. After you’ve createdsome content, we’ll show you how to use Views and Blocks so the information they contain isclear and concise.

We’ll demonstrate using a variety of TNT themes. Most of the features you see here are common to all ofour themes, including block regions, per-type metadata display settings, and flexible CSS. If you havequestions about a theme’s appropriateness for a particular use, send us a note — our job is to providethe 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) thedomain 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, forexample “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 reachedthrough 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.



http://www.drupal.org/project/pathauto




1. Download and uncompress your TNTtheme package. TNT themes come ascompressed .gz files, which you double click tounpack. The result is a folder containing “extras”,“documentation”, and the theme package itself(in this case, Fresh Start).

2. Move the theme package to itsdestination. Typically that would be to the/sites/all/themes directory of your Drupalinstallation, although other options are possible.

3. In a web browser, go to/admin/build/themes. Click the Enabledcheckbox and the Default radio button. Thenscroll to the bottom of the page and click “Saveconfiguration”.

4. And there it is! Your TNT theme is ready to beused. (Your screen will look slightly different fromthis.)

http://www.topnotchthemes.com/theme/1038




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 achance 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 filethe same name as you gave its enclosing folder.

4. Open that .info file and change the text after “name = “. This will be the theme’shuman-readable name.

Now when you go to the theme administration page at /admin/build/themes, you’ll see the theme’snew name.

One more thing…

Before you start working on your site, we recommend you change the administrative theme to Drupal’sdefault, “Garland”.While this isn’t strictly necessary, we’ve found that doing so allows us to workquicker and with less distraction, since administrative functions will always look the same no matterwhat theme we choose. You can make the change at /admin/settings/admin. (But we won’t follow thatadvice 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 thetop 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 inthe header next to the Name if you’ve turned on the “Site slogan”option at/admin/build/themes/settings/[theme_name].





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 pageinstead 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” regionsfor 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, thenclick “Save configuration”. The “configure” link will then be available.) Alternately, the direct URL for atheme-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 discussonly theme-specific settings.


Location of site information in the “It’s The New Black” theme. (Placement varies from theme to theme.)



http://www.drupal.org/node/15364

http://www.drupal.org/node/43794



If you’ve used a theme from somebody other than TopNotchThemes before, you’ve probably beensurprised at the huge range of options available in our designs for Drupal 6 and later.While the sheernumber of them may seem overwhelming at first, the good news is that your site will look great even ifyou never touch any of them.

But for those who want more control over their site’s appearance than you can get from any othertheme 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 ononly the front page — Drupal’s default — or to make it appear on all pages. This setting only takeseffect if you’ve chosen to display the Mission statement under the “Toggle display” section, whichyou’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 withthe breadcrumb “Home / Frequently Asked Questions”.

Username: This setting (“Display "not verified" for unregistered usernames”) refers to text thatappears when “unregistered” (i.e., Anonymous) users post comments. Of course this setting onlytakes effect if you permit Anonymous users to comment.

Search results: Settings in this section let you control the amount of information that visitors seewhen 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 displayscertain information about a node, regardless of itscontent type. Further, administrators usually don’thave control over the “Read more” and “Add newcomment” text that appears after many nodes. Thesettings in this region allow you to vary how allthis information displays on a content type-by-content type basis, or to keep it consistent amongcontent types.

TNT themes provide node settings to control thedisplay of three types of information:

• Author & date (e.g., “Posted on Wed,07/16/2008 - 17:29 by admin”);

• Taxonomy terms, which are hidden bydefault; and

• the “Read more” and “Add newcomment” links.

For each of these settings, you can choose to have all content types display the information in thesame 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. Youwould:

1. Check the box “Use custom settings for each content type instead of the default above” underthe “Author & date” area;

2. Click the word “Page” to reveal options for that content type; and3. 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 & datesettings 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 howyour 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 youvisit the site, and your decisions here are among the most important for improving your site’svisibility in search engines. These titles are usually in two parts with a


Learn something new…Exposing hidden optionsTo avoid cluttering up the themeconfiguration page with an overwhelmingmultitude of options, we’ve grouped theminto categories such as “Node settings”and “Search engine optimization (SEO)settings”.We’ve then “collapsed” thesecategories, so when you visit the page, youonly see the category names. To expose thesettings in each category, simply click onthe category name. Some categoriescontain other categories, so you may needto click several times to “drill down” to thesetting you want.


http://www.yahoo.com

http://www.google.com



separator in between them, for example“Acme Integration Corp. || Welcome to oursite”. You can force Drupal to display anyof four common patterns, or display anycustom (non-HTML) text you choose.Further, you can change the separator (“||”in this case) and make the front page’stitle bar appear different from those of thesite’s other pages.

Meta tags: This setting allows you tochange (somewhat) how your site iscategorized and described in searchengines.While the “Meta keywords”setting isn’t as useful as it was in yearspast, the “Meta description” setting oftendefines the “preview” potential visitorsget when they find your site through asearch engine — and can be useful forluring them in.

SEO is an industry unto itself, andTopNotchThemes can’t advise you on how toadjust these settings to improve your standingin these search engines. Regardless, the factthat you can make such adjustments means thatsites with TNT themes can give you a significantedge 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 totake advantage of some of the more common modules. You can download these individually atdrupal.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 nototherwise found in core Drupal. For example, you could create a Flickr-like photo-sharing site byallowing 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 youhow 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 thesection on that subject later in this guide. (drupal.org/project/cck)


Here we see the node settings to change whether the authorand date show up on certain content types. Because the “Usecustom settings...” box is checked, the settings in the Defaultsection are ignored; ergo, both the author name and postingdate will show up on Blog entries. Theme shown: Hot Pink



http://www.drupal.org/project/cck

http://www.acquia.com/downloads

http://www.drupal.org



Views: This module permits you to design alternate ways of viewing nodes, either individually or asa collection. The Views module is one of Drupal’s most complicated — and useful — modules.We’llstep 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 homepage?”. In traditional HTML coding you would simply create a file called index.html, but in Drupal anynode 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 thetop of the front page because we’ve alsochecked “Sticky at top of lists”. That’sespecially useful if your front page containsmore than one node.

For further guidance, we like the screencast“Custom Drupal Homepages”, atmustardseedmedia.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, werecommend 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 packageincludes this content type, but leaves it turned off by default: To turn it on, go to /admin/build/modules.


Creating the front page by promoting a node.Theme shown: Bordeaux



http://www.drupal.org/project/webform

http://www.mustardseedmedia.com/podcast/episode11

http://www.drupal.org/project/views



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 containsblog posts from all users, at /blog, and further pages for posts from individual users at /blog/[usernumber]. To give visitors easy access to these blogs, you might want to create menu items that lead tothem: 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 inany block region on the page. To learn how to do that, see the “Blocks and block regions” sectionbelow.

Categorizing content

Drupal shares a feature withWordPress, 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 aboutbicycles, and post a blog entry about restoring an old Schwinn with sparkly paint. You might tag that entryas being about “restoration”, “paint”, and “Schwinn”. Those tags will appear as links at the bottom ofthe post if you’ve enabled this option at /admin/build/themes/settings/[theme name], and clicking on anyof them will produce a page of other posts about the subject. This way, you can build up pages of highlyrelevant content bit by bit, simply by tagging each post when you create it or at any later time.

This system of categorization is called ataxonomy, 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 ourexample above, you might haveorganized tags into one Vocabulary, sothat all three terms are part of “Biketags”. Or you might decide to splitthese tags into several Vocabularies,where (for example) Schwinn might gointo a Vocabulary “Brand names”which also contains the terms “Huffy”,“Raleigh”, and so forth. Such decisionsare usually made based on a site’s size and complexity.


Types of tags vary depending on which boxes you check in a Vocabulary’sSettings. From left to right. 1) Simple tags, where you can only select oneat a time, created by leaving all boxes unchecked; 2) Tags where you canselect multiple options, created by checking “Multiple select”; 3) Freetagging, created by checking “Tags”. For this last option, Drupal

automatically suggests existing tags as you type.




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 onlywant blog entries to be tagged, as you use the content type Page for business content thatdoesn’t need tagging, such as directions to your shop. In that case you would only check theBlog 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, andarrange 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 beable to add tags to categorize the content. You can also use Views to change how nodes marked withcertain tags are displayed, for example showing a picture of the Raleigh logo next to all posts aboutRaleigh 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 candecide which vocabularies to show, and in what format, by changing settings under “TopNotchThemessettings” at /admin/build/themes/settings/[theme name]. For example, you may want to use onevocabulary 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 manybeginners get frustrated when they try to create something a little more alluring, as Drupal doesn’t comewith 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 fillthe 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 onlyDrupal’s built-in components. (This page can also be created using CCK and Views, as we’ll show youlater.) This process we’re going to show you first is frankly a bit of a workaround, but it’ll introduce youto a simple way to add images and formatting to a Drupal page.



http://www.drupal.org/project/imagecache

http://www.drupal.org/project/imce

http://www.drupal.org/project/yui_editor

http://www.drupal.org/project/fckeditor

http://www.drupal.org/project/taxonomy_image



You’ll have to be logged in as a user that has access tothe “Full HTML” input format. By default, Drupal onlygives that access to the “superuser”— that is, the usercreated when you first installed Drupal. You can givethat access to other users on the “Input formats”administration page at /admin/settings/filters; for moreinformation 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 youwant them on the server by checking thesettings at /admin/settings/file-system.

3. Create a node of content type Page bygoing to /node/add/page.

4. Fill in the Title and Body, using HTML in the Body field as you like. Leave out thegraphics 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”. Bydefault, Drupal allows you to create pages using only a subset of HTML tags called “FilteredHTML”, 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 locatedon the server — typically at/sites/default/files/[file name].

7. Uncheck the List box next toeach graphic. If you fail to dothis, your graphic might appeartwice — once where you want it,and once at the bottom of thenode.

8. Go back to the Body field and insert the graphics, using their new URLs. In thisexample, we used the CSS property “float” within a <div> tag to gain pixel-precise control overgraphic 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.


An example of HTML-styled text.Theme shown: Green World

Attaching a graphic. Theme shown: Extra Extra



http://www.w3schools.com/css/css_reference.asp

http://www.w3schools.com/html



Making custom content types

So now you’ve seen how to create Pages and Blog posts, which come built into Drupal. Now we’ll showyou one of Drupal’s most powerful features: the ability to create your own content types with unlimitedcustom 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 referenceusers and other nodes. But to get its full effect — keys to the castle rooms, so to speak — you maywant 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. Alist of such modules is at drupal.org/project/Modules/category/88. Most of these moduleshave no direct interface at /admin, butinstead subtly change the way you createcontent types by adding new fields, options,and controls. As always, read a module’sdocumentation if you’re unsure of how itworks.

We’ll demonstrate CCK by making a contenttype called “Executive” with fields for animage, name, position, and bio. You’ll first need to install the ImageField module, which is available atdrupal.org/project/imagefield. You’ll also need to install two additional modules that ImageFieldrequires: 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, butif you prefer to have a lighter touch, turn on at least Content, FileField, ImageField, and Text inthe CCK area; and ImageAPI under the ImageCache area. (You’ll have to do this in severalpasses, 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 optionsvery 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, thenthat box will be checked when you create a Photo node. In thisk case we’ll uncheck thatPromotion box, and I recommend you disallow visitors from leaving comments. (Think of whatthey might say about your esteemed colleagues!) Click “Save content type”.


CCK’s interface for creating fields.Theme shown: Nice Threads



http://www.drupal.org/project/imageapi

http://www.drupal.org/project/filefield

http://www.drupal.org/project/imagefield

http://www.drupal.org/project/Modules/category/88

http://www.drupal.org/project/Modules/category/88

http://www.drupal.org/project/cck



3. Click “manage fields”. You’ll see a list of three fields that Drupal installs and that can’t bedeleted: Title, Body, and Menu settings fields. Underneath that is the “New field” area, whereyou 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 seeanother screen after hitting the Save button: This second screen lets you indicate numerousoptions 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 HTMLin this area, so under “Global settings” > “Text processing”, select “Filtered text (user selectsinput 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 anode of the Executive content type. (This is more important when creating content types thatwill 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 tohave 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 “Displayfields” tab. You’ll see a table with all your custom fields shown, one per row. Options for each field varyslightly depending on the type of fieldit is, but here’s basically what eachcolumn means.• Field: The human-readable

name of your field.• Label:Where (and whether)

to indicate the name of thefield. “Inline” in this casemeans that it will appear nextto the field itself, rather thanabove it.

• Teaser: How the field shouldappear in a node’s short form.This “teaser” format mostly appears when you promote a node to the front page (as isdescribed in the “Creating Content” section), or when the node is part of an RSS feed. If you


Changing the appearance of custom fields. Theme shown: Fresh Start





choose Default, this field will appear with the settings you specified on the “Post settings” pageat /admin/content/node-settings.

• Exclude: If checked, this field won’t show up in the teaser. (The second Exclude checkbox to theright 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’sfull, 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 goesto their individual node. So we really should make those nodes look good from the start, right? Irecommend 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 othercontent types! The only difference is that the additional fields that you created — headshot, name,position, and bio — appear on the same form asthe standard Title and Body fields. Let’s see whatthat looks like.

1. Go to /node/add/executive.2. Put the executive’s name in the Title

field. Unfortunately, Drupal requires thatyou put something in the Title field, whichcan’t be styled in HTML and appears at thetop of the node. So for now, we’ll use thatfield for the executive’s name.We’ll usethe Name field later, when we use Viewsto 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 thatyou created.We actually could have usedthis field instead of creating a new one, byrenaming it “Bio” under the SubmissionForm Settings section at/admin/content/node-type/executivewhen we first set up this content type.Either way works fine.


Creating a node in the content type you created using CCK.Theme shown: Child’s Play





5. Upload the executive’s photo in the Headshot field. This uses the same upload dialogyou 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 displayBy now you’ve gotten your site set up and entered some basic information. But there’s still lots of roomfor improvement! One of Drupal’s biggest features — and where TNT themes shine — is in how it letsyou 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 blockadministration page, at /admin/build/block/list/[theme name]. Generally speaking, the more regions atheme has, the more flexibility you getwhen designing your site. (Not all themedesigners are equal, though, and someinclude regions that are of little value.)

Drupal’s default theme, Garland, has fivesuch regions; free themes usually haveabout that many or a few more. A typicalTNT theme has over 15 block regions,carefully arranged for maximum versatility.

Most block regions are “collapsible”—that is, other block regions fill in the spacesthey occupy if they’re empty. In the exampledepicted 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


Many block regions adjust themselves to fit the screen when adjacentregions are empty. Here, we removed blocks from the “prefacemiddle” block region, and the “preface first” and “preface last”

blocks filled in the gap. Theme shown: Bubblr.





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 eitherselecting the region’s name in the popup menu, or by dragging the block byits “compass” icon ( ) to under the region’s name in the list. Then, scroll tothe bottom of the page and click “Save blocks”.

One of the most frequent questions we get is, “Why didn’t a block show upafter I moved it to a region?” The tricky part is that a block will only appearunder 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 blockwill show up: Even the title will remain hidden.

• The block must be set to appear on the page you’re viewing. At thebottom of the page where you edit a block (such as /admin/build/block/configure/user/3) is asection 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.


Selecting a block regionusing the popup menu.

Garland’s block regions. Block regions for Fresh Start. Most TNT themeshave 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 “Userlogin” 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 fromhow an administrator sees it.) Further, some blocks have custom programming that change howthey appear depending on certain conditions. Such blocks are usually created by custommodules — for example, the GMap module creates blocks that show maps only on pages withlocation information. Reading those modules’ documentation will help you to understand whyblocks 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 tomatch the theme whose blocks you’re editing, regardless of what theme you’ve indicated on the themeconfiguration 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 seethe 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 theleft 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 intoexistence 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 defaultthe Navigation block in the left column, but it could go pretty much anywhere. Not all menuslook good in all regions, though. For example, a menu might be too vertically oriented to fit wellin horizontally shaped region such as headers and footers. Some menus — including most inTNT themes — avoid this problem by intelligently adapting themselves to the shape of theregions in which they’re placed.





There are two main ways to add items to existingmenus:• Create a menu link by editing a node.

On every node-editing page (reached bygoing to /node/[node number or alias]/edit)is an area titled “Menu settings”. There youcan indicate the clickable text to appear inthe menu, what menu it should appear partof, and what its “Parent item” is. In theexample shown here, the Locations link isthe parent of the three city links. Such anarrangement, where links are nested insideeach other, is called a “hierarchical menu”.

• Edit the menu directly by going to/admin/build/menu-customize/[menu name]. There you can also delete, rearrange, and editexisting menu items.

• Check the Expanded checkbox to show child items underneath a parent. If you’ve setup a hierarchical menu as described earlier, you can force Drupal to always display an item’ssubmenus by checking the Expanded box next to the parent item. This is also how you cancreate 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 linksand Secondary links. These typically appear automatically near the top of the page, arranged in ahorizontal format as is shown above. They’re particularly handy for highlighting the most importantlocations 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 prettymuch 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 thatlist of members who recently joined? That’s something that could be done in Views. In fact you can makeDrupal display several formats of lists containing any combination of fields from any combination ofnodes, users, files, comments, and other Drupal elements.

Views’ flexibility and complexity can easily overwhelm you the first time you encounter it, and acomplete discussion of its uses could easily fill a book.We’re going to walk


An example of primary links, expanded to enable a submenu(“frank’s blog”). The same primary links are also shown in ablock to the right, while secondary links show up next to the

search box in this theme. Theme shown: Floristo






through a (comparatively) simple example:Building the Executive Bio page mentioned in the“HTML-styled pages, with images” section.We’lluse the Executive content type we created in thesection, “Making custom content types”: If youdidn’t go through that exercise earlier, do so now.(Don’t worry, we’ll wait.)

Before you create the view, you’ll first need toinstall the module and turn it on at/admin/build/modules. Then, create a few nodes ofcontent type Executive — that is, one for eachperson you want to feature on the final page. Themain fields to fill out are our custom ones: Name,Position, Bio, and Headshot (which is an imagefield). You’ll also be required to give eachExecutive node a title: In truth, it doesn’t matterwhat text you put in that field, since we won’t be using it in the final View. (You might put theexecutive’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:Wheneverything 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 tothe 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. Continuingon: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


Views’ main controls. Theme shown: Bubblr





information as it would appear in aPage, Block, Feed, or Attachment. Byadding a Page display, you’re tellingViews “I intend to make a page withthis information”, and will have achance to add page-relevant options(such as the page’s URL).

8. Under the “Page settings” link,click the word “none” next toPath. Enter the path name, andclick Update.We’ll use the word“team” as the path name.

9. Click Save, then go to /team tosee how things are going. Notbad... but not quite right.We’ll fix it upa bit in a minute. But also note thatthis was the first time you saved yourview: If you had left the viewsadministration screen for any reason,you would have lost all your work! Forthat reason, I recommend saving oftenwhile creating views. (We didn’t showthat step here because it can be doneat any time.)

Now for the hard part: Adding those lasttweaks that make the page look the way youwant 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 toViews’ administrative UI. (This trick doesn’t work in all themes. You can always return to theview’s edit page at /admin/build/views/edit/[view name].)

11. Under Fields, click “Content: Image: Headshot (field_headshot)”.We’re first going tomake the headshot appear as a graphic, rather than with a generic file icon: As usual with theViews interface, clicking on a parameter such as a field name presents you with the controls tochange 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.


The workflow for changing views goes from the top of the pageto 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

http://www.drupal.org/project/acquia_marina




13. Go through the same process for the other three fields, changing Label to None. Ofcourse 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: . Youcan 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 youdid.

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’sbecause when we created the page in the earlier “Creating CCK content” section, we left the Namefield blank to avoid having their name appear twice — once in the required Title field, and once in theName field.

But with Views, we don’t have to display the required Title field, which doesn’t allow us to use styledtext. 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 seeother options if you have certain modules installed.) Try changing it to a Grid that’s 1 columnwide — you might like the display better! Get to know these other Style options, since making atiny 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? Youcan change that either by editing the view itself (under “Page settings”), or by editing the menu youcreated 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 blockso 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 showup in the sidebars.

3. Click Override. This is a very important step, and many people ruin their views by forgettingit! 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 wantto 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 thenclick Preview again, you’ll see how the Block versionlooks: that is, without the graphic.

5. Do actions like Steps #3-5 to: exclude the Biofrom the display; change the format of the Nameto “Plain text”; and “Link this [Name] field to itsnode”. The steps are very similar: only the settings aredifferent.

We now have a pretty good, simple listing of executives’ names linked to their descriptions, and theirtitles underneath. One common thing people want to do is to make all that information run together inone line to make the block more compact.We didn’t do that on our sample site, but here’s how youwould 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 willmake them appear in a single line, but not run together. As always, click Update and look at theresults 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/blockand move the block to wherever you’d like it to appear: For help doing that, see the section “Blocks andblock regions”.

Need more help? Views has extensive documentation built into the module itself. However, you need toalso install the Advanced Help module (at drupal.org/project/advanced_help) to access it. (The Viewsinterface also includes a prominent link to the Advanced Help module.) Further documentation isavailable on Drupal.org: A good place to start is drupal.org/handbook/modules/views.


Our finished block view.Theme shown: People Source




http://www.drupal.org/project/advanced_help



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 uniquefeatures of a TNT theme. You should now have the basic toolkit needed to set up your own dynamicwebsite 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 anycustom theming needs, please contact us via the form on our website at topnotchthemes.com/contact.

Gallery of TNT themesTopNotchThemes 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.




http://www.topnotchthemes.com/contact


quickstart guide: how to build a great drupal website

Documents