Sandbox Guide and Check List

This is continually updated guide and checklist for everyone working with the Sandbox theme.

Basic Structure

• div#wrapper [.hfeed]
  • #header
    • h1
    • div#blog-description
  • div#access
    • div.skip-link
    • sandbox_globalnav() [div#menu]
  • div#container
    • div#content
      • div#nav-above [.navigation]
        • div.nav-previous
        • div.nav-next
      • div#post-the_ID() [sandbox_post_class()]
        • h2.entry-title
        • div.entry-date
        • div.entry-content
        • div.entry-meta
          • span.author (.vcard)
          • span.cat-links
          • span.comments-link
      • div#nav-above [.navigation]
        • div.nav-previous
        • div.nav-next
  • div#primary [.sideabar]
    • ul.xoxo
      • li#pages
      • li#categories
      • li#archives
  • div#secondary [.sidebar]
    • ul.xoxo
      • li#search
      • li#rss-links
      • li#meta
  • div#footer
    • span#generator-link
    • span#theme-link

Guide

• Default Stylesheet Typo: Open style.css, change
  span.req-field

  to

  span.required

  .

• Drop-down Links: By default, the style sheet makes the child-page links, for the horizontal menu, display as drop-down links. That does not work in all browsers. Fix it or don’t display child-page links at all. To not display them at all, add
  depth=1

  to

  wp_list_pages()

  within functions.php or use

  display:none;

  in style.css for the subsequent list items.

• Comment on Pages: Allow commenting on certain Pages by adding a custom field. Key =
  comments

  . Value = (any text you want).

• Dynamic Classes: On the front, archive, and search pages, post listing uses
  div.post

  . On Page pages, it uses

  div.page

  .

• Page Heading Selector:
  h2.page-title

  replaces

  h2.entry-title
• Archive Headings: Archive pages use
  H3

  instead of

  H2

  for entry titles.

• Comments Template: Comments [
  div#comments-list

  ] and Trackbacks [

  div#trackbacks-list

  ] are separated. If you want to style for both, use

  div#comments

  .

• Custom CSS: If you aren’t using any of the default Sandbox layouts then remember to remove the CSS import in the default style.css file. For example:
  @import url(‘sandbox-layouts/2c-l.css’);

  .

• Containging Floats for Background Image: If you want a background image behind #content, #primary, and #secondary, apply
  clear: both;

  to #footer and use the background image on #wrapper instead of #container. Then, give #wrapper

  overflow: auto;

  .

Templates and Pages to Style and Validate

• 404.php
• archive.php
• archives.php
• attachment.php
• author.php
• category.php
• comments.php
  • no comments
  • logged in
  • must login
  • password protected
• footer.php
• index.php
• links.php
• page.php
• search.php
• sidebar.php
• single.php

If you find any mistake in this guide, please post your correction in the comments.