The Zen Bin macro is now obsolete, and has been replaced by the Zen Section macro.


Zen bins are visual building blocks (or content containers), that can be used for layout. Like Zen Sections, Zen Bins are styled by the brand, but can be further customized.

Sample


Zen Bin

A Zen Bin with some text

Medium

This is the current brand medium color

This Zen Bin has a positioned image and no border.

Wiki Markup

{zen-bin:Zen Bin|float=left|width=23%}A Zen Bin with some text{zen-bin}

{zen-bin:Medium|float=left|background=false|background-color=#99AF3E|width=23%|height=120px}This is the current brand medium color{zen-bin}

{zen-bin:background=false|background-image=lightbulb.gif|background-position=bottom right|background-repeat=no-repeat|border=false|height=160px|width=23%}h2. This Zen Bin has a positioned image and no border.{zen-bin}

Parameters

Terms in bold are required

Name

Wiki Markup

Default

Description

Heaer

(unnamed initial parameter - see example markup above)

 

Adds a header to the bin (equivalent to header= or h1=).

Float

float=

 

Choose right or left to make the zen-bin float in its container, taking up only the horizontal space it needs.

Background

background=

true

True by default. Set to false to suppress the background image (often a gradient). Use with border= and float= to create columns.

Background Color

background-color=

 

The CSS color for the background, such as "blue" or "#F0F0F0"

Background Image

background-image=

 

The page attachment filename to use for the background image.

Background Position

background-image=

 

Override the background image position specified by the brand. Use CSS values, such as background-position=50% 50% or background-position=bottom right

Background Repeat

background-repeat

 

Override the background image repeat characteristics specified by the brand. Use CSS values, such as background-repeat=no-repeat or background-repeat=repeat-x

Border

border=

 

true by default. Set to false to suppress the border. Use with float= and background= to create columns.

Width

width=

 

Fix the size of the zen bin to the specified width. Use CSS values, such as width=200px or width=25%

Height

height=

 

Fix the size of the zen bin to the specified height. Use CSS values, such as height=200px

Margin

margin=

 

Set the padding around the outside of the zen bin (between the border and its neighbors). Use CSS values, such as margin=24px or margin=6px 12px 6px 12px

Padding

padding=

 

Set the inner padding of the zen bin (between the border and its contents). Use CSS values, such as padding=24px or padding=6px 12px 6px 12px

Class

class=

 

Adds additional CSS class names to the zen-bin in the HTML.