WordPress Twenty Eleven

Here's a little something I put together for myself. It's the new WordPress 3.2 Twenty Eleven theme boiled down to just the structure of the page and indented to show what is nested within what. It helped me to see the structure and location of all the little percentages I want to change in my child themes. Enjoy!

/* Redux of Twenty Eleven structure CSS. Indented to show nesting. */
body {padding:0 2em;}
  #page {margin:2em auto;max-width:1000px;}
    #branding
      #branding hgroup {margin:0 7.6%;}
        #site-title {margin-right:270px;padding:3.65625em 0 0;}
        #site-description {margin:0 270px 3.65625em 0;}
        #branding img {height:auto;margin-bottom:-7px;width: 100%;}
      #access div {margin:0 7.6%;}
      #branding #searchform {position:absolute;top:3.8em;right:7.6%;text-align:right;}
      /* OR if title is hidden */
      #branding .only-search #searchform {top:5px;z-index:1;}
    /* With left content, right sidebar */
    #primary {float:left;margin:0 -26.4% 0 0;width:100%;}
      #content {margin:0 34% 0 7.6%;width:58.4%;}
        article
    #secondary {float:right;margin-right:7.6%;width:18.8%;}
    /* OR with right content, left sidebar */
    .left-sidebar #primary {float:right;margin:0 0 0 -26.4%;width:100%;}
      .left-sidebar #content {margin:0 7.6% 0 34%;width:58.4%;}
    .left-sidebar #secondary {float:left;margin-left:7.6%;margin-right:0;width:18.8%;}
    /* Footer */
    #colophon {clear:both;}
      #supplementary {border-top:1px solid #ddd;padding:1.625em 7.6%;overflow: hidden;}
      #site-generator {border-top:1px solid #ddd;line-height:2.2em;padding:2.2em 0.5em;}
This entry was posted in Technology Pros and tagged , , , . Bookmark the permalink.

Comments are closed.