Thanks! Please check the following:
System requirements
License agreement
Refund policy
Purchase process
Pricing
Paddle
Customer support

System requirements
All the stacks sold through this website require RapidWeaver and the Stacks plugin. They simply will not work with other publishing platforms (like Flow, Drupal or Wordpress).

We recommend you aim towards installing the latest version of RapidWeaver that your computer is capable of running (preferably RapidWeaver 7 or greater) and Stacks 3 or later. Both are a separate purchase if you do not own them already.

Stacks4Stacks generously provides you fully-functioning free demo versions of everything sold on this website. If you cannot get the free demo version to work, DO NOT proceed with purchasing the stack - because the purchased stack is unlikely to work too. Please request technical assistance first.

License agreement

You may use a purchased stack an unlimited number of times in personal or commercial projects and request technical support.

We permit you to install stacks onto all computers that you own. You are permitted to make archival backup copies (e.g. iCloud, Google Drive or Dropbox).

You may not resell, redistribute or make a stack available for download, remove copyright credits, license information, or claim the stack to be your own creation.

The software is provided "as is" without any implied or expressed warranty of merchantability or fitness for purpose. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise arising from, out of or in connection with the software or the use or other dealings in the software.

Refund policy
By purchasing from this website, you agree that your purchase will be available immediately via digital download and that you waive your statutory right of withdrawal.

All purchases are absolutely final. Refunds will not be provided (we physically cannot un-download or remove stacks from your computer) under any circumstances.

You are reminded to make use of the free demo versions already provided on the website, to fully evaluate stacks for compatibility and suitability before making a purchase.

If the free demo version does not work for you, simply do not buy the stack. Please request technical assistance instead.

Purchase process
The checkout system is provided by Paddle. An attempt is made to display prices in your local currency.

To complete your order, you must supply a valid email address. Your purchase receipt and download link will be sent to this address you supply. If you do not receive your purchase shortly after completing it, please carefully check your spam or junk mail folders.

Your purchases are available to re-download at anytime, via this secure order lookup page.

Pricing
Prices shown on the website include any applicable VAT or sales tax. You will be sent a full receipt by email. Charitable and bulk discounts may be available on request. Please get in touch if you have any queries about our pricing.

Paddle
Our order process is conducted by our online reseller Paddle.com. Paddle.com is the Merchant of Record for all our orders. Paddle provides all customer service inquiries relating to order processing. Paddle also provides an order lookup system, commonly referred to as your Paddle Account.

Customer support
If you have questions that relate specifically to a stack, you should make contact via the contact page.
Expand
The word 'hierarchy' has Greek origin; formed through the combination of words hieros (meaning "holy") and archos (meaning "ruler"). It has continued to be used as an expressive term when referring to different forms of graded classification or structure.

Hierarchy uses pure HTML and CSS for its presentation. Not only does this mean the stack works reliably in all newer web browsers, it is also brings the benefit of being search engine optimised, faster loading and more accessible. The alternatives to Hierarchy would be to either convert your diagram into an image or embrace SVG / Javascript; the latter of which can become extremely complicated.

You can configure Hierarchy to render a nested unordered list (configured with Stacks or raw HTML) as a tree. Alternatively Hierarchy can be made to display a compatible theme navigation structure as a tree; which can form an attractive sitemap.

Hierarchy is pretty clever stuff! From a technical standpoint, it takes a fairly mundane HTML unordered list and spreads the list items out horizontally using CSS Flexbox Layout. To render the lines between items, we use pseudo classes. The finished structural hierarchy is presented with subtle styling and colouring. Hierarchy has no dependencies on any third-party code, plugins or libraries. So hopefully what you create today with the stack will still be working in many years from now!

Mobile support

Hierarchy looks truly fantastic on large laptop or desktop displays. But how can we deal with the inevitable problem of people trying to view your Hierarchy stack on tablets or smartphones? By default, Hierarchy will scroll horizontally on any screen size, if there's insufficient space to display all the items.

Within the stack settings, there's a customisable Breakpoint option. On all screen widths less than the breakpoint you provide, Hierarchy will morph magically into a simple series of vertical boxes. Sure it may not look quite as pretty, but it offers a robustly reliable solution for your tablet and smartphone users to continue accessing the Hierarchy content. The default breakpoint is 768px, but this can be increased or reduced to suit.

Example

Here is an example of Hierarchy with its default style settings applied. In this example, we are using the stack to display a simplified version of the British Royal Family. Each person on the family tree has had their name set as a link to https://example.com. In a real life genealogy website, it would be just as easy to have the link open inside a TopBox lightbox or perhaps open another webpage.
 
You can scroll the family tree horizontally. On smaller screens (like mobile) the family tree reverts back to its native unordered list formatting.


Setup

Hierarchy is a stack element for RapidWeaver. Please install Hierarchy into Stacks and RapidWeaver as you would normally do. Hierarchy is not compatible for use with other publishing platforms like Wordpress.

When you add a Hierarchy stack to a webpage, it defaults straight to the 'Stacks' configuration. In this configuration, you are presented with a blue button. Each press of this button adds a new Hierarchy Item.

Every Hierarchy Item comprises of 4 elements:
  1. Box Content is where you enter the content you want shown in the item. Most commonly you would drag and drop Text, HTML or Markdown stacks here and set the content as links to a lightbox or other webpages. If you type multiple links separated with line breaks, they will be placed into multiple dotted boxes.
  2. Left Nodes are optional items prepended before the Box Content, with a single horizontal connection line. For example, if a parent divorced or remarried, you would typically treat this as a node.
  3. Right Nodes are identical to Left Nodes, with the exception they are appended after your Box Content.
  4. Branches are decedents from the current item, like children or grand children. When you add one or more branches, this action creates new instances of the Hierarchy Item to populate. You just continue the cycle on.

Hierarchy will render a vertical line below every Hierarchy Item, in readiness for you to add the next branch down. To stop a branch connector line being displayed below an item, simply select the desired Hierarchy Item in edit mode, go into its settings, and check the Terminator Item checkbox. A terminator item implies it is at the end of the branch and will be treated like a node.

Hierarchies can quickly become quite complicated! To maintain a tidy workspace in Stacks edit mode, you can optionally colour-code your Hierarchy Items and write notes for them. These colour-codings and private notes are never exported or published. If you are certain that you are never going to use left or right nodes in your Hierarchy, then these can be disabled in the main stack settings too.

For complicated Hierarchies (like a family tree) it is well-worth drafting something out before using the Hierarchy stack. Working from a visual makes things much easier.

Hierarchy is totally unlike any stack you may have previously used. However with some practice, you will find it to be an excellent add-on. We have tried to strike a careful balance between keeping the stack easy to use, while still offering users adequate flexibility. Hierarchy is about the only stack available for RapidWeaver that would let you create something like a basic family tree.

Style settings

Hierarchy has lots of useful style and colour settings, so you can build a chart that truly looks like your own! In the main Hierarchy stack settings, you can customise the styling for branches, nodes and items. These style selections take effect on all areas of the stack.

What if you wanted to mark one or more items or nodes with special colouring, to distinguish them from the rest? Simply select the item or node in RapidWeaver edit mode and click the Custom Colours For This Item checkbox. Now you are presented with colour pickers to change the background gradient, border and text colouring of this item. It is also feasible to apply CSS classes onto items and nodes, if you wish to style things yourself with custom code.

Changing the positioning of vertical connectors

By default, Hierarchy displays the vertical connector line (the one used for descendants) 50% from the left. Hierarchy has an extremely challenging job of trying to position all the items as best as it can. Sometimes it does not always get it quite correct! This is especially true if some items are significantly larger than others or you have introduced left / right nodes, which can unbalance a branch. You can give Hierarchy a helping hand by manually adjusting the positioning of vertical connectors. Simply select the Hierarchy Item you want to adjust its lower vertical connector on, and use the setting provided. Either increase or decrease the percentage setting, using the slider or number box.

Displaying Hierarchy on your own website

Hopefully by this stage, you are impressed with the capabilities of Hierarchy. It's quite surprising how this stack is able to convert a regular HTML unordered list into structural hierarchies, like a family tree. Now it's worth considering the best approaches towards getting the Hierarchy displaying good on your own website.

For smaller hierarchies, you should be fine to place the stack in your normal page flow. If the Hierarchy is too wide to display on tablet or mobile, we simply display a horizontal scrollbar. That way there is never any danger of Hierarchy getting cropped. You can write your own text above or below the stack, informing users they can scroll it horizontally.

For instances where you want to display Hierarchy at the full size of the laptop or desktop screen (not just the maximum browser window size) download and use one of our free FullScreen stacks. Place Hierarchy inside a FullScreen stack. Now users can click a button and have your Hierarchy open at full screen, in compatible web browsers.

If you have configured a much larger Hierarchy, it may be wise to put it on its own webpage and apply a theme like ThemeFlood Blank with its width constraints disabled. This will allow users to display Hierarchy at the maximum size their browser window permits. If there is no other content on the webpage, then it also makes it easier for people to print Hierarchy and tape each part of it back together again to create a large poster. Hierarchy is specially optimised for print and PDF output.