Templates are Zoowee's way of providing a functional mechanism to control the layout and navigation of the content of a bubble feed. Zoowee bubbles are generated from two buckets. A rendering bucket, and a content bucket. The content bucket is a list of nodes that contain things like text, images, links, media, and html. The rendering bucket is the template piece and it provides the necessary components to draw the content. In this bucket includes outer skin images and dimensions, default colors for content within, and an HTML framework for the layout.

Zoowee provides various hooks within the HTML template layout to facilitate looping acrossed all of the nodes within the content bucket, indicating where navigation elements may reside, where node content is placed, what style to assign, and others.

Below is a list of the template tags and their use:

[[zoo:skin:top]]width of the skin at the top of the bubble
[[zoo:skin:bottom]]width of the skin at the bottom of the bubble
[[zoo:skin:left]] width of the skin at the left of the bubble
[[zoo:skin:right]]width of the skin at the right of the bubble
[[zoo:skin:path]]the path to the skin directory
[[zoo:colors:primary]]replaces this tag with the primary skin color
[[zoo:colors:secondary]]replaces this tag with the skin color
[[zoo:colors:tertiary]]replaces this tag with the skin color
[[zoo:colors:alert]]replaces this tag with the skin color
[[zoo:colors:highlight]]replaces this tag with the skin color
[[zoo:colors:inactive]]replaces this tag with the skin color
[[zoo:colors:menu]]replaces this tag with the skin color
[[zoo:colors:menubg]]replaces this tag with the skin color
[[zoo:colors:menuhighlight]]replaces this tag with the skin color
[[zoo:colors:menuhighlightbg]]replaces this tag with the skin color
[[zoo:colors:background]]replaces this tag with the skin color
[[zoo:colors:title]]replaces this tag with the skin color
[[zoo:colors:tablebg]]replaces this tag with the skin color
[[zoo:loop:items]]this tag is placed within the html element that represtents to top of the DOM heirarchy where the template code should loop across each node in the items list from the feed.
[[zoo:loop:items:N]]same as above, but will only walk over N items. Items > N have their display attribute set to none.
[[zoo:loop:node]]within the items loop, this tag is placed within the element that is to be duplicated for every item in the list
[[zoo:item]]A default rendering of all of the atoms in the item tag are placed within the element that this tag is placed within.
[[zoo:atom:NAME]]Render the atom given by name in the node that this tag is contained within.
[[zoo:property:NAME:ATTRIBUTE]]This tag can be placed outside of a DOM element in that when the [[zoo:loop:node]] is duplicated, every place that this tag appears there is a direct replacement of the attribute value.
[[zoo:math:FUNCTION]]Where function is some algebraic expression and three variables are defined. width, height, and item_count.
[[zoo:mobile:FUNCTION]]If the bubble is rendered on a mobile device, the function expression is rendered.
[[zoo:bubble:FUNCTION]]If the bubble is rendered as a bubble on a desktop webpage or similar, the function expression is rendered.
[[zoo:clickable]]This indicates that if this item has children, this element is to be clickable. The click will put the target ZID for this node in the [[zoo:child container]] element.
[[zoo:clickable:N]]The N indicates the default selected item at first render. If N is ommitted, the first clickable node will be clicked automatically at load.
[[zoo:child container]]this element indicates the destination for all clickable nodes ZID request.