The HEADER section affects the toolbar, logo, and menu area. These areas usually receive a lot of design attention, and the large number of options listed below reflects that need for flexibility.
| Property | Description | Example | New In Zen |
|---|---|---|---|
| zenHeaderBackgroundImage | The background image for the header. | my-background.png | |
| zenHeaderBackgroundImagePosition | The CSS value for positioning the zenHeaderBackgroundImage. | no-repeat top left | |
| zenHeaderHeight | The CSS value for the height of the header. | 134px | |
| zenLogo | The image to be displayed for the logo. | zen-logo.gif | |
| zenLogoPosition | The distance the logo will sit above the lower edge of the header. | 34px | |
| zenToolbarBackgroundImage | The background image for the toolbar. | background.gif | |
| zenToolbarBackgroundImagePosition | The background positioning for the toolbar. | repeat-x top left | |
| zenToolbarBackgroundColor | The background color for the toolbar (only shows if a background image isn't used). | #ffffff | |
| zenToolbarHoverColor | The toolbar menu item text color when hovering. | #ffffff | |
| zenToolbarBackgroundHoverColor | The background color for toolbar menu items when hovering. | #2D637F | |
| zenToolbarSelectedColor | The text color for toolbar menu items to indicate "selected" status. | #99AF3E | |
| zenToolbarSelectedBackgroundColor | The background color for toolbar menu items to indicate "selected" status. | #ffffff | |
| zenToolbarUserColor | The color to use for the user menu item (or login) in the toolbar. | #6e706e | |
| zenToolbarUserHoverColor | The color to use when hovering over the user menu item (or login) in the toolbar. | #99AF3E | |
| zenToolbarHeadingBackgroundColor | The background color for the top item (heading) of the toolbar drop-down menus. | #2D637F | |
| zenToolbarHeadingColor | The text color for the top item (heading) of the toolbar drop-down menus. | #ffffff | |
| zenToolbarHeadingTransform | The CSS value for changing the capitalization of the text in the top item (heading) of the toolbar drop-down menus. | uppercase | |
| zenToolbarHeadingWeight | The CSS value for adjusting the top item (heading) of the toolbar drop-down menus. | bold | |
| zenSearchColor | The color of the "search" invitation text shown in the toolbar's search input field. | #2D637F | |
| zenSearchBackgroundImage | The image to show behind the toolbar's search input field. | search.png | |
| zenSearchBackgroundImagePosition | The CSS value for positioning the zenSearchBackgroundImage. | no-repeat bottom right | |
| zenSearchInputColor | The color of the text the user types in the search field. | white | |
| zenSearchInputPadding | The CSS padding for the search input field. | 10px 4px 4px 2px | |
| zenSearchInputBackgroundColor | The background color for the search input field. | transparent | |
| zenSearchFontFamily | The font to use for the search input field. | Arial, Helvetica, sans-serif | |
| zenSearchTextTransform | The CSS value for changing the capitalization of the text in the search input field. | uppercase | |
| zenSearchFontSize | The size of the text in the search input field. | 12px | |
| zenWatermarkFontFamily | The font to use for the space name watermark. | 'Arm Wrestler', Arial, sans-serif | |
| zenWatermarkFontSize | The size of the font to use for the watermark. | 64px | |
| zenWatermarkFontWeight | The weight of the font to use for the watermark. | bold | |
| zenWatermarkPaddingRight | The distance from the right edge of the canvas to display the watermark. | 24px | |
| zenWatermarkPositionFromTop | The distance from the top edge of the header to display the watermark. | 20px | |
| zenWatermarkColor | The color to use for the space name watermark. | #6e706e | |
| zenWatermarkLetterSpacing | The CSS letter-spacing value for the watermark text. | -0.03em | |
| zenWatermarkTextTransform | The CSS value for changing the capitalization of the watermark text. | lowercase | |
| zenWatermarkDisplay | Whether to display the watermark. Leave blank to display it, or "none" to hide it. | none | |
| zenTabBorder | The CSS value for the menu borders. | 1px solid #CED3D6 | |
| zenTabBorderLeft | The CSS value for the menu left border only. Use instead of zenTabBorder for a dividing line between menu items, rather than a framed tab. | 1px solid #CED3D6 | |
| zenMenuTopWeight | The CSS value for the text weight of the menus. | bold | |
| zenMenuPadding | The CSS padding value for the menu items. | 4px | |
| zenMenuTopPadding | The CSS padding-top value for the menu items. | 0px | |
| zenMenuPositionFromBottom | The distance from the bottom edge of the header to display the menu. | 21px | |
| zenTabMargin | The CSS margin-right value for the menu items. | 2px | |
| zenTabBottomPadding | The CSS padding-bottom value for the menu items. | 3px | |
| zenDropMenuPosition | The CSS top value for the first-level drop-down menu. Usually needs some adjustment to avoid overlaps and gaps. | 29px | |
| zenTabBorderFirst | The CSS border-left value for the leftmost menu item. Useful to suppress the extra "divider" (see zenTabBorderLeft). | 0px | |
| zenTabLinkColor | The link text color for menu items. | #2D637F | |
| zenTabHoverColor | The link text color for menu items when hovering. | #585f65 | |
| zenTabBackgroundImage | The background image for menu items. | nav-slice.gif | |
| zenTabBackgroundImagePosition | The CSS value for positioning the zenTabBackgroundImage. | repeat-x bottom left | |
| zenTabBackgroundHoverImage | The background image for menu items when hovering. | tab-slice.gif | |
| zenDropTabBackgroundHoverImage | The background image for menu items in drop-down menu items when hovering (if different from the top-level menu items). | tab-slice.gif | |
| zenTabBackgroundHoverImagePosition | The CSS value for positioning the zenTabBackgroundHoverImage and zenDropTabBackgroundHoverImage. | repeat-x bottom left | |
| zenMenuTopColor | The color of text for top-level menu items. | #2D637F | |
| zenMenuTopHoverColor | The color of text for top-level menu items when hovering. | #585f65 | |
| zenMenuFontSize | The size of the font for menu items. | 14px | |
| zenMenuTextTransform | The CSS value for changing the capitalization of top-level menu items. | uppercase | |
| zenMenuDropTextTransform | The CSS value for changing the capitalization of drop-down menu items. | lowercase | |
| zenMenuJustify | The CSS value for aligning the Menu | right | |
| zenMenuMarginLeft | The CSS value for the left margin of the Menu (useful to prevent menu running over the logo) | 320px | |
| zenMenuCurrent | The text color for menu items that refer to the current page. | #2D637F | |
| zenCrumbsColor | The text color for breadcrumbs. | #BDC3C6 | |
| zenCrumbsHover | The text color for breadcrumbs when hovering. | white | |
| zenCrumbsBackground | The color for the background of the breadcrumbs. | transparent | |
| zenCrumbsMargin | The CSS margin value for the breadcrumbs. | 3px 0px | |
| maxBreadcrumbsBeforeCollapse |
The number of breadcrumbs to display before collapsing with the ellipse (default=5) | 3 | 5.0 |
| zenMozOpacity | The CSS -moz-opacity value for the breadcrumbs and footer. | 0.6 | |
| zenKhtmlOpacity | The CSS -khtml-opacity value for the breadcrumbs and footer. | 0.6 | |
| zenOpacity | The CSS opacity value for the breadcrumbs and footer. | 0.6 |
Example
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam fermentum vestibulum est. Sed quis tortor.