2.1. Using Tapestry Regions

Tapestry provides 30 regions that you can publish blocks to (along with a region for the Suckerfish menu.) The Tapestry Regions Page shows each of the available regions. Looking at this page will give you a feel for where the regions are in relation to the one another.

The Basics

First, let's get the terminology down. A Drupal page typically includes a Content area and, optionally, one or more Blocks, which are published to Regions.

The Content area is the main part of the page, and is made up of Nodes. A node can be a story, a blog post, a forum post, or a custom node type. For the most part, Drupal manages the Content area, and you direct it using the Drupal administion menus.

A Region is essentially a physical place on the page. For example, a left sidebar region might be provided to display something to the left of the Content area. Regions are provided by the theme, and different themes will provide a different selection of regions.

A Block is a piece of content. Blocks can have a title and body text. In order to display a Block on your site, you publish it to a Region. In selecting a Region for a particular Block, you are determining where on the page that Block will be displayed.

Collapsible Regions

Tapestry's Regions are grouped into collapsible sections. The User1, User2, and User3 regions are the blocks below the masthead. We collectively call these three regions Section1. Similarly, User4, User5, and User6 make up Section2. User7 through User15 make up Section3, Section4, and Section 5.

In order to display a Section, simply publish a block to one of the User Regions in that Section. If you publish to only one User Region in a Section, that Region will fill the width of the page. Publish to two or to all three User Regions in a Section, and the Regions will split the horizontal space accordingly.

Similarly, if you publish content to the Outside, Left or Right Sidebars, they will appear. Publish nothing to one of the sidebars and it collapses out of sight. And the same applies to the Banner Region below the Masthead.

If you publish nothing to one of the sidebars, the main Content area will grow to fill the horizontal space normally taken by the sidebar. Publish to none of the sidebars and the main Content area will fill the width of the page.

A region will stretch vertically as much as necessary to display the content you publish to it. You can publish as many blocks to an individual region as you want. When you publish more than one block to a region, the blocks are stacked vertically atop one another. You can determine the order that blocks appear within a region by configuring the Weight of each block.

2.2. Using Tapestry Sidebars

Tapestry provides three sidebar regions, along with some configuration options that allow you to manage the placement of those sidebars. Using these few simple options, you can create a variety of different page layouts.

There is one Outside Sidebar, so that's what we will call it, and there are two Inside Sidebars that we will call the Left Sidebar and Right Sidebar.

Using the Tapestry theme settings, you can choose to display the Outside Sidebar on either the left hand side of the page or the right hand side of the page. There's also an option for the placement of the Inside Sidebars. You can choose to place the page Content between the inside sidebars, to the left of the inside sidebars, or to the right of the inside sidebars. And you can independently configure the width of each sidebar.

By combining these sidebar configuration options with Drupal's region assignments and block visibility features, you can create numerous differing page layouts. This page shows examples of just some of the possibilities.

Two Column Layouts

You can produce a two-column layout using any of the three available sidebars.

Three Column Layouts

Three-column layouts can include both Inside Sidebars, or either one of them combined with the Outside Sidebar.

Four Column Layouts

Four-coulmn layouts will use all of the available sidebars, and you have a wide variety of layout possibilities.

2.3. Using the Block Theme Module

Important! The Block Theme Module is not currently available for Drupal version 6. Therefore, the Block Theme Templates are not currently included in Tapestry for Drupal 6.

The Block Theme Module allows Tapestry to provide site administrators with the ability to assign a CustomTheme to each block on your site. Assigning a Custom Theme to one of your blocks will change the appearance of that Block. Tapestry provides many different custom block theme templates that you can use to change the apperance of the blocks on your site.

To get an idea of the custom block themes that are available in Tapestry, take a look at the Block Themes Page. This page shows a sample block for each of the Custom Themes that are available. Every one of Tapestry's 20 color styles have a unique assortment of custom block theme templates that can be used on your site.

Before you can use Tapestry's custom block themes, you will need to configure the Block Theme Module. These instructions assume that you have already installed and enabled the Block Theme Module as described in this tutorial. It further assumes that you have successfully configured the Block Theme Module as described in this tutorial.

Once you have correctly installed and configured the Block Theme module, you will be able to assign a custom block theme to any block on your site. Point your browser to /yoursite/admin/build/block and click the configure link next to the block you want to modify.

On this page, you will see a drop-down box named Custom Theme. Select a custom block theme from the list and then click the save block button.

Using these same steps, you can assign a custom block theme to any or every block of your site. Use this feature to add variety, color, and interest to your site's pages.

Tapestry also includes a couple of special purpose utility block themes:

The No Margins block theme eliminates the padding and margins that Tapestry normally applies to blocks. This might be used, for example, to create a block containing an image that extends the full width of the page.

The Rollover1 and Rollover2 block themes will produce a rollover effect for blocks that contain unordered lists of links (which is something that Drupal modules frequently generate.)

2.4. Using Suckerfish Menus

Tapestry has son-of-suckerfish menus integrated into the theme. Using this feature, you can create a standard Drupal menu and present it as a dynamic drop-down menu that is compatible with most browsers.

Tapestry provides a region called suckerfish menu. If you publish a standard Drupal menu in this region, it will be displayed as a suckerfish drop-down menu. However, there are a few things you need to do in order for everything to work correctly.

To start with, you'll need a menu. You can create a new menu in Drupal by pointing your browser to /yoursite/admin/build/menu and clicking on the Add Menu tab. After creating a menu, you'll want to add your menu items one at a time by clicking on the Add Item link and entering the item information. Use the Parent Item selection box to organize your menu items into the desired structure.

It is very important that all Parent Menu Items in a suckerfish menu have the Expanded checkbox enabled. This option instructs Drupal to generate HTML code for the entire menu structure. If you do not enable this feature for a particular parent menu item, you will not see its child menu items.

Once you've create a menu and enabled the Expanded option for all parent menu items, you can publish the menu to the suckerfish region. Point your browser to /yoursite/admin/build/block and select the suckerfish menu region from the selection box next to your menu block name. Then click the Save Blocks button.

Tapestry's suckerfish menu is designed to present a single horizontal row of top-level menu items. If you publish a menu that has too many top-level items to fit in one row, you're not likely to get the behavior you expect.

Important! Internet Explorer 6 has a bug related to the CSS hover attribute that prevents pure CSS suckerfish menus from working correctly. Tapestry provides a javascript file that will work around this problem and allow suckerfish menus to work correctly in IE. If you want to use this feature, you must enable the 'Enable Suckerfish Javascript for IE6' checkbox on the theme settings page. If you do not enable this option, suckerfish menus will not work in IE6.

2.5. Using Tapestry Icons

Tapestry provides a framework for using icons throughout your Drupal site. The theme includes some icons from the Tango Project Icon Library and from the FamFamFam Mini Library to get you started. And you can add your own icons or replace the existing ones.

To enable icons, point your browser to the theme settings page, enable the Use Icons checkbox, and click the Save configuration button.

With icons enabled, Tapestry will adorn many standard Drupal elements with icons as described below. It will also adorn menu items in the Primary Links menu with icons based on the item's title. And it will add icons to the Custom Typography styles.

Internet Explorer 6 Support

Older versions of Internet Explorer (like versions 5.5 and 6) have limited or no support for PNG images with alpha transparency. If your site includes transparent PNG images, these older browsers will display such images with an ugly grey box around it. The Tango icons, along with many other icons and images, use the PNG alpha transparency, and therefore do not render properly in these older browsers.

Tapestry can use a different set of icons for these older browsers. To enable this feature, enable the Alternate Icons for IE5/6 option on the theme settings page.

Built-In Icons

Tapestry includes a subset of the Tango Project Icon Library and the FamFamFam Mini Icon Library . If you enable the Use Icons option on the theme settings page, Tapestry will display icons from the Tango icon library. If you also enable the Alternate Icons for IE5/6 option on the theme settings page, Tapestry will display icons from the FamFamFam library for visitors browsing your site with older versions of Internet Explorer, while still displaying the Tango icons for other browsers.

Tango Menu Icons

Menu items in your site's Primary Links Menu are decorated with icons according to the text in the menu title. The following icons will automatically be displayed for menu items with the matching titles:

•  Home
•  Ideas, Products, Features
•  Help, FAQ, Handbook
•  Groups, Forum, Forums, Community
•  Contact
•  Calendar
•  News
•  Blog
•  Pictures, Photos
•  Songs, Tunes, Music
•  Videos, Films, Movies
•  Search
•  Awards, Certificates, Testemonials
•  Administer
•  Drupal

Tango Drupal Element Icons

•  User profile links
•  Read more link
•  Comment Module - Comment links
•  Comment Module - Delete link
•  Comment Module - Edit link
•  Comment Module - Reply link
•  Book Module - Printer firlendly page link
•  Book Module - Add child page link
•  Blog module - Blog username link

FamFamFam Menu Icons

•  Home
•  Ideas, Products, Features
•  Help, FAQ, Handbook
•  Groups, Forum, Forums, Community
•  Contact
•  Calendar
•  News
•  Blog
•  Pictures, Photos
•  Songs, Tunes, Music
•  Videos, Films, Movies
•  Search
•  Awards, Certificates, Testemonials
•  Administer
•  Drupal

FamFamFam Drupal Element Icons

•  User profile links
•  Read more link
•  Comment Module - Comment links
•  Comment Module - Delete link
•  Comment Module - Edit link
•  Comment Module - Reply link
•  Book Module - Printer firlendly page link
•  Book Module - Add child page link
•  Blog module - Blog username link

2.6. Using The Primary Links Menu

Tapestry displays the Primary Links menu at the top right of the content portion of the page, just below the masthead. If you enable the Use Icons checkbox on the Theme Settings Page, Tapestry will decorate menu items in the Primary Links Menu with icons as described in this Handbook Page. Obviously, this means that you must first create a Primary Links Menu and enable it.

You can designate any Drupal menu as your primary links menu. A standard Drupal installation will come with a menu named Primary links, but you can select another menu to act as your sites Primary Links. Drupal also supports a Secondary Links Menu, but Tapestry does not provide any special support for seconday links.

You can crate a new menu by clicking on the Add menu tab of the admin/build/menu page, or you can add and delete items from an existing menu to get the structure you want. If you want Tapestry to decorate the menu item with an icon, be sure to follow the menu item naming conventions listed on this Handbook Page.

Once you've got your menu and menu items created, you need to tell Drupal that this will be the Primary Links menu. By pointing your browser to /yoursite/admin/build/menu/settings, you will have an opportunity to designate your Primary Links menu. Select your menu from the Menu containing primary links dropdown, and then click the Save configuration button.

Your new menu should appear immediately. You don't need to publish your new Prinary Links menu to a region. As long as you've designated a menu to provide the Prinary Links for your site, Tapestry will display it.

Tapestry's Primary Links menu is designed to present a single horizontal row of top-level menu items. If you publish a menu that has too many top-level items to fit in one row, you're not likely to get the behavior you expect.

2.7. Using Tapestry's Custom Typography

Tapestry provides several custom styles that you can use in your node or block content. You can see examples of these styles on the Typography Sample page.

You can use the custom typography styles on your site by inserting a small amount of HTML code into your node or block content. Each of the examples on the Typography Sample page specify the HTML code necessary to use that style.

For example, the alert style example on the Typography Sample page specifies that you'll need to wrap your content in a set of <span class="alert">...</span> tags.

Within your block or node body, you could enter the following code:

<span class="alert">This is really important!</span>

You will need to change the Input format of your node or block to Full HTML, or else Drupal will filter out your HTML code.

If you've done everything correctly, Tapestry will display this as:

This is really important!

Similarly, if you create a block or node with the following code:

<blockquote>This is a really famous quote from a really famous person that 
was taken from a really famous story out of a really famous book.</blockquote>

Tapestry will display it as:

This is a really famous quote from a really famous person that was taken from a really famous story out of a really famous book.

2.8 Using The IE PNG Fix

Internet Explorer versions 5.5 and 6.0 do not display transparent PNG files correctly. Instead of applying the image transparency, the browser displays transparent images in an ugly gray box. Tapestry includes a javascript-based fix for this bug. To enable the use of the IE PNG fix, simply select the IE PNG Fix checkbox from the theme configuration page.

Tapestry's IE PNG fix is implemented using Drupal's built-in jquery framework, so it should not interfere with any additionally installed modules. However if you do experience a problem (or if you just don't use PNG files on your site), try disabling the IE PNG fix.