The following sections describe how to customize various aspects of the Tapestry theme.
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.
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.
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.
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.
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.
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.
Q: Can I use PhotoShop instead of Fireworks?
A: No.