This is the reference manual for Stacks 1. The Stacks 2 reference manual is still in the works. If you are looking for help with Stacks 2, please check out this video: http://www.youtube.com/watch?v=oaRx3FLFiwg

Stacks Overview

Stacks is a plugin for RapidWeaver that allows you to build pages that flow text to the dimensions of a theme even if the theme has a variable width. Using a flexible framework, you can build flowing columns, flexible rows, and tiles of images. You can build columns within columns within rows within columns. Or group a stack of objects inside a box.

Getting Started

To create a new Stacks page:

1. Open RapidWeaver and either open an existing project or create a new one.
2. Add a new page by clicking the Add icon. The Add icon is located in the upper left corner of the RapidWeaver main window.
3. Choose Stacks from the list and click the Choose button.

You now have a Stacks page in your RapidWeaver Web site. A new stacks edit view appears and shows two main areas: the main layout area and the library. Items in the library are dragged to the layout area to create the elements of your web page.

The Library

The library is the dark area to the right of the main layout area. It contains the different types of elements that you can add to your page. You can drag items from the library into the layout to create elements in your page.
You can have any number of elements on your Stacks page. And you can move them around by simply dragging and dropping them where you want them to be.

The Stacks

The items in the library are called stacks. Each one is building block you can use in your page. The library comes with the basic stacks that you'll need to build up the layout of your page, like columns, images, text, and HTML. You can add other items to the library to extend the functionality of Stacks. For more info about getting more stacks, see the section on custom stacks.

Text Stack

The Text stack creates a frame that contains Styled Text. This means that you can use the text styling and formatting features that many RapidWeaver pages support. When you edit text you'll find the formatting bar appears at the bottom of the window and can be use to change font types, add styles, and create links.
A Text stack will have all the same features that you'll find in a RapidWeaver Styled Text page. Anything that you can do in a styled text page you'll be able to do in a Text stack. That includes adding images, using HTML, or formatting your text.

Image Stack

The Image stack creates a placeholder where you can drag one image. Image stacks accept any valid image format, including JPEG, PNG, TIFF, and Photoshop files. It will always export images in the export format for the page.
You can use an Image stack to do basic image editing including resizing, rotating and adding borders and drop-shadows.

HTML Stack

The HTML stack can contain any plain text, but is usually used for adding HTML markup to your page. This means it's perfect for adding YouTube snippets, or a bit of extra HTML to your layout. Please be careful when adding HTML. Stacks exports the text as-is. Syntax errors in an HTML stack will appear as errors on the page as a whole.

2 Columns and 3 Columns

These two container stacks create 2 or 3 areas where other stacks can be added. Each column that's created can contain as many other stacks as you like or none at all. The 2 Column stack lets you adjust the sizes of the columns by moving the gutter that splits them. The three column stack lets you adjust the relative sizes of the columns, but always keeps the center column in the middle.

Left Floating Image and Right Floating Image

These two stacks contain an image on the side and text that flows around it. The text will wrap around under the image when there is enough text to do so.

Note: To keep things simple, edit mode displays the text and image as columns. It will wrap when published.

Stack

The Stack is a generic container. You can place any other stacks inside of it to group them together, add borders, or create hierarchy in your page.

Using Stacks

Interacting with Stacks

Adding Stacks

To add an element to your layout, drag and drop the desired stack from the library to the layout area. Once you've added a stack, you can use the inspector button to open the Info HUD and configure the stack. See below for more info on using the Info HUD.

Selecting Stacks

To select a stack, click on it. The dashed outline changes from gray to bright blue when a stack is selected. It will also display a delete button in the upper left corner. To deselect a stack, click anywhere else in the Stacks layout area.

Editing Images and Text

To edit the content of a stack, first select the stack by clicking on it, then click on it once more. The content will be highlighted by a bright blue solid outline. To stop editing click outside the stack.
When a stack is being edited a toolbar at the bottom of the window will appear with tools that are appropriate for the content being edited.

Moving Stacks

To move a stack, click and drag it to a new location. A thin dotted line will appear as you drag the stack around the layout indicating where the stack will be placed when it's dropped.

Note: Stacks that are being edited may not be moved.

Copying Stacks

To copy a stack, hold down the option key while you drag and drop the stack to a new location. Copying is just like moving, but with the option key held down.
You can also use the Cut, Copy, and Paste commands in the Edit menu.

Note: Stacks that are being edited may not be copied.

Deleting Stacks

To delete a stack, first click on it to select it, then click the round X button in the upper left corner. Alternatively, choose Clear from the Edit menu. Deleting a stack will delete the selected stack as well as everything inside it.

The Info HUD

The Info HUD provides easy access to basic settings for most stacks. An Image stack also has an Image HUD (see below) for editing image properties. When you use the Info HUD to modify the border, margin, or padding, the setting applies to all sides (top, bottom, left, right) of the selected frame. To specify different settings for each side click the Advanced button to bring up the RapidWeaver Page Inspector window. Detailed settings can be entered here.

To view the Inspector HUD, select a stack, then click the ''i'' button.

The Basic Controls

All stacks have the basic controls: background color, border, margin, padding, width, and position. These control how frame around the stack looks and how the stack sits within the layout. These controls are present on every stack.

Background

The background color of each stack can be set to any color, but it is transparent by default. To choose a new background color for the selected stack, click the Background checkbox, then click the color well next to the Background label. Choose a color from the color palette. Use the magnifying glass on the upper left side of the color palette to find a color from your screen.

Border

The border of a stack is the outline around it. You can set the color and width of the border. When you increase the border width, the overall size of the stack does not change. Instead, the area for the content of the stack becomes smaller. The default is to have no border. However, you can change the default in the Preferences tab of the Page Inspector window. See below for more information about the Preferences.

To change the width of the selected stack, move the Border slider to the desired setting, from 0 – 10 pixels. If you want a border that is greater than 10 pixels click the Advanced button and change the settings in the Stacks tab of the Page Inspector Window.

To choose a new color for the border, click the color well next to the Border label. Choose a color from the color palette. Use the magnifying glass on the upper left side of the color palette to find a color from your screen.

Note: When the border Width is set to 0px, no border will appear even if you have selected a color.

Margin

The Margin is the amount of space between the outer edge of the stack (the dashed line) and the border (if you have selected a border). To add more space inside the border, see Padding below.
The default setting is 2 pixels. When you increase the Margin, the overall size of the stack does not change. Instead, the content area, including the border, becomes smaller.

To change the Margin for the selected stack, move the Margin slider to the desired setting, from 0 – 20 pixels. To add margins larger than 20 pixels click the Advanced button and change the settings in the Stacks tab of the Page Inspector Window.

Padding

The Padding is the amount of space between the border (if you have selected a border) and the content inside the stack. If you'd like to change the space outside the border, see the Margin above.
The default setting is 2 pixels. When you increase the Padding, the overall size of the stack does not change. Instead, the content area becomes smaller, while the border remains the same size.

To change the Padding for the selected stack, move the Padding slider to the desired setting, from 0 – 20 pixels. To add padding larger than 20 pixels click the Advanced button and change the settings in the Stacks tab of the Page Inspector Window.

Width

The width is the percentage of the total horizontal space that a stack fills. The default width is 100% which means that a stack will fill the entire horizontal space available. The available space may not be the entire width of the page. For example: A 2 Column stack only provides half the width of the page to each of the stacks inside the columns.
To change the Width for the selected stack, move the Width slider to the desired setting, from 10 – 100 percent.

Position

Position controls where a stack sits within the space provided. By default a stack fills up the entire space, so the position is of little use. When the stack width is reduced (see above) the stack will default to being centered within the space provided. By changing the position you can set the stack to stick to the left or right side of its container rather than floating in the middle.

Custom Controls

Some stacks will provide more controls that can be adjusted. Column stacks provide a single Split control to adjust the sizes of the columns, but some stacks can provide many adjustments. If you install new custom stacks into your library make sure to check the documentation for the stack for more information about what controls are provided.

Column Split

The Columns Split slider is only available for the 2 Column and 3 Column stacks. The Column Split setting allows you to set the width of the columns; the total width always equals 100%. By default the split is set to 50% in the 2 Column stack and 33% in the 3 Column stack, so that all the columns are of equal size. You can adjust the split to create other layouts.

The Page Inspector Window

In the Page Inspector window, you can further customize the settings for stacks, specify the default settings for new stacks, and set preferences for how all Stacks pages behave.

Stacks Tab

The Stacks tab is where you specify advanced settings for the currently selected stack. You can quickly jump to the Stacks Tab by using the Advanced button in the Info HUD (see above).

Advanced Settings

The advanced settings in the stacks tab let you choose specific numeric values for many of the settings in the Info HUD. For more information about each of the settings see the Info HUD section above.

Render HTML in Edit Mode

There may be times when the content inside of stack renders its HTML very slowly or may require resources and assets that are not currently available. In these occasions you can uncheck the Render HTML checkbox. Stacks will display the HTML content of the stack as-is instead of rendering it as HTML.

Render PlusKit @Import

PlusKit is a RapidWeaver plugin from LogHound Software that allows you to inject the content from other pages into the text of your current page. This is a very powerful mechanism but can sometimes be slow to render. In those cases it may be wise to disable PlusKit imports while you're editing the page. The Published page will still render the import as expected.

Preferences Tab

The preferences tab changes not only the current Stacks page, but how every Stacks page will behave.

Stack Outlines

Normally all the stacks in your layout will display a dashed outline for you to click and select. While useful for manipulating the stacks, it can sometimes be helpful to see the layout without the outlines. Disabling the outlines removes them from Edit mode along with a bit of margin around each stack. Although the outlines will be absent, the behavior of Stacks does not change -- you can still select and interact with each stack by clicking directly on it.

Reduce Large Images

Stacks can reduce large images that you drag into your layout. If you have images from a high resolution source (like a camera) images are often much too big to display on the Web. Stack will reduce images to a more manageable size as you import them. If an image is smaller than the dimensions provided then Stacks will import the image as-is without modification.

Note: Scaling images reduces their quality. You'll always get the best quality images if you do not force Stacks to do any scaling at all.

Defaults

The Defaults tab is where you specify the default settings for any new stack. Settings for existing stacks will not change when you change these settings. But any new stacks created will have the new settings.
The default settings are the same as those found in the Info HUD. For more information about each of the settings in the defaults, see the Info HUD section above.

Image HUD

The Image HUD is where you can edit images. To access the Image HUD, click once on an image to select the image stack, then again to start editing the image. When editing and image a gear icon will appear in the upper left corner. Click the gear icon on the left side to display the Image HUD.

Scale

When you place an image into Stacks it will automatically reduce the scale if the image so that it fits within the average layout. To change the size of an image, move the Scale slider to the desired setting, from 1 – 100 percent.
If an image is too large to fit within the image stack, stacks will clip off the right side of the image that doesn't fit.

Rotation

To rotate an image, move the Rotation slider to the desired setting, from –180° – 180°.

Border

The border of an image is the outline around the image itself. This differs from the border of a stack which follows the frame of the stack that contains the image.
You can set the color and width. When you increase the border width, the size (scale) of the image does not change. Instead, the border is added to the outside edge of the image.
The left and right border of an image will increase only until the image fills the horizontal space of its frame; however, the top and bottom borders will continue to increase their width as specified. This means that in some instances the top and bottom border may be thicker than the left and right border.

To change the border width, move the Border slider to the desired setting, from 0 – 10 pixels. The default is to have no border.

To choose a new color for the border, click the color well next to the Border label. Choose a color from the color palette. Use the magnifying glass on the upper left side of the color palette to find a color from your screen.

Shadow

Each image can have specific settings for a shadow.

Opacity

To make a shadow more or less dark, move the slider next to the Shadow label to the desired setting, from 1 – 100 percent. The higher the number, the darker the shadow.

To choose a new color for the shadow, click the color well next to the Shadow label. Choose a color from the color palette. Choosing a bright color will tend to make a shadow into a "glow."

Blur

Blur sets how fuzzy the edges of a shadow are. To change the blur of the shadow, move the Blur slider to the desired setting, from 1 – 15 pixels.

Offset

The Offset sets the distance from the upper right corner of image that the shadow is offset. To change the location of the shadow, move the Offset sliders to the desired setting, from -15 – 15 pixels.
For the X-Offset, -15 pixels moves the shadow to the left of the image and +15 pixels moves the shadow to the right of the image.
For the Y-Offset, -15 pixels moves the shadow below the image and +15 pixels moves the shadow above the image.