If you haven’t already installed the Sassy Stack, please see this page.

Using Sassy is pretty easy, and intuitive. There is one thing that you need to take note of, if you want to use a shadow for the Sassy Stack.

In the Layout section, slide the padding value all the way to the right. If you only want a small shadow, then you can adjust this padding value accordingly.

Sassy Options

Sassy Content Padding: This section controls the amount of space between the edge of the Sassy Stack and its contents.

Sassy Borders: Here, you can customize how the borders of Sassy stack look. If you don’t want to show a border, just set the thickness to 0. If you do that, it will look nicer with a shadow.

Sassy Corners: You can tweak these values in order to achieve how round the corners should be. This is not supported by IE 7 and below.

Sassy Shadow: With this, you can control whether or not a shadow is seen under your Sassy Stack. A negative horizontal value casts the shadow to the left, while otherwise the shadow is to the right. A negative vertical value casts the shadow upwards, otherwise the shadow is cast downwards. You can also control what the shadow’s color is, as well as how blur it looks.

Sassy Background: You can either use to use a solid color for background (defaults to white), or use an image.
If you want to use a background image, just drag and drop and image to the blank space beside “Use Image”. You can also choose to have the background image repeated horizontally, vertically, or not repeated at all.

Sassy Effects: There are a total of 7 effects you can choose for. These effects will be shown when the page loads, and will last approximately for the duration you set in the Effect Duration field.

However, if this doesn’t happen, you can try moving it manually. Copy the stacks that you see (after double clicking the dmg file) to Username/Library/Application Support/RapidWeaver/Stacks/.

You can access this folder by opening RapidWeaver, then top left menu: RapidWeaver->Manage Themes and Plugins.

Then look for the “Stacks” folder, and copy the stacks into it.

Then restart RapidWeaver, add a new Stacks page, and you will be able to find the stacks on the right side of the page.

The Sassy Stack lets you easily create good-looking stacks to contain your web content.

By wrapping your content with the Sassy Stack, you can:

• add a background image for the content by drag and drop
• easily add rounded corners (not for IE 7 and below, which are obsolete)
• choose what borders to add, and what color they should be
• add a shadow (not for IE 8), and tweak it
• allow for an animation effect as the content appears on the page. Comes with 7 effects.

Requirements
- Rapidweaver 4 or 5.
- The Stacks plugin (version 2)

Sassy Stack is a great addition to your Stacks arsenal, and is just £6.99.

1. Width of gallery: Options tab->Gallery->Width:
2. Control the depth of the margin below the caption that is underneath each thumbnail. This is a combination of adding the following CSS to RapidWeaver:
   .csImageShuffler_image-grid li {
margin-top: 0px;
}
   as well as in the Options tab, in the Thumbnail Caption area, reducing the Container Height:

Then, with the code that you generated, paste it into TextEdit. Be sure not to include the lines that say:
<style type="text/css">
and
</style>

In TextEdit, replace all occurrences of .myButton with button and then copy all the CSS code, go to RapidWeaver, click on Page Info->Header->CSS, and paste it in. The buttons should change.

Here’s an example:

button {
-moz-box-shadow:inset 0px 1px 0px 0px #caefab;
-webkit-box-shadow:inset 0px 1px 0px 0px #caefab;
box-shadow:inset 0px 1px 0px 0px #caefab;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #77d42a), color-stop(1, #5cb811) );
background:-moz-linear-gradient( center top, #77d42a 5%, #5cb811 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77d42a', endColorstr='#5cb811');
background-color:#77d42a;
-moz-border-radius:24px;
-webkit-border-radius:24px;
border-radius:24px;
border:1px solid #268a16;
display:inline-block;
color:#306108;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #aade7c;
}

button:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5cb811), color-stop(1, #77d42a) );
background:-moz-linear-gradient( center top, #5cb811 5%, #77d42a 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cb811', endColorstr='#77d42a');
background-color:#5cb811;
}

button:active {
position:relative;
top:1px;
}

This is how the example looks:

For the rest, you can use your own custom CSS, and place the CSS code inside RapidWeaver’s Page Info->Header->Header.

These are the some example CSS settings:

<style>
.tundra .dijitTabContainerBottom-spacer, .tundra .dijitTabContainerTop-spacer {
border-top:none;
}

.tundra .dijitTabContainerTop-tabs {
border-color: #2C2C2C;
}
</style>


You will need to replace the color code (highlighted in orange) accordingly to match your background.

Here’s how it looks:

Wouldn’t it be good if your users can help you promote your RapidWeaver web site to other people?

They can now do it via Facebook. Facebook provides plugins that help your site go viral! They include plugins which let users share your site urls on their profiles to letting users comment on your site in real time.

What’s great is that it is now super easy to incorporate these great Facebook social plugins into your RapidWeaver web pages!

Fabo Stacks is a set of convenience stacks for the following Facebook social plugins:

• Facebook Like and Send Button
• Facebook Comments Box
• Facebook Like Box
• Google Plus One Button
• Facebook Recommendations
• Facebook Activities
• Facebook Live Stream

Fabo Like Button + Send Button

You’d probably have noticed the Facebook Like buttons popping up all over web sites. The Like button is a tool to help your web pages go viral in popularity.

Users can click on the button, enter a comment and have it posted back to their Facebook profiles.

What this means is free promotion for your web pages.

The Send Button

While the Like Button lets your users share content with all their friends, the Send Button is more targeted.

It lets your users send a private message containing your URL to their Facebook friends, as an email to any email address, or to the group wall of one of their Facebook groups.

Fabo Comments

This stack allows you to add the Facebook Comments Box plugin so your users can comment on anything on your site, be it a web page, photo or an article. Once that is done, the comment can then be shared by the user on his/her Facebook wall as well as in their friends’ Facebook streams, helping to draw traffic.

Google Plus One Button

This stack allows you to easily place the Google Plus One button on your web pages. Google says:

Adding the +1 button to your pages lets users recommend your content, knowing that their friends and contacts will see their recommendation when it’s most relevant—in the context of Google search results.When a signed-in Google user is searching, your Google search result snippet may be annotated with the names of the user’s connections who’ve +1′d your page. If none of a user’s connections has +1′d your page, your snippet may display the aggregate number of +1′s your page has received.

Fabo Stacks is just £9.99 and contains all of the Facebook social plugins mentioned above.

Requirements

• Rapidweaver 4 or 5
• The Stacks plugin (versions 1 and 2)

Note

• These plugins will not show up in Preview mode in Rapidweaver. To see them, you need to export or publish the page.

1. Open your existing Rapidweaver project, or start a new one.
2. Add a new Page, and select Content Pager. 
3. You will be presented with the Content Pager screen. The screenshot below will illustrate the steps to creating content with Content Pager.In Content Pager, the Title field is not shown on the resulting web page, but it is useful for helping you organize your content.

Before you can use the Notifications Stack, you have to unzip the file you’ve downloaded.

You will get a folder called Notifications Stacks

To install, double click the folder called “Notifications.stack”, and the Stacks plugin will install this.

How To Use The Tipsy Stack

1. Start by selecting some words.
2. In the URL field, enter “#” (without the quotes), then click on the plus sign, and enter “id” in the Name field, and a unique value for the Value field. In this example, I will use the value of “myID”. Click “Set Link” when you’re done.
3. Drag in a Tipsy Stack into your page, if you haven’t already done so.
4. Drag an Image Stack, or a Text Stack, into Tipsy Stack, and populate it with what you want the tooltip to say. Here, I used a Left Floating Image Stack.
5. In Tipsy’s configuration options, there is an option called “ID to bind to”. Enter the value you have chosen above here. In this example, I’ll enter myID.
6. Click Preview. When you mouse over the link, a tooltip will appear.

Tipsy Stack Options

ID to bind to 

This is an important value. It connects to tooltip to a link on the page. Put the ID of the link to connect to, here.

Theme

Tipsy comes in 4 slightly different looks.

Width

Controls the width of the tooltip.

Delay

Controls how fast the tooltip appears when the mouse pointer goes over the link.

Time to disappear

When the mouse pointer leaves the link, usually the tooltip disappears immediately. You can change how fast the tooltip disappears here. My suggestion is to keep this value small.

Position

This controls where, whenever possible, the tooltip should appear in relation to the link. Possible values are ’after’, ‘above’, ‘below’, ‘before’. Please note that the quotes are required.

Text alignment

This controls the alignment of the text inside the tooltip. Possible values are left, center, right. No quotes are required here.