Help Contents

Zen Colors Zen Branding Guide

Zen Section

Zen Sections are visual building blocks break up the content on your page into more manageable chunks. These chunks can be styled in many flexible ways (via the Section Designer), rearranged using drag-and-drop, and made into tabbed sections.

Please Note:

  • Each Zen Section macro must have an id parameter that is unique on its page
  • In the page, Zen Sections must be in sequential order, in particular:
    • All main column sections must occur before left column sections
    • All left column section must occur before right column sections 

 Zen carefully maintains the relationships of Zen Sections, so it is not advisable to directly create or edit Zen Section macros unless directed by Stepstone's support staff. 

Use the "edit pencil" to edit Zen Section contents, and the Section Menu create, copy, remove, and design sections.

This page is provided for reference only.

Sample

This is a plain, undecorated Zen Section.

Wiki Markup

{zen-section:id=12345678}

This is a plain, undecorated Zen Section. 

{zen-section}

Parameters

Terms in bold are required

Name

Wiki Markup

Default

Description

id

id=

 

Required number identifying the section. Must not be used by any other sections on this page. (This has nothing to do with the CSS id.)

name

name=

 

The name of the section, which can be used to reference the section from other pages. In tabs, the name is used for the tab title if the name parameter is not specified.

title

title=

 

Title of the section, which will be inserted in the section''s contents as an h1 element. In tabs, the title is used for the tab title.

tab

tab=

 

Number identifying the group of tabs this section belongs to.

column

column=

 

Choose left or right to make the section move to the left or right of the center (main) column.

float

float=

 

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

clear

clear=

 

Choose both, left, or right to make the section vertically clear floating elements that precede it.

position

position=

 

Choose top or bottom to make the master page section appear above or below the regular page contents. NOTE: this only applies to sections on the master page layouts.

background

background=

true

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

background-color

background-color=

 

A reference to the brand''s color palette (options are: "primary", "secondary", "tertiary", "light", "medium", or "dark". Usually "light" is a good option. Also, you can specify a 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-position=

 

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

background-repeat

background-repeat=

 

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

border

border=

true

Set to false to suppress the border. Use with float and background to create tiled layouts.

width

width=

 

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

height

height=

 

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

margin

margin=

 

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

padding

padding=

 

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

class

class=

 

Adds additional CSS class names to the section.

#trackbackRdf ($trackbackUtils.getContentIdentifier($page) $page.title $trackbackUtils.getPingUrl($page))