Stacks 1 Manual

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.

Stacks Edit Window

The Stacks Edit window is what you see when you create a new Stacks page. 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. The Stacks edit window appears and shows two main areas: the main layout area and the Library. The Library components are used to create the elements of your web page.

Stacks Library

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.

Library Components

There are currently seven library components. You use the components to create elements on your page.

• Text

  This creates a text element. A text element can also contain some HTML markup.

• Image

  This element can contain any valid image, including JPEG, PNG, TIFF, and Photoshop format. It will always export images in the export format for the page.

• HTML

  This element can contain any text that does not need to be converted to HTML, so it's perfect for pasting YouTube snippets, or adding a bit of extra HTML to your page.

• Columns

  This creates two columns in one element. Each of the columns is a container that you can drop other elements into, including more columns.

• Left Floating Image

  This element contains an image on the left and text to the right. The text will wrap around under the image when there is enough text to do so.

• Right Floating Image

  This element contains an image on the right and text to the left. The text will wrap around under the image when there is enough text to do so.

• Stack

  This creates an element that can contain other components. In other words, you can, for example, put a Columns element inside a Stack element. This is useful for grouping and nesting items.

Using Stacks

To add an element to your layout, drag and drop the desired library component from the Library to the Stacks edit window. Once you've added a component, you can use the Inspector button to open the Stacks Inspector HUD and configure the new component. See The Inspector HUD for more info on using the Stacks Inspector HUD.

To select a component, click on it. The dashed line shows the outline of the selected component. To deselect a component, click anywhere else in the Stacks edit window.

To edit the content of a Text, Image, HTML, Left Floating Image, or Right Floating Image component, first select the component, then click on it once more. To stop editing click outside the component.
Columns and Stack components only contain other components, and so do not have an "edit" mode.

To move a component, click and drag it to a new location. A thin dotted line shows where the component will be moved to. To move a component, it must be selected, but not in edit mode.

To copy a component, hold down the option key while you drag and drop the component to a new location. To copy a component, it must be selected, but not in edit mode. You can also use Copy and Paste from the Edit menu.

To delete a component, click the X in the upper left corner. Alternatively, choose Clear from the Edit menu. Deleting a component will delete the selected component as well as everything inside it.

The Inspector HUD

The Inspector HUD provides easy access to basic settings for most component types. An Image frame also has an Image_Editing_HUD for editing image properties. When you use the Inspector 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, use the The Page Inspector Window.

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

Background

The background color of each component can be set to any color, but it is transparent by default. To choose a new background color for the selected component, 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 component is the outline. You can set the color and width. When you increase the border width, the overall size of the component does not change. Instead, the area for the content of the component 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 Preferences Tab for more information.

To change the width of the selected component, move the Border slider to the desired setting, from 0 – 10 pixels. If you want a border that is greater than 10 pixels, 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. When the Stroke Width is set to 0px, no stroke will appear even if you have selected a color.

Margin

The Margin is the amount of space between the edge of a component (the dashed line) and the border (if you have selected a border). You can think of the margin as the space between two different components.
The default setting is 2 pixels. When you increase the Margin, the overall size of the component does not change. Instead, the content area, including the border, becomes smaller.

To change the Margin for the selected component, move the Margin slider to the desired setting, from 0 – 20 pixels. To add margins larger than 20 pixels use The Page Inspector Window.

Padding

The Padding is the amount of space between the border (if you have selected a border) and the content.
The default setting is 2 pixels. When you increase the Padding, the overall size of the component does not change. Instead, the content area becomes smaller, while the border remains the same size.

To change the Padding for the selected component, move the Padding slider to the desired setting, from 0 – 20 pixels. To add padding larger than 20 pixels use The Page Inspector Window.

Width

The width is the percentage of the total horizontal space that a component fills. The default setting is 100 percent and fills the entire, allowable, horizontal space.
To change the Width for the selected component, move the Width slider to the desired setting, from 10 – 100 percent.

Column Split

The Columns Split slider is only available for Column components. 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%, so each column takes up 50% of the component area.

The Page Inspector Window

In the Page Inspector window, you can further customize the settings for components, specify the default settings for new component, and set preferences for how Stacks behaves.

Stacks Tab

The Stacks tab is where you specify advanced settings for the currently selected component. You can quickly jump to the Stacks Tab by using the Advanced button in The Inspector HUD.

Background

The background color of each component can be set to any color, but it is transparent by default. You can change the default in the Preferences tab of the Page Inspector window. See Default Background for more information.

To choose a new background color for the selected component, 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 component is the outline. You can set the color and width. When you increase the border width, the overall size of the component does not change. Instead, the content area 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 Default Border for more information.

To change the border width for the selected component, click the Border checkbox. Then enter the desired border width for each side (top, left, bottom, right) or use the arrows to increase or decrease the width as desired.

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. When the Stroke Width is set to 0px, no stroke will appear even if you have selected a color.

Margin

The Margin is the amount of space between the edge of a component (the dashed line) and the border (if you have selected a border). You can think of the margin as the space between two different components.
The default setting is 2 pixels. When you increase the Margin, the overall size of the component does not change. Instead, the content area, including the border, becomes smaller.

To change the Margin for the selected component, click the Margin checkbox. Then enter the desired margin width for each side (top, left, bottom, right) or use the arrows to increase or decrease the width as desired.

Padding

The Padding is the amount of space between the border (if you have selected a border) and the content.
The default setting is 2 pixels. When you increase the Padding, the overall size of the component does not change. Instead, the content area becomes smaller, while the border remains the same size.

To change the Padding for the selected component, click the Padding checkbox. Then enter the desired padding width for each side (top, left, bottom, right) or use the arrows to increase or decrease the width as desired.

Preferences Tab

The Preferences tab is where you specify the default settings for any new component. Settings for existing components will not change when you change these settings.

Default Background

The background color of each component can be set to any color, but it is transparent by default. To set a background color for all new components, click the Default Background checkbox, then click the color well next to the Default 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.

Default Border

The border of a component is the outline. You can specify the default color and width for all new components. When you increase the border width, the overall size of the component does not change. Instead, the content area becomes smaller. The default is to have no border.

To change the default border width for all new components, click the Border checkbox. Then enter the desired border width for each side (top, left, bottom, right) or use the arrows to increase or decrease the width as desired.

To set the default color for the border of all new components, click the color well next to the Default 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. When the stroke width is set to 0px, no stroke will appear even if you have selected a color.

Default Margin

The Margin is the amount of space between the edge of a component (the dashed line) and the border (if you have selected a border). You can think of the margin as the space between two different components.
The default setting is 2 pixels. When you increase the Margin, the overall size of the component does not change. Instead, the content area, including the border, becomes smaller.

Default Padding

The Padding is the amount of space between the border (if you have selected a border) and the content.
The default setting is 2 pixels. When you increase the Padding, the overall size of the component does not change. Instead, the content area becomes smaller, while the border remains the same size.

Image Editing HUD

The Image Editing HUD is where you specify settings for an image. To access the Image Editing HUD, select and image and then click the gear icon on the left side.

Scale

When you place an image into Stacks it will automatically reduce the scale if the image is large. To change the size of the selected image, move the Scale slider to the desired setting, from 1 – 100 percent.

Rotation

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

Border

The border of an image is the outline of the image. This is different from the border of a component. 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. If your image fills the component content area, then when you add a border, the border will cover the 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 for the selected image, 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. When the Stroke Width is set to 0px, no stroke will appear even if you have selected a color.

Shadow

Every image can have specific settings for a shadow.

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. Use the magnifying glass on the upper left side of the color palette to find a color from your screen. When the opacity is set to 0px, no stroke will appear even if you have selected a color.

Blur

Blur sets how fuzzy the edges of a shadow are. To change the blur of the shadow of an image, 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.