1.1 Installing Tapestry

You should place all themes in the sites/all/themes folder of your Drupal installation. If you have not installed additional themes yet, this folder may not exist. If this is the case, simply create a subfolder in the sites/all folder called themes.

Download the Tapestry theme distribution and extract the files. The Tapestry theme is distributed in a pkzip or a compressed tar file. Download the appropriate distribution for your platform and extract the contents using a tool such as pkZip, 7-Zip, or Stuffit. Linux users can extract the file using the tar command.

Locate the themes folder of the Tapestry distribution. Within this folder is a subfolder named tapestry. This is the folder that you will copy to your Drupal themes folder.

FTP/Copy/SCP the tapestry folder to the sites/all/themes folder of your Drupal installation.

Enable the theme by logging into the administrator account of your Drupal installation, pointing your browser to /yoursite/admin/build/themes, and checking the 'Enabled' checkbox next to the Tapestry theme. If you want to use Tapestry as the default theme for your site, select the Default button next to the Tapestry theme. Click the Save Configuration button to save the changes.

For detailed instructions on installing and configuring Drupal themes, check out the Drupal.org handbook page on theme installation.

1.2. Installing the Theme Settings API Module

The ThemeSettingsAPI module is only required for Drupal version 5. The features of this module are built into Drupal version 6. If you're using Drupal version 6, you can skip forward to the next section.

You should place all modules in the sites/all/modules folder of your Drupal installation. If you have not installed additional modules yet, this folder may not exist. If this is the case, simply create a subfolder in the sites/all folder called modules.

Download the Tapestry theme distribution and extract the files. The Tapestry theme is distributed in a pkzip or a compressed tar file. Download the appropriate distribution for your platform and extract the contents using a tool such as pkZip, 7-Zip, or Stuffit. Linux users can extract the file using the tar command.

Locate the modules folder of the Tapestry distribution. Within this folder is a subfolder named themesettingsapi. This is the folder that you will copy to your Drupal modules folder.

FTP/Copy/SCP the themesettingsapi folder to the sites/all/modules folder of your Drupal installation.

Enable the module by logging into the administrator account of your Drupal installation, pointing your browser to /yoursite/admin/build/modules, and checking the 'Enabled' checkbox next to the Theme Settings API module. Click the Save Configuration button to save the changes.

For detailed instructions on installing and configuring Drupal modules, check out the Drupal.org handbook page on module installation.

1.3. Configuring Tapestry

If you have successfully installed and enabled the Theme Settings API module (or if you're running Drupal version 6), you can easily configure many aspects of the Tapestry theme from the Drupal administration menus.

Drupal 5 Users: You can use the tapestry theme without installing the Theme Settings API module. However, you will not be able to control the theme features as described below without this module installed and enabled.

Point your browser to /yoursite/admin/build/themes/settings/tapestry. At the bottom of this form is a series of options specific to the Tapestry theme. Each of the available options is described below. Modify the options to your liking and click the Save Configuration button at the bottom of the page. Your changes will take effect immediately.

Style: This option allows you to select one of the 20 built-in styles that tapestry provides.

Fixed Width Size: This option allows you to specify the width of the Tapestry content window. The default value is 850, which represents a page that is 850 pixels wide.

Outside Sidebar Location: This option determines which side of the page the Outside Sidebar will be displayed on.

Outside Sidebar Width: This option is used to specify the width, in pixels, of the outside sidebar.

Inside Sidebar Mode: This option allows you to select which side of the page the sidebars are displayed. You can choose to display the content between sidebars, to display both sidebars to the left of the content, or to display both sidebars to the right of the content.

Left Sidebar Width: This option is used to specify the width, in pixels, of the left sidebar.

Right Sidebar Width: This option is used to specify the width, in pixels, of the right sidebar.

Font Family: This option allows you to select the default font family for your site. You can select one of the provided options, or you can select Custom and specify your own font selector below.

Custom Font-Family Setting: If you selected Custom from the Font Family drop-down menu, you can specify a custom font-family string here. The string should be valid in the context of a CSS definition. Font family names that includes spaces should be enclosed in quotes, and multiple font names should be separated by commas.

Include Local Content File: If this option is enabled, Drupal will load a CSS file with the name specified beolow during the page-load sequence. This allows you to create a custom CSS file with site-specific CSS customizations. Isolating theme modifications and site-specific CSS in this manner prevents future theme updates from overwriting your changes.

Local Content File Name: If the Include Local Content File option is enabled, this option is used to specify the file name of the local content file. Note that the path is relative to the tapestry theme root folder.

Suckerfish Menu Alignment: Using this option, you can select to place the Suckerfish menu on the left side of the page, on the right side of the page, or centered in the page.

Enable Suckerfish Javascript for IE6: 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 this checkbox. If you do not enable this option, suckerfish menus will not work in IE6.

Use Themed Logo: You may choose to display the default theme logo by checking the Logo checkbox near the top of this page. By default, Drupal looks for a file named logo.png in the theme's root folder. If you additionally enable the Use Styled Logo checkbox, Drupal will look for a file named logo.png in the tapestry/images/selected-style folder. This allows you to create a different logo file to match the colors of each available Tapestry style.

Show Breadcrumbs: If this option is enabled, Drupal will display breadcrumbs in the upper-left corner of each page.

Use Icons: If this option is enabled, Tapestry will decorate primary links menu items and various Drupal elements with icons from the Tango Project Icon Library.

Alternate Icons for IE5/6: When enabled, Tapestry will use a different set of icons for IE6 than it will for other browsers. This option is only used if the Use Icons checkbox is enabled.

Use IE PNG Fix: When this feature is enabled, Tapestry will load a javascript program that allows IE6 to display transparent PNG images.

1.4. Installing 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.

You should place all modules in the sites/all/modules folder of your Drupal installation. If you have not installed additional modules yet, this folder may not exist. If this is the case, simply create a subfolder in the sites/all folder called modules.

Download the Tapestry theme distribution and extract the files. The Tapestry theme is distributed in a pkzip or a compressed tar file. Download the appropriate distribution for your platform and extract the contents using a tool such as pkZip, 7-Zip, or Stuffit. Linux users can extract the file using the tar command.

Locate the modules folder of the Tapestry distribution. Within this folder is a subfolder named blocktheme. This is the folder that you will copy to your Drupal modules folder.

FTP/Copy/SCP the blocktheme folder to the sites/all/modules folder of your Drupal installation.

Enable the module by logging into the administrator account of your Drupal installation, pointing your browser to /yoursite/admin/build/modules, and checking the 'Enabled' checkbox next to the Block Theme module. Click the Save Configuration button to save the changes.

For detailed instructions on installing and configuring Drupal modules, check out the Drupal.org handbook page on module installation.

1.5. Configuring 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.

Before you can use Tapestry's styled block templates, you will need to configure the Block Theme module. These instructions assume that you have already installed and enabled the Block Theme module.

Point your browser to /yoursite/admin/settings/blocktheme, where you will find the Block Theme Module settings page.

Select and copy the text below, and then paste it into the Custom Block Templates edit box of the module configuration page.

Click the Save Configuration button to save your changes.

blk-outline1|Outline1
blk-outline2|Outline2
blk-outline3|Outline3
blk-outline4|Outline4
blk-solid1|Solid1
blk-solid2|Solid2
blk-solid3|Solid3
blk-solid4|Solid4
color0-pagebg|Color0 Page BG
color1-pagebg|Color1 Page BG
color2-pagebg|Color2 Page BG
color3-pagebg|Color3 Page BG
color4-pagebg|Color4 Page BG
stripe0-pagebg|Stripe0 Page BG
stripe1-pagebg|Stripe1 Page BG
stripe2-pagebg|Stripe2 Page BG
stripe3-pagebg|Stripe3 Page BG
stripe4-pagebg|Stripe4 Page BG
blk-nomargins|No Margins
blk-rollover1|Rollover 1
blk-rollover2|Rollover 2

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.

3.1. Adding new Icons to Tapestry

Tapestry includes a collection of icons from the Tango Project Icon Library and from the FamFamFam Mini Library. If you enable the Use Icons checkbox on the theme configuration page, Tapestry will use these icons in various places throughout your site.

Tapestry can decorate menu items in the Primary Links menu with icons. The theme assigns a CSS class to each menu item in the Primary Links menu. If the assigned class name matches one of the menu classes defined in the icons.css file, the Tapestry will display the icon specified for that class.

Tapestry generates the CSS class name of a menu item based on the item's Title field. The title string is converetd to lowercase and filtered to eliminate spaces and special characters, and it is prepended with the string item-. A menu item with a Title of Home will be assigned a CSS class of item-home.

Let's take a look at a portion of CSS code from the file icons.css, which is located in the /tapestry/css folder.

/* primary links menu icons */
#primary li.item-home a {
	background: url(../icons/16x16/actions/gohome.png) left no-repeat;
}

#primary li.item-ideas a,
#primary li.item-products a,
#primary li.item-features a {
	background: url(../icons/16x16/status/info.png) left no-repeat;
}

#primary li.item-faq a,
#primary li.item-help a,
#primary li.item-handbook a {
	background: url(../icons/16x16/apps/help.png) left no-repeat;
}

Note that the first selector in the file defines a background image for the li.item-home a tag. This will match the class name generated by Tapestry for the menu item with a Title of Home, and therefore, the gohome.png icon is displayed.

Looking at the next selector group, we find that the info.png image will be used for Primary Link menu items with the name Ideas, Products, or Features. Because Tapestry processes the menu title, this image would also be used for the Titles ideas, IDEAS, or iDeAs.

Tapestry provides a handful of icons and CSS selectors for some common menu Titles. But there's no way we can anticipate every possible Title. If your Primary Links menu has an item that you want to decorate with an icon, you only need to add a new selector to the icons.css file and provide the icon.

Your new selector will need to specify the icon file name, and the class name will need to match the string generated by Tapestry for the menu item. It's pretty easy to determine the CSS class name for titles that are made up of a single word. Simply convert the Title string to lower case. For multi-word titles, you should omit spaces from the class name. If you're having trouble determining the generated class name, use your browser's View Source feature. Or better yet, use the Firebug plug-in for Firefox.

You can use PNG, JPG, or GIF files for your menu icons. Just be sure to get the filename correct in the CSS selector. You can place your icons anywhere within the Tapestry folder structure as long as the path in the CSS selector is correct. We recommend keeping them within the icons folder just to keep things tidy.

If the Alternate Icons for IE5/6 option on the theme settings page is enabled, older browsers will use the icons specified by the CSS file icons-ie6.css. This file is similar to the icons.css file, but the icon paths reference the alternate icons.

Tapestry only includes a small subset of the full Tango Project and FamFamFam Libraries. If you download the entire libraries from their sites, you will have thousands of icons to choose from. We've maintained the directory structure of the Tango library in Tapestry's icons folder to make adding new icons easy.

3.2. Creating Your Own Block Theme Templates

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.

A Block Theme Template is simply a variation of the standard block.tpl.php file that Drupal uses to style blocks. The simplest Block Theme Templates might do nothing more than assign a unique CSS class to the block so that it can be styled using CSS. A more complex template might include background images, rollover effects, and other treatments.

The default block.tpl.php file used by Tapestry looks like this:

<div id="block-<?php print $block->module .'-'. $block->delta; ?>" 
class="block block-<?php print $block->module ?> unstyled-block">

<?php if ($block->subject): ?>
  <h2><?php print $block->subject ?></h2>
<?php endif;?>

  <div class="content"><?php print $block->content ?></div>
</div>

Tapestry includes several Block Theme templates that differ from this default file only in that they assign a unique CSS class name to the block. For example, here's a look at the blk-solid1.tpl.php template file:

<div id="block-<?php print $block->module .'-'. $block->delta; ?>" 
class="block block-<?php print $block->module ?> blk-solid blk-solid1">

<?php if ($block->subject): ?>
  <h2><?php print $block->subject ?></h2>
<?php endif;?>

  <div class="content"><?php print $block->content ?></div>
</div>

Notice that the only difference between the two files is the assigned class names (highlighted in red.) If you take a look in the style.css file, you will find the following CSS code:

.blk-solid { margin: 5px; padding: 5px; }

Additionally, the individual CSS files for each individual color style will further define the block theme template. For example, the file gerberdaisy.css includes the following CSS code:

.blk-solid1 { background: #EABE10;  color:#fff; }
.blk-solid1 a { color:#9A8C80; }

The remaining block theme templates are similarly 'wired' to the style.css file for basic formatting, and to the individual color style CSS files for specific color styling.

To create your own block theme templates, duplicate either the default block.tpl.php file or an existing block theme template file. Rename the file, being sure to end the filename with .tpl.php. Modify the class name assignments in the template to reference a unique class name. And then add the necessary CSS code to style.css and to the CSS file for the color style you are using, being sure to match the CSS class name to the one you used in the template file.

Before you can use your new block theme template, you'll need to add it to the list of available templates on the Block Theme Settings page.

3.3. Creating New Tapestry Color Styles

Tapestry allows you to choose from 20 different color styles. But if you want a different color scheme, we've designed Tapestry so that it would be relatively simple to create new styles.

We say 'relatively' simple because it's not trivial. If you are well versed in Adobe Fireworks, if you're comfortable editing CSS and PHP code, and if you have a good understanding of Drupal, then you should have few problems creating a new color scheme.

But if editing CSS code is not your cup of tea, we would be happy to create a custom version of Tapestry that matches your color scheme, your logo, etc. for a very reasonable fee. Contact us and let us know what you want.

This section offers a brief summary of the steps necessary to create a new Tapestry color style. A more complete breakdown of every step required is well beyond the scope of this handbook.

Warning - What follows is a sloppily-worded description of a complex process. We will gloss over important details, neglect to mention necessary steps, describe things in gramatically incorrect run-on sentences, and otherwise fail to shed enough light on the process.

Editing the Source Fireworks File

The images used by Tapestry are generated from a source PNG file created with Adobe Fireworks. This source PNG file is available for download. If you have a copy of Fireworks, you can edit the source file, modify the existing color styles or create a new one, and export new images for use with the theme.

Each of Tapestry's available color styles is implemented as a separate frame in Fireworks. To create a new color style, we usually duplicate an existing frame, rename this duplicate with the name of our new style, and then modify the new frame until we get the results we're seeking.

The web slice layer in the soruce file relies on the elements of the page to remain in their existing locations. This means that, for the most part, you don't want to move, resize, or otherwise modify the size or shape of elements of the page. What you can modify is the colors and the gradients used by elemetns of the page.

You can export the image slices to any folder, but you will eventually need to place them in a sub-folder of the tapestry images folder. Tapestry will use this folder name to reference your color style, so don't use spaces or special characters in the name.

We export the slices for each frame separetely. Select the web slice layer (and thus all of its contents), select the Export menu option, check the Selected slices only box, check the Current frame only box box, check the Current page only box, uncheck the Include areas without slices box, and click Save.

Creating the CSS for Your New Color Style

Like most Drupal themes, the Tapestry theme includes a CSS file called style.css that is located in the theme's root folder. However, Tapestry isolates all of the CSS code that is related to colors and background images to separate CSS style sheets. For each of the available color schemes, there is one CSS style sheet in the css folder.

The easiest way to create the CSS file for a new color scheme is to duplicate an existing style's CSS file, rename the file to reflect your new style's name, and modify this new CSS file. The file name should exactly match the name of the images sub-folder that contains the images for this color style.

Most Tapestry color schemes are composed of five major colors, plus a default text color (usually #1D2326), and sometimes White (#FFFFFF). A very effective way to 'get started' customizing your new style's CSS file is to use your editor's search-and-replace feature. Here's how it works.

From the CSS file that you duplicated, determine the RGB values for the five major colors of the style. If you duplicated the file gerberdaisy.css, you'll find that the five major colors are #FFFFFF, #EABE10, #8B0000, #9A8C80, and #000000. Using your editor's search-and-replace function, change all of the occurances of an existing color to one of your new scheme's colors. Repeat for the remaining colors.

Just to make things more difficult, you will notice that we often employ the CSS shorthand notation for standard RGB colors, like using #FFF instead of the more complete #FFFFFF. You'll have to take this into account as you're modifying the file.

You'll also want to change the path names used to reference the image files. So if you started by duplicating the allstar.css file and you're creating a color style called bigshot, be sure to replace all occurances of images/allstar with images/bigshot.

But wait. It's never that simple. While this process will get the desired colors into your new color style, there will no doubt be several 'problem areas' where you will need to modify text colors, link colors, and/or background colors for specific elements. Maybe you'll only need to change a few things, or maybe you'll need to change everything.

To perform this process effectively, you almost have to use the Firebug plugin for Firefox. It also helps to have a page similar to our Block Themes Page so that you can look at every element of the theme.

Integrating Your New Color Style Into Tapestry

Once you've exported the images for your new color style from Fireworks and created a new CSS file, you'll want to integrate it into the Tapestry framework. You will need to put all of the files in the appropriate locations, and you will need to modify one of the Tapestry theme files.

You sould place the image files that you exported from Fireworks in a subfolder of the images folder. The name of this folder will need to match other elements that we will set up next.

You should place the CSS file for your new color style in the css folder. The file name should match the folder name containing the images, and the extension should be css.

In the theme's root folder, find the file settings.php and open it with your favorite source code editor. Locate the table of current color style names near the top of this file. It should look something like this:

  $form['tapestry_style'] = array(
    '#type' => 'select',
    '#title' => t('Style'),
    '#default_value' => $settings['tapestry_style'],
    '#options' => array(
      'allstar' => t('All Star'),
      'bluecollar' => t('Bluecollar'),
      'bogart' => t('Bogart'),
      'bizcasual' => t('Business Casual'),
      'cactusbloom' => t('Cactus Bloom'),
      'dustypetrol' => t('Dusty Petrol'),
      'firenze' => t('Firenze'),
      'fusion' => t('Fusion'),
      'gerberdaisy' => t('Gerber Daisy'),
      'haarlemmod' => t('Haarlem Modern'),
      'kalamata' => t('Kalamata Cream'),
      'kobenhavn' => t('Kobenhavn Classic'),
      'antoinette' => t('Marie Antoinette'),
      'modhome' => t('Modern Home'),
      'modoffice' => t('Modern Office'),
      'orientexpress' => t('Orient Express'),
      'woodworks' => t('Scandinavian Woodworks'),
      'techoffice' => t('Tech Office'),
      'watermelon' => t('Watermelon'),
    ),
  );

Add a new entry to the options array to reflect your new color style. The array index name must match both the name of the CSS file and the name of the subfolder in the images folder containing your images. The first entry in the existing table, for example, references a color style called allstar that is described by the file /tapestry/css/allstar.css and uses the images located in /tapestry/images/allstar.

The array value is the string that will be displayed as an option in the Style selection control on the theme settings page. Use this value to provide a human readable name for your color style. Save your changes.

Once you've made these changes, copy your new color style's CSS file, image folder, and the modified settings file into the appropriate places of your Drupal installation. Point your browser to the Tapestry theme settings page and select your new color style from the list.

Frequently Asked Questions

Q: Can I use PhotoShop instead of Fireworks?
A: No.

4.1. Setup and Configuration Issues

Here's a list of some of the more common questions we get about the installation and configuration of Tapestry.

Why can't I see Tapestry in my list of available Drupal themes?

Most likely, you have not copied the tapestry folder into the appropriate place on your host. You should copy the tapestry theme folder into the sites/all/themes folder. You should also ensure that the tapestry folder has appropriate perrmissions (usually x755).

Why can't I see the Tapestry configuration options on the theme settings page?

Most likely, you have not installed (or not enabled) the ThemeSettingsAPI module. If you downloaded Tapestry from our website, the ThemeSettingsAPI module is included in the download. However, you'll still need to install the module. If you download the theme from somewhere else, you may also need to download the module from drupal.org. After installing the module, you must enable it.

Why can't I select a Custom Block Theme when I'm creating a block?

Possibly you have not installed (or not enabled) the Block Theme module. If you downloaded Tapestry from our website, the Block Theme module is included in the download. However, you'll still need to install the module. If you download the theme from somewhere else, you may also need to download the module from drupal.org. After installing the module, you must enable it.

Possibly you have not configured the Block Theme Module. After installing the module, you'll need to do a one time configuration so that the module knows about the block theme templates provided by Tapestry.

When you create a new block in Drupal 5 by clicking on the Add block tab of the admin/build/block page, Drupal only allows you to specify the block description, the block body, and the input type. Only after you've created the block does Drupal let you modify the many other block attributes. After creating your block, click the configure link next to the block name on the admin/build/block page. You should see the Custom theme selection box below the Input type selector.

Why don't my suckerfish menus drop down?

Possibly you have not configured the menu options properly. A common mistake is to forget to check the Expanded checkbox for one or more parent items.

4.2. Layout Issues

There's a lot of things going on when Drupal generates a page of XHTML code for visitors to your site. Some of this code is generated by Tapestry, some by the modules you have installed and enabled, some by Drupal itself, and some by your unique site content. If one component of this process is broken, the entire page can fail to render properly.

Broken layouts are the result of invalid or incomplete markup somewhere in the page. The most common problems occur whenever there are one or more unclosed HTML elements in the page. A single <div> without a matching </div> can cause the entire page to 'fall apart'.

There are many possible sources of such incomplete markup. But there are three sources of layout problems that we encounter so frequently that they warrant special attention.

Broken Layouts caused by teaser breaks

The default home page for a standard Drupal site is a list of node teasers. A teaser is simply the beginning portion of a node. Drupal doesn't really store a separate teaser. It simply marks a point in the node content called the teaser break. Whenever Drupal displays a node teaser, it displays the content of the node up to the teaser break.

You can configure the point in a node where Drupal will insert teaser breaks to some degree. The Post Settings page (admin/content/node-settings) allows you to set the default teaser break location to occur after a fixed number of characters (i.e. insert teaser break after 200 characters.) You can also set this value to Unlimited, which will disable node teasers. By default, a standard Drupal install will insert teaser breaks after 600 characters.

Be aware that changing this value will not change the teaser break location for existing nodes. It will only change the default value imposed on newly created or edited nodes.

Teaser breaks aren't really a problem if your nodes contain nothing but plain text. But what if your nodes contain HTML code? And what if this HTML code includes tables or divs that span across multiple lines. And what if Drupal decides to insert a teaser break right in the middle of that HTML code? Things could turn ugly.

If your nodes contain anything other than plain text, then the Drupal default mechanism of arbitrarily inserting a teaser break after a fixed number of characters probably won't work for you. There are essentially three effective alternatives.

If you don't want or need teasers, then change the Length of trimmed posts value to Unlimited. Drupal will not insert teaser breaks, and thus an improperly trimmed post will never break your layout.

Another option is to manually insert teaser breaks by including the string <!--break--> at an appropriate point in your node content. The presence of this manual teaser break in a node will override the default Drupal teaser behavior. See this drupal.org handbook page for further information.

A third option is to install a module that automatically corrects invalid HTML code, like the HTML corrector. This module is so useful that it's been made part of the Drupal 6.0 core.

Broken Layouts caused by WYSIWYG editors

Many Drupal users install a WYSIWYG editor so that they can format their site content without having to manually create the HTML code. Editors such as TinyMCE and FCKeditor are basically mini-HTML editors for Drupal node content.

The code generated by these editors contains HTML markup... sometimes, a LOT of it. As such, nodes created with such editors are particularly susceptible to the teaser break issues described above. If you are using one of these editors, then you should absolutely also be running the HTML corrector module.

Broken Layouts caused by over-sized content

This one is simple to understand. If you publish a block that contains a 600-pixel-wide image to a sidebar that is configured to be 300 pixels wide, something has to give.

There are things that we could have done to Tapestry in an attempt to 'contain the damage' caused by such situations (like applying the overflow:hidden attribute to blocks.) However, such attempts would inhibit the ability to use the theme in creative ways (like using negative margins to make an image 'break out' of a block's boundaries.) So we've chosen to make you, the content provider, responsible here. Ensure that your content is compatible with your layout.

5.1. Using Images in Tapestry Regions

Drupal provides a myriad of options for displaying images, and numerous modules provide some variation of this capability.

However, you can create a banner block like the one above with a standard Drupal installation by simply inserting HTML code into the block body. You can place images in any Tapestry region. We'll use the Banner region as an example, but the things covered here apply to all regions.

Tapestry provides a Banner region below the masthead. It is visible on this page as the fabric image. Although this region was created with images in mind, you can use this region for any type of content.

If you want to duplicate the style of banner used on this page, you'll need to start with the image. We placed our image in the /files/images folder of our Drupal site. If you choose to place your images in a different folder, you will want to ensure that Drupal can access this folder and that the file is is readable by Drupal.

Next, point your browser to /yoursite/admin/build/block, click on the the Add Block tab and enter a block description (we called ours 'banner'). For the block body, you'll want to enter the HTML code necessary to display the image. The block body for the banner image on this page looks like this:

<img src="/files/images/banner.jpg" />

Finally, and this is important, change the Input Format of your block to Full HTML. If you do not change the input format to Full HTML, Drupal will not display your image. Then click the Save Block button.

In order to achieve the edge-to-edge effect displayed here, we were careful to match the width of the image (900 pixels) to the width of our site. We also appied the nomargins custom block theme to this block so that Tapestry would not apply the default block padding.

Now that you have a banner block, you can publish it to the banner region. Point your browser to /yoursite/admin/build/block, select the banner region from the drop-down list next to your new banner block, and click the Save Blocks button.

5.2. Placing Ads on Your Tapestry Site

Using one of the popular advertising-related modules availble for Drupal, you can easily place advertisements on your site. This site uses the Google AdSense module to provide the advertisements that you see. Before you can use this module, you'll need to register for a Google AdSense account and obtain a Google AdSense client ID.

Like most of the available ad modules, the Google AdSense module creates blocks that you can publish to different regions of your site. Tapestry provides regions that were designed with advertisements in mind, but you can publish ads to any tapestry region. The basic steps are 1.) configure an AdSense block to display the ad format you wish to use, and 2.) publish that AdSense block to a region.

Let's try an example. The Leaderboard region at the top of the page was designed with a standard size 728x90 leaderboard ad in mind. Assuming you have the Google AdSense module installed and configured, you can point your browser to /yoursite/admin/build/block, select one of the unconfigured AdSense blocks by clicking on the Configure link next to it, and change the Ad format to 728x90: Leaderboard. Once you've saved your configuration changes by clicking on the Save Block link, you can publish your new ad block. Select the Leaderboard region from the drop-down list of regions next to the newly configured Leaderboard Ad block and click the Save Blocks link.

Advertising modules provide a wide range of ad formats. You can use the configuration features of Tapestry to match your site layout to the format of ads that you want to display. For example, if you want to place a Google AdSense 250x250 square ad block in the left sidebar, then you will want to ensure that the left sidebar is wide enough to accommodate this ad block. Point your browser to /yoursite/admin/build/themes/settings/tapestry and ensure that the left sidebar is at least 250 pixels wide.