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.