Resources

Sandbox Guide and Check List

Jazib Zaman Published July 23, 2007 Updated February 15, 2018 2 min read No comments

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;

.