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.

You May Also Like

Avatar of Jazib Zaman

About the Author: Jazib Zaman

Leave a Reply

Your email address will not be published. Required fields are marked *