What is Stacks?

Stacks is a Page plugin from YourHead Software for RapidWeaver.

“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.”

What is a Stacks plugin?

More properly called a ‘Stacks Library Item’ or ‘Frame’ or just ‘Stack’, it constitutes a block of HTML, with a simple user interface, that can be dragged and dropped onto a Stacks Page. Stacks ships with a standard set of frames. I designed these custom frames to offer some additional measure of utility (and fun).

How are they installed?

After download the stack dmg should mount automatically. If not then double click the dmg file.

Just drag the stack icon to the stacks folder and the stack will be installed in:
User > Library > Application Support > RapidWeaver > Stacks Folder

Iscipit faccummy duisi, ercincil fringilla, lorper primis, lobortio esectem secte ing esting.

Saint-Cirq Lapopie

Habitant doluptat dictumst. Luctus nisl ero neque lobore; magnim porttitor olenit vitae ipsusci.

Sunflowers in France

Elesto inciduipit iliqui dolorem esectem, eu dolum iliquis aptent sapien quatio tisis tempus at. Enissim ut ipisim, iscing alis, consenisim sequat, elesequ endio vullandio lutpat vullam. Arcu rutrum turpis velesto tatiniat velenisit conum, praesed duisi faciliquis dictumst estio quatuer. Quisque molestie dignis ationullaoret iniatue, nullam luctus phasellusisi erat sed luptatum conubia rhoncus convallis. Eros dolorem ipit quatums conum velessequis elenit erostin nonsenibh; iscidunt elit fringilla feuguerit adionse verit.

Changes as of Aug 31 2009

• The ‘Image Left’ and ‘Image Right’ stacks have been consolidated into one stack - float image caption stack.
• There is a checkbox to toggle between float right and left.
• Some minor additional tweaks under the hood.

Why more floating image frames?

Stacks ships with a ‘left floation image’ and a ‘right floating image’ frame. I added these to provide two options that the stock frames lack.

• Add and style a caption for your images.
• Nest the image lower in the block of text.

Why are there two (or three) text input fields?

The stock ‘floating image’ frames always place the image at the very top of the text. To embed the image in the text it was necessary to add another text field before the image. In the case of the two image stack (the above example), I added three text entry fields. With text in all three fields, the images will be embedded in the text and offset from each other. By leaving one or more fields empty you can align the images if you wish.

Experiment and you will be rewarded.

Click to see text inputs

Click to see interface

Download Float Image w/caption updated 8/31/09

Download Image LR w/caption updated 8/31/09

Changes as of Aug 31 2009

• The ‘SideBox Left’ and ‘SideBox Right’ stacks have been consolidated into one stack - ‘SideBox stack’.
• There is a checkbox to toggle between float right and left.
• Some minor additional tweaks under the hood.

There are two Floating Box Frames.

• SideBox
• SideBox Left and Right

The two Floating Box frames operate in the same manner as the Floating Images frames.

Why are there two (or three) text input fields?

This is explained and illustrated in ‘Floating Images w/captions’. The same ideas apply here as well.

Click to see Interface

Click to see Edit Mode

Download SideBox updated 8/31/09

Download SideBox Left and Right

Changes as of Aug 31 2009

• The ‘Flash Left’ and ‘Flash Right’ stacks have been consolidated into one stack - ‘Float Flash Caption stack’.
• There is a checkbox to toggle between float right and left.
• Maximum flash size has been increased to 750px for ‘Float Flash’ stack.
• Maximum flash size has been increased to 1000px for ‘Flash’ stack.
• Some minor additional tweaks under the hood.

Simplify adding swf (flash) files to your page.

I have used the RW built in javascript for embedding flash files. Other than ease of use, this means that your pages can still validate XHTML strict.

There is also an optional id field so that you may add multiple flash items to a page.

There are two Flash frames.

• Center Flash on Page.
• Float Flash with caption.

Why are there two text input fields?

This is explained and illustrated in ‘Float images w/caption Stacks’.

Caveat concerning use of these Flash Frames.

These Stacks Flash frames are designed for standalone swf files or simple multiple file slide shows like Monoslideshow. As long as there are no extra javascript calls required then these work simply by adding the swf (and any other files) to ‘Page Assets’ and setting the filename and path in the Stacks interface.

Since a lot of RW users seem to be using Bannerzest I took a quick look with a demo but it doesn’t appear to be compatible. Maybe one of you (with Bannerzest experience) will prove me wrong.

For simple swf files though, the setup is very simple. Just set the path, adjust the size and add a caption.

Click to see Flash Interface

Download Flash Stack updated 8/31/09

Download Float Flash w/Caption updated 8/31/09

Changes as of Aug 31 2009

• The ‘Left Floating Stack’ and ‘Right Floating Stack’ stacks have been consolidated into one stack - ‘Float Stack’.
• There is a checkbox to toggle between float right and left.
• Increased maximum width to 750px.
• Some minor additional tweaks under the hood.

Floating Stacks Stacks? Why?

Well, why not?

Actually you can do a lot of nifty things with these. How about adding an HTML stack and floating some adsense on your page? Or use to place a ‘Table Stack’ to wrap text around a small table.

Of course you could also add an image stack over a text stack and mimic my ‘floating image w/caption’ stacks but this would entail a lot of extra work fiddling with margins and padding to get it right.

But you get the idea now: just use your imagination.

There are two floating stacks stacks.

• Floating Stack
• Left and Right Floating Stack

Why are there two (or three) text input fields?

This is explained and illustrated in ‘Float images w/caption Stacks’.

Download Float Stack updated 8/31/09

Download Float Stack Left and Right updated 8/31/09

Changes as of Aug 31 2009

• The table width is no longer ‘auto’, it has been set to 98%.
• The width of the table can be made narrower by adjusting the stack width.
• ‘Vertical-Align’ for table cells can now be toggled from ‘middle’ to ‘top’.
• A ‘class’ identifier for the table has been added so that multiple tables on a page can be styled differently.
• Inline styles have been removed and css consolidated.
• Some minor additional tweaks under the hood.

At Last! Real tables for Rapidweaver.

While these stacks are not full fledged table editors they pack a mighty punch and should fulfill most needs for simple and stylish tables.

They will create a valid ‘XHTML strict’ table with a caption, header(thead), summary, border and sizeable from one cell to 6x15 cells.

There are two Table Stacks.

• 6x7 table cell stack.
• 6x15 table cell stack.

Easy to create stylish tables.

You have full adjustability of row background and text color for the ‘thead’ and even and odd rows. ‘Text Stacks’, ‘Image Stacks’, ‘HTML Stacks’ and more can be dragged into a table cell. In the above example, I dragged a Table Stack into a Floating Stack Stack and wrapped text around the table. While I generally prefer that tables be used primarily for tabular data, there’s no reason that you can’t use these stacks for some layouts; let’s say a catalogue of sorts with an image in one cell and the description in an adjacent cell.

Fully sizable from 1 cell to 6x15 cells.

I took pains to design these Table Stacks so that unused cells would collapse to invisibility. If you don’t want to use the header cells then leave them empty. If you only want a three cell by three cell table then just fill in any contiguous 3x3 cells. The empty table cells will collapse.

The only difference between the two stacks is the size. Both of these stacks take up a sizable amount of real estate in Stacks edit mode and the 6x7 stack is a little more manageable.

Edit controls for Table Stacks.

Download Table 6x7 updated 8/31/09

Download Table 6x15 updated 8/31/2009

Stacks for Google Syntax Highlighter

Syntax HighLighter is a javascript that prevents code snippets from being processed by the browser and displays them in an easy to read, handsome display with an optional set of controls.

If you have ever wanted to display code on a web page for others to copy, then this is an easy to use solution.

Syntax Highlighter is a two stack set.

• Syntax HighLighter
• Syntax HighLighter Scripts

The ‘Syntax HighLighter Scripts’ stack is placed only once on a page at the very bottom. It has no options and is simply the javascript, css and swf files and links necessary for Syntax HighLighter.

The ‘Syntax HighLighter’ Stack may be used multiple times and each styled separately. The options include:

• Enable HighLighter - By default, to edit the html it is necessary for Syntax HighLighter to be disabled. After inserting the desired code it is necessary to check ‘Enable HighLighter’.
• First Line - A numeric value that determines the start of the line numbering. The default is ‘1’.
• Hide Gutter - Hides the line numbering.
• Hide Controls - Hides the controls in the top bar.
• Show Columns - Adds column numbering to the top bar.
• Collapse Highlighter - Collapses the code to a single line that may then be clicked on to open.

A Technical Note.

This Stack set uses Syntax HighLighter v.1.5.1

While version 2.0 was recently released (Feb. 2009) it was not incorporated because it no longer supports the textarea tag, only the pre tag. Use of the pre tag requires that any opening brackets ’ < ’ in the code be replaced (manually or with some other script). I deemed this too onerous for what I wanted to be a simple ‘drag and drop’ or ‘cut and paste’ experience for the casual coder.

It should also be noted that the textarea tag was dropped and the attributes changed in the new HighLighter so that pages using it would validate. So please note that while this will display fine in all the major browsers, if you validate the page the code will throw up errors.

This Page:

• Was built with RapidWeaver from RealmacSoftware.
• Uses the Accordion page plugin from YourHead Software.
• Also uses the Stacks Plugin which is imported to this page using PlusKit from Loghound.
• Uses Concertina; a theme I designed for the Accordion plugin. (Not ready for prime time. Do not view this site in IE6 Arrrg…)
• Uses the Delicious-Roman font by Jos Buivenga.
• Uses FloatBox by Byron McGregor.
• Was composed using the Markdown Language with the aid of the Markup plugin by André Pang.

philwarrender.com is a domain I’ve had sitting around for about 3 years. Being so involved with RW and the RW forum community, I always figured it would revolve around RW in some manner. Well finally there’s a page sitting here and maybe it will expand into something a little larger.