Quickstart Guide: How to build a great Drupal website

TopNotchThemes Quickstart Guide

BUILD A GREAT DRUPAL WEBSITE with your new theme from

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

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

Creating content ..........................................9 The front page Contact page Posting blog entries Categorizing content Making HTML-styled pages with images Making custom content types Creating CCK content

Manipulating content display....................16 Configuring your site ...................................4 Basic site configuration Theme configuration options Installing recommended modules

Blocks and block regions Menus Views

How can I get more help from TNT? ..........24 Copyright 2009, TopNotchThemes

Gallery of TNT themes ...............................24

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

1

You + Drupal + TopNotchThemes = Win! Congratulations on your decision to use a TNT theme for your website! Your choice may have saved you dozens of hours over creating a Drupal theme from scratch or tweaking a non-Premium theme from another source. But in building any website, you’ll need certain skills to make it work the way you want. Specifically, you need to know: • How to install Drupal modules and themes; • How to configure your site’s basic information; • How to add content (nodes) to your site; • How to change content appearance through blocks, views, and other tools. This guide will show you what you need to know to create a website similar to our screenshots using any of our themes, including the free Acquia Marina (available at drupal.org/project/acquia_marina). It is not, however, a full Drupal tutorial. If you need help and don’t find the answer here, we recommend trying the resources at drupal.org/support first. Still having trouble? TopNotchThemes provides up to an hour of oneon-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 webbased applications that require you to navigate from screen to screen, enter information in forms, and understand such concepts as user permissions and links. You’ll also need access to your web server through FTP or SSH to install modules and the theme, and may also need additional skills to build your full website, notably with graphic design programs and payment systems. Those skills are beyond the scope of this guide. • Drupal installed and running. All of TNT’s themes run on Drupal: We currently don’t offer designs for other CMSes such as WordPress or Joomla. • Administrative access to your Drupal installation. Ideally you would be the superuser — that is, the first account created when you install Drupal, and which has all-access permissions to administer a Drupal site. At the very least you’ll need permission to create content and administer content types, views, blocks, and themes. • Firefox or Internet Explorer 7 (or later). While our themes look good in all major browsers, these are the ones that most visitors will be using, so using them yourself guarantees that your experience of the site comes closest to theirs.

Copyright 2009, TopNotchThemes, All Rights Reserved

•

TopNotchThemes.com

•

Revised: 5 January 2009


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 themes. 2. Creation of content. We’ll tell you how to create pages and blog posts, how to promote any content to the home (“front”) page, and how to define your own content types using the Content Construction Kit (CCK). 3. Manipulation of that content into useful and interesting formats. After you’ve created some content, we’ll show you how to use Views and Blocks so the information they contain is clear and concise. We’ll demonstrate using a variety of TNT themes. Most of the features you see here are common to all of our themes, including block regions, per-type metadata display settings, and flexible CSS. If you have questions about a theme’s appropriateness for a particular use, send us a note — our job is to provide the best theme for your application.

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

The basics Installing your TNT theme TNT themes install in the same manner as any other Drupal theme: Here are the details.


•

TopNotchThemes.com

•



1. Download and uncompress your TNT theme package. TNT themes come as compressed .gz files, which you double click to unpack. The result is a folder containing “extras”, “documentation”, and the theme package itself (in this case, Fresh Start). 2. Move the theme package to its destination. Typically that would be to the /sites/all/themes directory of your Drupal installation, although other options are possible.

3. In a web browser, go to /admin/build/themes. Click the Enabled checkbox and the Default radio button. Then scroll to the bottom of the page and click “Save configuration”.

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


•

TopNotchThemes.com

•


3


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, Garland.) 2. Change the name of the theme’s folder. In the example above, that name is “tnt_freshstart_6”. This name can contain only letters, numbers, and underscores — no spaces! This is the “machine-readable name” that Drupal uses internally: In Step #4 you’ll have a chance to give it an “human-readable name”, with spaces. 3. In the theme’s folder, find the file with the theme’s old name + “.info”. Give that file the same name as you gave its enclosing folder. 4. Open that .info file and change the text after “name = “. This will be the theme’s human-readable name. Now when you go to the theme administration page at /admin/build/themes, you’ll see the theme’s new name.

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

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


•

TopNotchThemes.com

•



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 drupal.org/node/43794 (“Anonymous user” and “Email address”) and drupal.org/node/15364 (“Default front page”).

Theme configuration options Many controls for changing the behavior of your site-wide theme are available by going to /admin/build/themes and clicking the “configure” link next to the theme. (If there’s no “configure” link, you’ll need to enable the theme. First check the Enabled box, then scroll to the bottom of the page, then click “Save configuration”. The “configure” link will then be available.) Alternately, the direct URL for a theme-configuration page is /admin/build/themes/settings/[theme_name]. Additionally, you can change certain settings for all themes by clicking the Configure tab at the top of /admin/build/themes, or go directly to /admin/build/themes/settings. In this guide we’ll generally discuss only theme-specific settings.


•

TopNotchThemes.com

•



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.


•

TopNotchThemes.com

Search results that take advantage of TopNotchThemes’ ability to turn off all distracting extra information. Theme shown: Hip Two Oh

•



Node settings: By default, Drupal displays certain information about a node, regardless of its content type. Further, administrators usually don’t have control over the “Read more” and “Add new comment” text that appears after many nodes. The settings in this region allow you to vary how all this information displays on a content type-bycontent type basis, or to keep it consistent among content types.

Learn something new… Exposing hidden options To avoid cluttering up the theme configuration page with an overwhelming multitude of options, we’ve grouped them into categories such as “Node settings” and “Search engine optimization (SEO) settings”. We’ve then “collapsed” these categories, so when you visit the page, you only see the category names. To expose the settings in each category, simply click on the category name. Some categories contain other categories, so you may need to click several times to “drill down” to the setting you want.

TNT themes provide node settings to control the display of three types of information: • • •

7

Author & date (e.g., “Posted on Wed, 07/16/2008 - 17:29 by admin”); Taxonomy terms, which are hidden by default; and the “Read more” and “Add new comment” links.

For each of these settings, you can choose to have all content types display the information in the same way (“Default”), or vary settings depending on content type. Let’s say you want author & date information to appear throughout the site except on Pages. You would: 1. 2. 3.

Check the box “Use custom settings for each content type instead of the default above” under the “Author & date” area; Click the word “Page” to reveal options for that content type; and Uncheck both “Display author's username” and “Display date posted”.

Because you checked that “Use custom settings” box, you’d also have to look at the author & date settings for other content types to make sure they were as you wanted. Keep in mind that here, as elsewhere in Drupal, similar settings are sometimes found in several places. In this case you can change where author & date information appears; but to change its format, go to /admin/settings/date-time. Search engine optimization (SEO) settings: These settings give you more control over how your site appears to search engines such as Google.com and Yahoo.com. The two settings are for: Page titles: These settings change what text appears in your browser’s title bar when you visit the site, and your decisions here are among the most important for improving your site’s visibility in search engines. These titles are usually in two parts with a


•

TopNotchThemes.com

•



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 TopNotchThemes can’t advise you on how to adjust these settings to improve your standing in these search engines. Regardless, the fact that you can make such adjustments means that sites with TNT themes can give you a significant edge in a competitive field.

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

Installing recommended modules Most Drupal sites use modules that aren’t in Drupal’s core download, and we’ve created our themes to take advantage of some of the more common modules. You can download these individually at drupal.org, and they’re all included as part of Acquia Drupal (acquia.com/downloads). CCK (Content Construction Kit): Allows you to create content types with field types not otherwise found in core Drupal. For example, you could create a Flickr-like photo-sharing site by allowing members to create nodes of the content type “Photo”, which includes an image field, caption field, and perhaps also a custom field indicating when the picture was taken. We’ll show you how to do exactly this in the section, “Creating content types using Content Construction Kit (CCK)”. In addition, these custom fields also come into play when designing Views, as is described in the section on that subject later in this guide. (drupal.org/project/cck)


•

TopNotchThemes.com

•



Views: This module permits you to design alternate ways of viewing nodes, either individually or as a collection. The Views module is one of Drupal’s most complicated — and useful — modules. We’ll step you through the process of using it later in this guide. (drupal.org/project/views) We’ll mention other useful modules as we encounter them.

Creating content The front page If you’re used to building web sites the old-fashioned way you might wonder, “How do I make a home page?”. In traditional HTML coding you would simply create a file called index.html, but in Drupal any node can become home page material: Simply check the “Promoted to front page” box under “Publishing options” when you create or edit the node, and you’re golden. This node will always be prominent at the top of the front page because we’ve also checked “Sticky at top of lists”. That’s especially useful if your front page contains more than one node. For further guidance, we like the screencast “Custom Drupal Homepages”, at mustardseedmedia.com/podcast/episode11

Creating the front page by promoting a node. 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/menucustomize/primary-links. This contact page allows visitors to send you email with their name, address, subject, and message, and little else. But Drupal’s built-in contact system has its limitations. To create a more-elaborate contact form, we recommend building it using the Webform module (drupal.org/project/webform).

Posting blog entries Creating a blog is easy: Each blog post is simply a node of content type Blog! The basic Drupal package includes this content type, but leaves it turned off by default: To turn it on, go to /admin/build/modules.


•

TopNotchThemes.com

•


9


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

Categorizing content Drupal shares a feature with WordPress, Joomla, and many other modern content-management systems: The ability to categorize content with “tags”. A good example would be if you run a website about bicycles, and post a blog entry about restoring an old Schwinn with sparkly paint. You might tag that entry as being about “restoration”, “paint”, and “Schwinn”. Those tags will appear as links at the bottom of the post if you’ve enabled this option at /admin/build/themes/settings/[theme name], and clicking on any of them will produce a page of other posts about the subject. This way, you can build up pages of highly relevant content bit by bit, simply by tagging each post when you create it or at any later time. This system of categorization is called a taxonomy, and controls that allow you (and others) to tag your posts are at /admin/content/taxonomy. There, you first set up a Vocabulary, which is a set of related tags. In our example above, you might have organized tags into one Vocabulary, so that all three terms are part of “Bike Types of tags vary depending on which boxes you check in a Vocabulary’s tags”. Or you might decide to split 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.


•

TopNotchThemes.com

•



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, drupal.org/project/taxonomy_image). For an introduction to Views, see the section “Manipulating content display”. With TNT themes, you have more control over taxonomy display than with most other themes: You can decide which vocabularies to show, and in what format, by changing settings under “TopNotchThemes settings” at /admin/build/themes/settings/[theme name]. For example, you may want to use one vocabulary for internally organizing or controlling the display of your content, but another for publicfacing categories. These settings allow you to select which terms will be displayed on the content itself.

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


•

TopNotchThemes.com

•



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 /gettingstarted/6/admin/user/permissions and /getting-started/6/admin/user/roles, respectively. 1. 2.

3. 4. 5.

6.

7.

8.

Turn on Drupal’s Upload module at /admin/build/modules. Make sure files will be put where you An example of HTML-styled text. want them on the server by checking the Theme shown: Green World settings at /admin/settings/file-system. Create a node of content type Page by going to /node/add/page. Fill in the Title and Body, using HTML in the Body field as you like. Leave out the graphics for now. To learn how to use HTML, see w3schools.com/html. 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
and ). 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]. Uncheck the List box next to each graphic. If you fail to do this, your graphic might appear twice — once where you want it, Attaching a graphic. Theme shown: Extra Extra and once at the bottom of the node. 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
tag to gain pixel-precise control over graphic positioning. The specific code here is: For more information about CSS properties, see w3schools.com/css/css_reference.asp.


•

TopNotchThemes.com

•



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 (drupal.org/project/cck). CCK is useful on its own, and lets you create number and text fields, along with those that reference users and other nodes. But to get its full effect — keys to the castle rooms, so to speak — you may want to download additional modules that add CCK fields formatted as: • Addresses • Currency • Media files, such as audio and video • Email addresses … or any of a wide range of other types. A list of such modules is at drupal.org/project/ Modules/category/88. Most of these modules have no direct interface at /admin, but instead subtly change the way you create content types by adding new fields, options, and controls. As always, read a module’s documentation if you’re unsure of how it works. CCK’s interface for creating fields. Theme shown: Nice Threads

We’ll demonstrate CCK by making a content type called “Executive” with fields for an image, name, position, and bio. You’ll first need to install the ImageField module, which is available at drupal.org/project/imagefield. You’ll also need to install two additional modules that ImageField requires: FileField (drupal.org/project/filefield) and ImageAPI (drupal.org/project/imageapi). 1.

2.

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


•

TopNotchThemes.com

•



3.

4.

5.

14

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


•

TopNotchThemes.com

•



• •

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

3. 4.

Go to /node/add/executive. 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. Leave the Name field empty. 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.


•

TopNotchThemes.com

•



5. 6. 7.

16

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”. Fill in the Bio field, making sure to change its Input Format to “Full HTML” if necessary. Click Save.

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

Blocks and block regions Every Drupal theme divides its pages into regions. These are indicated on the theme’s block administration page, at /admin/build/block/list/[theme name]. Generally speaking, the more regions a theme has, the more flexibility you get when designing your site. (Not all theme designers are equal, though, and some include regions that are of little value.) Drupal’s default theme, Garland, has five such regions; free themes usually have about that many or a few more. A typical TNT theme has over 15 block regions, carefully arranged for maximum versatility. Most block regions are “collapsible” — Many block regions adjust themselves to fit the screen when adjacent regions are empty. Here, we removed blocks from the “preface that is, other block regions fill in the spaces middle” block region, and the “preface first” and “preface last” they occupy if they’re empty. In the example 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


•

TopNotchThemes.com

•



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.

•

TopNotchThemes.com

•



•

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 . A final note: You might have noticed that the page for block administration changes its appearance to match the theme whose blocks you’re editing, regardless of what theme you’ve indicated on the theme configuration page (/admin/build/themes) or the administration theme page (/admin/settings/admin). But that makes sense when you think about it: Arranging blocks is a visual task that requires you to see the block regions available for a particular theme. As soon as you leave the block administration page, you’ll see the “correct” themes.

Menus The first thing you see on a brand-new Drupal site is a menu — specifically, the Navigation menu in the left column, linking to all sorts of administrative functions. It’s a good example of a Drupal menu, as it: • Contains links to nodes throughout the site. In fact, any node can become a menu item. • Contain links created by Drupal, by modules, or by you. At first, the Navigation menu contains links created by the Drupal software itself, and some other menu items come into existence when you install modules. You can add your own links to existing menus as well. • Is contained in a block, which can appear in any block region. The menu’s items — that is, the links themselves — are set up at /admin/build/menu-customize/navigation. However, to make that menu itself appear, the block containing it must be placed in a region. By default the Navigation block in the left column, but it could go pretty much anywhere. Not all menus look good in all regions, though. For example, a menu might be too vertically oriented to fit well in horizontally shaped region such as headers and footers. Some menus — including most in TNT themes — avoid this problem by intelligently adapting themselves to the shape of the regions in which they’re placed.


•

TopNotchThemes.com

•



19

There are two main ways to add items to existing menus: • Create a menu link by editing a node. On every node-editing page (reached by going to /node/[node number or alias]/edit) is an area titled “Menu settings”. There you can indicate the clickable text to appear in the menu, what menu it should appear part of, and what its “Parent item” is. In the example shown here, the Locations link is An example of primary links, expanded to enable a submenu the parent of the three city links. Such an (“frank’s blog”). The same primary links are also shown in a arrangement, where links are nested inside block to the right, while secondary links show up next to the search box in this theme. Theme shown: Floristo each 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 edit existing menu items. • Check the Expanded checkbox to show child items underneath a parent. If you’ve set up a hierarchical menu as described earlier, you can force Drupal to always display an item’s submenus by checking the Expanded box next to the parent item. This is also how you can create dropdown menus, although only some TNT themes have this feature. In addition to the Navigation menu, Drupal comes with two other special, built-in menus: Primary links and Secondary links. These typically appear automatically near the top of the page, arranged in a horizontal format as is shown above. They’re particularly handy for highlighting the most important locations in your site, as has become standard in web design over the years.

Views Finally we come to one of Drupal’s greatest strengths: the contributed module Views (drupal.org/project/views), which allows you to aggregate information from many nodes into pretty much whatever format you like. To get a feeling for the power of Views even before you install it, go to /admin/build/block, move the “Who’s new” block to a block region, click “Save blocks”, and then visit any page on your site. See that list of members who recently joined? That’s something that could be done in Views. In fact you can make Drupal display several formats of lists containing any combination of fields from any combination of nodes, users, files, comments, and other Drupal elements. Views’ flexibility and complexity can easily overwhelm you the first time you encounter it, and a complete discussion of its uses could easily fill a book. We’re going to walk


•

TopNotchThemes.com

•



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 on: 7. Click “Add display” while Page is selected on the popup above it. Up until now, you’ve been editing the view’s “defaults”, which would apply to the


•

TopNotchThemes.com

•



8.

9.

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). 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. 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 at any time.)

21

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


•

TopNotchThemes.com

•



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 did. At this point, save your view and visit it at /team. It looks pretty good, doesn’t it? There’s just one thing: If you followed this guide’s instructions from the beginning, the executive’s name doesn’t appear! That’s because when we created the page in the earlier “Creating CCK content” section, we left the Name field blank to avoid having their name appear twice — once in the required Title field, and once in the Name field. But with Views, we don’t have to display the required Title field, which doesn’t allow us to use styled text. Instead, fill in the Name field with the (HTML-styled) executive’s name and it will appear properly. But before we’re done here, we’d like to show you a trick to make it look even better. 15. Under “Basic settings”, next to Style, click the Unformatted link. You’ll see a list of intriguing (and unexplained) options below, including List, Table, and Grid. (You might also see other options if you have certain modules installed.) Try changing it to a Grid that’s 1 column wide — you might like the display better! Get to know these other Style options, since making a tiny change here will make a huge difference to your page’s appearance. There’s just one thing we forgot: Our “Team” menu still leads to the old Executives page, doesn’t it? You can change that either by editing the view itself (under “Page settings”), or by editing the menu you created earlier to change the URL it leads to (at /admin/build/menu). Finally, we’ll make the same information appear easily in other formats. In our case, we’ll create a block so people can learn about our executive team from any page by clicking links in the sidebars. 1. Select Block and click “Add display”. 2. Under Fields, click “Content: Image: Headshot (field_headshot)”. We’re going to remove the graphic of each executive from the Block view, because it would be too big to show up in the sidebars. 3. Click Override. This is a very important step, and many people ruin their views by forgetting it! If you don’t click Override, then any changes you make here will also affect the Page view at /team. In other words, you could easily undo all the work you just did! So remember: If you want to affect only one type of view, click Override. 4. Check “Exclude from display”, and then click Update. You still see the image, right? Look above at that Preview button and you’ll see why: You’re looking


•

TopNotchThemes.com

•



5.

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

23

Our finished block view. Theme shown: People Source

We now have a pretty good, simple listing of executives’ names linked to their descriptions, and their titles underneath. One common thing people want to do is to make all that information run together in one line to make the block more compact. We didn’t do that on our sample site, but here’s how you would if you wanted. 1. Under “Basic settings”, next to “Row style”, click the gear icon that looks like this: . This lets you change some options of how the fields appear in the block. 2. Click Override to avoid messing up your other views. 3. Check both “Content: Text: Name (field_name)” and “Content: Text: Position (field_position)”; in the Separator field, enter an asterisk and space (“* “). That will make them appear in a single line, but not run together. As always, click Update and look at the results below. Finally, a few finishing touches. 1. Under “Basic settings”, change the Style back from Grid to Unformatted. 2. Under “Block settings”, click None next to Admin and change it to “Executive links” or any other title you’ll remember. Click Update, and then Save. Now you have a block with links to your executives’ bios! To make it active, go to /admin/build/block and move the block to wherever you’d like it to appear: For help doing that, see the section “Blocks and block regions”. Need more help? Views has extensive documentation built into the module itself. However, you need to also install the Advanced Help module (at drupal.org/project/advanced_help) to access it. (The Views interface also includes a prominent link to the Advanced Help module.) Further documentation is available on Drupal.org: A good place to start is drupal.org/handbook/modules/views.


•

TopNotchThemes.com

•



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

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


•

TopNotchThemes.com

•


24

Quickstart Guide: How to build a great Drupal website

Recommend Documents