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.

What's Next?
Related Posts

Are you going to enter a design in the Sandbox Designs Competition, Small Potato? There’s still a few days left.

This is a great guide. There are just a couple CSS-specific documents on the Sandbox wiki. You’re welcome to cross-post it, if you like. :)

Thanks Small Potato. This will come in handy as I finish up my entry into the competition. I can’t wait to see Ian’s!

Ian - I’m not going to enter it. A competition would take my attention away from everything else. I would probably focus on it for like a week. It’s too late to try to put up with the frustration :).

Scott - I’ll check out the wiki.

hi, small potato, I have translated this post to Chinese, and I think that can help more China users.

http://blog.techpush.com/archives/sandbox-guide-and-checklist-chinese-edition/

[…] Small, from WPDesigner  has worked up a check list for your sandbox skin. […]

Awesome resource.

Andrej:

Has anyone fixed the dropdown menus so they work in all major browsers? I am struggling to get it to work.

[…] useful and/of if I missed something. Also, check out a few more resources (Sunburntkamel and Small Potato). All the best. Design, Web Design, blog, meta tags, site validation, Code, HTML, tag, […]

[…] the judges have confirmed their participation. (We actually now have an eleventh judge, by the way, who is quite qualified. Wink, […]

Hi Small Potato,

Thanks for this excellent guide!

I’ve been searching for a “bare” Wordpress theme to use as a foundation for site design. I gathered the Sandbox theme is probably one of the best to start of with.

But I’d been scratching my head how to go about with the Sandbox theme… until I saw this guide. It really helps in my understanding of it. Thanks!

Sherman

[…] Sandbox Guide and Check List […]

Reply
Comment Policy
  • Theme support questions should be posted at the support forums.
  • Name and Email are required. Email is never published.
  • You grant this site perpetual license to reproduce your words and name/website in attribution.
  • Inappropriate comments will be removed at my discretion.
Close
Powered by ShareThis