Log in / create account
article
discussion
view source
history
Navigation YourHead Info Accordion Blocks Carousel Collage Columns Kwix PayLoom FAQ
Stacks Manual
Contents [hide] 1 A Stacks Overview
A 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.
2 Stacks Edit Window 3 Stacks Library 3.1 Frame Types 4 Using Stacks 5 The Inspector HUD 5.1 Background 5.2 Border 5.3 Margin
Search
Go
Search
5.4 Padding 5.5 Width
Stacks Edit Window
5.6 Column Split
The Stacks Edit window is what you see when you create a new Stacks page. To
6 The Page Inspector
create a new Stacks page:
Window 6.1 Stacks Tab
1. Open RapidWeaver and either open an existing project or create a new one. Toolbox What links here Related changes Upload file Special pages Printable version Permanent link
6.1.1 Background
2. Add a new page by clicking the Add icon. The Add icon is located in the upper left corner of the RapidWeaver main
6.1.2 Border 6.1.3 Margin
window.
6.1.4 Padding
3. Choose Stacks from the list and click the Choose button.
6.2 Preferences
You now have a Stacks page in your RapidWeaver Web site. The Stacks edit
Tab
window appears and shows two main areas: the main layout area and the Library of frames that you use to create your overall framework.
6.2.1 Default Background 6.2.2 Default
Stacks Library You can have any number of frames on your Stacks page. And you can move them around by simply dragging and dropping them where you want them to be. The different types
Border 6.2.3 Margin 6.2.4 Padding 7 Image Editing HUD
Frame Types There are currently seven frame types:
7.1 Scale 7.2 Rotation 7.3 Border 7.4 Shadow
Text This is simply a frame for text. A text frame can also contain some HTML markup. Image This frame can contain JPEG, PNG, ???? HTML Columns This creates two columns in one frame. Left Floating Image This 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 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 a frame that can contain other frames. In other words, you can, for example, put a Columns frame inside a Stack frame. This is useful for grouping and nesting frames.
Using Stacks To add a frame to your layout, drag and drop the desired frame type from the Library to the Stacks edit window. Once you've added a frame, you can use the Inspector button to open the Stacks Inspector window and configure your new frame. See below for more info on using the Stacks Inspector window. To select a frame, click on it. The dashed line shows the outline of the selected frame. To deselect a frame, click anywhere else in the Stacks edit window. To edit the content of a Text, Image, HTML, Left Floating Image, or Right Floating Image frame, first select the frame, then click on it once more. To stop editing click outside the frame. Columns and Stack frames only contain other frame, and so do not have an "edit" mode.
7.4.1 Blur 7.4.2 Offset
mode. To move a frame, click and drag it to a new location. A thin dotted line shows where the frame will be moved to. To move a frame, it must be selected, but not in edit mode. To copy a frame, hold down the option key while you drag and drop the frame to a new location. To copy a frame, it must be selected, but not in edit mode. To delete a frame, click the X in the upper left corner. Alternatively, choose Clear from the Edit menu. Deleting a frame will delete the selected frame as well as everything inside it.
The Inspector HUD The Inspector HUD provides easy access to basic settings for most frame types. An Image frame uses the Image Editing HUD, not the Inspector HUD. See Image Editing HUD for more information. 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 Page Inspector Window. See below for more information. To view the Inspector HUD, select a frame, then click the i button.
Background The background color of each frame can be set to any color, but it is transparent by default. To choose a new background color for the selected frame, 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 frame is the outline. You can set the color and width. When you increase the border width, the overall size of the frame does not change. Instead, the area for the content of the frame 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. To change the width of the selected frame, 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. See below for more information. 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 frame and the border (if there is one). You can think of the margin as the space between two different frames. The default setting is 2 pixels. When you increase the Margin, the overall size of the frame does not change. Instead, the area for the content of the frame becomes smaller. To change the Margin for the selected frame, move the Margin slider to the desired setting, from 0 – 20 pixels.
Padding The Padding is the amount of space between the border (if there is one) and the content. The default setting is 2 pixels. When you increase the Padding, the overall size of the frame does not change. Instead, the area for the content of the frame becomes smaller. To change the Padding for the selected frame, move the Padding slider to the desired setting, from 0 – 20 pixels.
Width The width is the percentage of the total horizontal space that an element fills. The default setting is 100 percent. To change the Width for the selected element, move the Widthe slider to the desired setting, from 10 – 100 percent.
Column Split A Column element creates two columns. The Column Split setting allows you to set the width of the columns; the total width always equals 100%. By default, each column takes up 50% of the frame, so the Split is at 50%.
The Page Inspector Window In the Page Inspector window, you can further customize the settings for frames and specify the default settings.
Stacks Tab The Stacks tab is where you specify settings for the currently selected frame.
Background The background color of each frame 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 below for more information. To choose a new background color for the selected frame, click the Background checkbox, then click the color well next to the Background label. Choose a color from the color palette.
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 frame is the outline. You can set the color and width. When you increase the border width, the overall size of the frame does not change. Instead, the area for the content of the frame 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. To change the width for the selected frame, 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 frame and the border (if there is one). You can think of the margin as the space between two different frames. The default setting is 2 pixels. When you increase the Margin, the overall size of the frame does not change. Instead, the area for the content of the frame becomes smaller. To change the Margin for the selected frame, click the Margin 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.
Padding The Padding is the amount of space between the border (if there is one) and the content. The default setting is 2 pixels. When you increase the Padding, the overall size of the frame does not change. Instead, the area for the content of the frame becomes smaller. To change the Padding for the selected frame, 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 frames. Existing frames will not change when you change these settings.
Default Background The background color of each frame can be set to any color, but it is transparent by default. To set a background color for all new frame, 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 frame is the outline. You can specify the default color and width for all new frames. When you increase the border width, the overall size of the frame does not change. Instead, the area for the content of the frame becomes smaller. The default is to have no border. To change the default width for all new frames, 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 frames, 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.
Margin The Margin is the amount of space between the edge of a frame and the border (if there is one). You can think of the margin as the space between two different frames. The default setting is 2 pixels. When you increase the Margin, the overall size of the frame does not change. Instead, the area for the content of the frame becomes smaller. To change the Default Margin for all new frame, click the Default Margin 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.
Padding The Padding is the amount of space between the border (if there is one) and the content. The default setting is 2 pixels. When you increase the Padding, the overall size of the frame does not change. Instead, the area for the content of the frame becomes smaller. To change the Default Padding for all new frames, click the Default 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.
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 is at 100%. 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. 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 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.
This page was last modified 06:25, 26 January 2009. This page has been accessed 505 times. Privacy policy About YourHead Disclaimers