ZEn 6.x2.

x REfEREncE
.info All this info is already pre-populated for you in Zen, but applies to any D6 theme. Much of this information was taken from drupal.org http://drupal.org/node/171205 naming your theme (required) name = Site theme theme page description description = Custom theme for this site. screenshot on admin/build/ themes screenshot = screenshot.png Drupal version (required) core = 6.x sub-theme inheritance base theme = zen stylesheets These lines allow you to add stylesheets of any media type (all, print, etc.) To remove stylesheets of a base theme or module from your sub-theme, specify the stylesheets name in your sub-themes .info, but dont include a file in your subtheme directory with that name. stylesheets[all][] = stylesheetname.css stylesheets[print][] = print.css IE conditional stylesheets conditional-stylesheets[if IE][all][] = ie.css javascripts (JQuery) scripts[] = scripts.js regions To add a new region, copy Zens page.tpl. php to your sub-themes directory, add a line to this file, and then add the new variable to your page.tpl.php template. regions[left] = Left sidebar regions[right] = Right sidebar regions[content] = Content regions[header] = Header regions[footer] = Footer regions[navbar] = navigation bar regions[content_top] = content top regions[content_bottom] = content bottom regions[closure_region] = closure For more details: http://drupal.org/ node/171224 features Various page elements output by the theme can be toggled on and off. The features control which of these check boxes display on the admin/build/themes config page. This is useful for suppressing check boxes for elements not used by your sub-theme. To suppress a check box, omit the entry for it below. See the Drupal 6 Theme Guide for more info: http://drupal.org node/171205#features features[] = logo features[] = name features[] = slogan features[] = mission features[] = node_user_picture features[] = comment_user_picture features[] = search features[] = favicon ; features[] = primary_links ; features[] = secondary_links Weve disabled the last two features by only defining the features we want and commenting out the others. STYLE SHEETS html-elements.css layout.css wireframes.css backgrounds.css pages.css tabs.css messages.css blocks.css block-editing.css navigation.css views-styles.css nodes.css comments.css forms.css fields.css Zens reset stylesheet; standardizes HTML elements across browsers Page layout method (DIV positioning) Zens basic wireframing tool Background images (Faux Columns works well with Zens layout.css) Page styling (corresponds to elements in page.tpl.php) Drupals tabs Drupals error/warning/status messages Block styling Zens block editing links Primary/secondary links or any navigation blocks Views module styling Node styling (corresponds to elements in node.tpl.php) Comment styling Form styling CCK modules fields styling comments.css #comments Wrapper for the list of comments and its title #comments-title Heading for the list of comments .comment Wrapper for a single comment .comment-inner Additional wrapper for a single comment .comment-preview Preview of the comment before submitting new or updated comment .comment.new A new comment since the user last viewed the page. .comment.odd An odd-numbered comment in the list of comments .comment.even An even-numbered comment in the list of comments .comment.first The first comment in the list of comments .comment.last The last comment in the list of comments .comment-unpublished Unpublished comments .comment-unpublished div.unpublished The word Unpublished displayed beneath the content. See also the div. unpublished declaration in the nodes.css. .comment-published Published comments .comment-by-anon A comment created by an anonymous user .comment-by-author A comment created by the nodes author .comment-mine A comment created by the current user .comment h3.title Comment title .new New marker for comments that are new for the current user .comment .picture The picture of the comment author .comment .submitted The posted by information .comment .content Comments content wrapper .comment .user-signature The users signature .comment div.links Wrapper for comment links. See also the ul.links declaration in the nodes.css. .indented Nested comments are indented .preview .comment Preview of the comment before submitting new or updated comment
sm

fields.css .field Any CCK field. .field-type-datetime Always use datetime when creating new CCK date fields. date and datestamp are legacy types. .field-type-filefield .field-type-image .field-type-nodereference .field-type-number-decimal .field-type-number-float .field-type-number-integer .field-type-text .field-type-userreference Field type wrapper for CCK, imagefield, and filefield .field-field-FIELDNAME Wrapper for named fields. Underscores in field name are replaced with dashes. forms.css .form-item, .form-checkboxes, .form-radios Wrapper for a form element (or group of form elements) and its label .form-item input.error, .form-item textarea.error, .form-item select.error Highlight the form elements that caused a form submission error .form-item label The label for a form element .form-item label.option The label for a radio button or checkbox .form-required The part of the label that indicates a required field .form-item .description The descriptive help text (separate from the label) .form-checkboxes .form-item, .form-radios .form-item Pack groups of checkboxes and radio buttons closer together .form-submit The submit button .container-inline div, .container-inline label Inline labels and form divs .tips Tips for Drupals input formats #search-box Wrapper in search-theme-form.tpl.php #edit-search-theme-form-1-wrapper label Label that says Search this site: #user-login-form Drupals default login form block

theme-settings Set the default settings to be used in theme-settings.php settings[zen_block_editing] = 1 settings[zen_breadcrumb] = yes settings[zen_breadcrumb_separator] = settings[zen_breadcrumb_home] = 1 settings[zen_breadcrumb_trailing] = 1 settings[zen_breadcrumb_title] = 0 settings[zen_rebuild_registry] = 0 settings[zen_wireframes] = 0 STYLE SHEET HinTS blocks.css .block Block wrapper .block.region-odd Zebra striping for each block in the region .block.region-even Zebra striping for each block in the region .block.odd Zebra striping independent of each region .block.even Zebra striping independent of each region .region-count-1 Incremental count for each block in the region .count-1 Incremental count independent of each region .block-inner Additional wrapper for block .block h2.title Block title .block .content Blocks content wrapper #block-aggregator-category-1 Block for the latest news items in the first category

#block-aggregator-feed-1 Block for the latest news items in the first feed #block-block-1 First administrator-defined block #block-blog-0 Recent blog posts block #block-book-0 Book navigation block for the current books table of contents #block-comments-0 Recent comments block #block-forum-0 Active forum topics block #block-forum-1 New forum topics block #block-menu-2 Primary links block #block-node-0 Syndicate block for primary RSS feed #block-poll-0 Most recent poll block #block-profile-0 Author information block for the profile of the pages author #block-search-0 Search form block #block-statistics-0 Popular content block #block-user-0 User login form block #block-user-1 Navigation block for Drupal navigation menu #block-user-2 Whos new block for a list of the newest users #block-user-3 Whos online block for a list of the online users

2211 North Elston Avenue Suite #202 Chicago, Illinois 60614 P 773.645.4100 F 773.645.4105

ZEn 6.x2.x REfEREncE

forms.css cont. OpenID The default styling for the OpenID login link seems to assume Garlands styling of list items. #user-login-form ul OpenID creates a new ul above the login forms links. #user-login-form li.openid-link, #user-login li.openid-link The Log in using OpenID links. #user-login-form li.user-link, #user-login li.user-link The Cancel OpenID login links. #user-login li.openid-link, #user-login li.user-link The OpenID links on the /user form. ie.css, ie5.css, ie6.css TIP: Internet Explorer limits Drupal to 31 stylesheets total: http://drupal.org/node/256802 messages.css div.messages, Important messages (status, warning, and error) for the user div.status Normal priority messages div.warning Medium priority messages div.error High priority messages. See also the .error declaration in pages.css. navigation.css li a.active The active item in a Drupal menu #navbar, #navbar-inner Navigation bar #primary, #secondary Primary and Secondary links .block-menu Menu blocks .block-menu_block Menu block blocks. See http://drupal.org/project/menu_block nodes.css .node Node wrapper .node-inner Additional wrapper for node .sticky A sticky node (displayed before others in a list) .node-unpublished Unpublished nodes .node-unpublished div.unpublished, .comment-unpublished div.unpublished The word Unpublished displayed underneath the content. .node-mine A node created by the current user .node-teaser A node displayed as teaser All nodes are given a node-type-FOO class that describes the type of content that it is. If you create a new content type called my-custom-type, it will receive a node-type-my-custom-type class. .node-type-page Page content node .node-type-story Story content node .node h2.title Node title .marker New or Updated marker for content that is new or updated for the current user .node .picture The picture of the node author .node .meta Wrapper for submitted and terms data .node .submitted The posted by information .node .terms Node terms (taxonomy) .node .content Nodes content wrapper .node div.links Wrapper for node links ul.links Taxonomy links, node links, comment links .preview .node Preview of the content before submitting new or updated content pages.css #logo-title Wrapper for logo, website name, and slogan #logo Wrapper for logo #logo-image The actual logo image h1#site-name, div#site-name The name of the website #site-slogan The slogan (or tagline) of a website #header-blocks Wrapper for any blocks placed in the header region #mission The mission statement of the site (displayed on homepage) #content-top Wrapper for any blocks placed in the content top region #content-header Wrapper for breadcrumb, title, messages, tabs, and help .breadcrumb The path to the current page in the form of a list of links h1.title The title of the page h2.title Block title or the title of a piece of content when it is given in a list of content h3.title Comment title tr.even, tr.odd Some tables have rows marked even or odd. div.messages Important messages (status, warning, and error) for the user div.status Normal priority messages div.warning, tr.warning Medium priority messages div.error, tr.error High priority messages. .error Errors that are separate from div. messages status messages. .warning Warnings that are separate from div. messages status messages. div.tabs Tabs for View, Edit, etc. .help Help text on a page .more-help-link Link to more help #content-area Wrapper for the actual page content .pager A list of page numbers when more than 1 page of content is available .pager a, .pager strong.pager-current Each page number in the pager list .feed-icons The links to the RSS or Atom feeds for the current list of content .more-link Aggregator, blog, and forum more link #content-bottom Wrapper for any blocks placed in the content bottom region #footer-message Wrapper for the footer message from Drupals Site information and for any blocks placed in the footer region #closure-blocks Wrapper for any blocks placed in the closure region .box, .box-inner Wrapper for Comment form, Comment viewing options, Menu admin, and Search results.

Visual Placement of Zens Layout Divs and Their HTML Source Order #page Container

Example Margins for Zens layout method

height: 50px;

#header HTML source order: 1 #main Container #navbar HTML source order: 3 #sidebar-left HTML source order: 4 #content HTML source order: 2 #sidebar-right HTML source order: 5 margin-top: 50px; width: 100px; margin-right: 100px; margin-left: 100px;

width: 300px; margin-right: 300px; margin-top: 50px; margin-top: 50px;

width: 100px;

margin-right: 200px; margin-left: 200px; #footer HTML source order: 6 width: 100px;

margin-right: 300px;

Images 2009 John Albin Wilkins. Provided under a Creative Commons Attribution Non-Commercial No Derivatives license (http://creativecommons.org/licenses/by-nc-nd/3.0/us/)

2009 Palantir.net, Inc., Provided under a Creative Commons Attribution Non-Commercial No Derivatives license (http://creativecommons.org/licenses/by-nc-nd/3.0/us/) The Palantir.net logo is a trademark of Palantir.net, Inc. Palantir is a registered trademark of Palantir.net, Inc.

5
PP