Free Table Element/Plugin for RapidWeaver and Stacks

If you are looking for a simple and free way to add a table to your Stacks page, you can use one of these, just unzip them and copy them into ~/Library/Application Support/RapidWeaver/Stacks before starting RapidWeaver: There are two variants: With custom Stack Elements in each cell: Download FreeTableStack.stack With text in each cell: Download … Continue reading “Free Table Element/Plugin for RapidWeaver and Stacks”

If you are looking for a simple and free way to add a table to your Stacks page, you can use one of these, just unzip them and copy them into ~/Library/Application Support/RapidWeaver/Stacks before starting RapidWeaver:

Screen Shot 2015-12-07 at 12.56.36

There are two variants:

With custom Stack Elements in each cell:

Screen Shot 2015-12-07 at 12.50.29

Download FreeTableStack.stack

With text in each cell:

Screen Shot 2015-12-07 at 12.50.46

Download FreeTableTextStack.stack

Settings:

Both Stacks Element allow you to configure the columns and rows of your table and you can specify the colors for the header cells and the lines:

Screen Shot 2015-12-07 at 12.50.56

If you would like to add an own style, just open the .stacks file and edit the styles.css file.

Building simple RapidWeaver Stack Elements

I am using RapidWeaver for a few websites. The “Stacks” plugin is really useful and makes RapidWeaver very flexible. You can add new “Stack Elements” to your library in RapidWeaver to get new ways to format or style your content. Most “Stack Elements” have to be bought. Some are really good and worth the money … Continue reading “Building simple RapidWeaver Stack Elements”

I am using RapidWeaver for a few websites. The “Stacks” plugin is really useful and makes RapidWeaver very flexible. You can add new “Stack Elements” to your library in RapidWeaver to get new ways to format or style your content. Most “Stack Elements” have to be bought. Some are really good and worth the money but if you only want something really simple you can easily do it yourself for free. Just follow the steps below:

First you can download a simple example project that contains a nearly empty Stack Element that contains only text:

SimpleExample.stack

Just unzip it and copy it into your Stacks directory ~/Library/Application Support/RapidWeaver/Stacks to make it appear in RapidWeaver (after the next restart):

Screen Shot 2015-12-07 at 09.41.48

When you insert it into a page you can enter some text:

Screen Shot 2015-12-07 at 09.43.25

This text will then simply appear on the website. Until this point it certainly isn’t very useful yet. But now you can start customizing it to your needs:

Open ~/Library/Application Support/RapidWeaver/Stacks, right click on “SimpleExample.stack” and choose “Show Package Contents”. You should find three files:

  • Info.plist: Here you can change the version number and add your own ID.
  • styles.css: Here you can enter any CSS styles you need.
  • template.html: This is the HTML file that will be inserted into the page. It can contain HTML code and certain variables that Stacks will replace with content. In this example it contains only a div with the keyword “%text%”, which means that your page contains text that should be inserted here.

Now try to modify the template.html file. Add a second div section like this:

div id="SimpleExample%id%">
%text%
%text%

Then click on “Developer > Reload” in RapidWeaver:

StacksDeveloperButton

Afterward your Stacks Element should have two text fields:

Screen Shot 2015-12-07 at 09.54.47

To embed other Stacks Elements just write “%slice%” instead of “%text%” in your template.html file:

Screen Shot 2015-12-07 at 09.55.45

This way you can easily add your own custom Stack Elements, style them with CSS and use them in your projects.

You can find a reference explaining all Stacks variables and the folder structure on the Stacks API page.