Stacks4Stacks

Appender uses jQuery Javascript and has four available functions:

1. Append To adds content inside the target element, as a sibling to any other elements.
2. Prepend To adds content inside the target element, but before any sibling elements.
3. Insert After places content after the target element.
4. Insert Before places content before the target element.

This stack is great to use where you want to insert extra stacks in your page, but you don't have a suitable theme ExtraContent container to use. For example, you might want to use the Gator stack to replace a basic navigation bar supplied with your theme. Appender would let you append Gator onto the old theme navigation bar. You could then hide the old navigation bar using a theme style setting or custom CSS code. All done, without needing to make drastic changes to the codebase of a theme.

Example

Under the banner of this webpage, you will see a bright red box with some text in it. This message bar was originally inserted at this point of the page. However we used the Appender stack to append the message bar onto the page banner container using the #banner selector name.

A second Appender stack (with a green background) has been setup to prepend another message bar onto the footer container further down this page.

 

Setup

Follow these instructions for getting one or more Appender stacks setup in your website:

1. Download and install the Appender stack in the normal way.
2. Drag and drop the stacks you want appended or prepended into the 'drop stacks here' box shown in edit mode.
3. Within the Appender stack settings, enter the element name, class or ID selector of the target.
4. From the drop-down select menu, choose whether to prepend or append the stacks content.
5. Use the optional checkbox if you want to keep content hidden until the page is loaded (this stops content visually moving on the page, but may break some stack types that don't like being hidden).
6. Preview the page to test it works. Save your changes. Export or publish the webpage when done.

As always, mousing over Appender settings displays a small informational tooltip about what each setting does.

Multiple Appender stacks can be safely used on the same webpage. If the webpage element you are tying to target does not exist, we'll attempt to keep the stack(s) displayed, but presented in the normal page flow.

Getting element names, class or ID selectors

This will undoubtedly be the hardest part of using the stack for some users. Having prior knowledge of HTML and the DOM (document object model) would definitely be advantageous to have here. Paid support is available if you need help with using Appender.

The web inspector developer tools are available in most web browsers and can also be switched on in the RapidWeaver preferences. This will allow you to view the source code of a website and extrapolate the target element name, class or ID selector.

Other stacks like Elemental and Codify exist if you find the web inspector developer tools too intimidating. Use these to click on elements and get details of their class or ID selector.

Theme compatibility

Appender was mostly designed and intended for use with ThemeFlood themes. It may well work with themes from other companies, but the exact compatibility cannot be guaranteed. Some themes make use of complicated loading effects that limit the ability to move elements around using Javascript techniques. Likewise, certain areas of the page could have fixed sizing applied and not permit additional content to be added. Paid support is available if you require help using Appender with themes from other companies or you require a theme modified to include new content placeholders.

 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.