Skip to main content

Ivan Teoh

Something personal yet public

WordPress Theme Development 12 - Layout Stylesheet

I would say this layout style sheet is the most challenging. First of all, I just want this WordPress theme to have a basic layout with fixed width consists of two columns, one for posts and another one for sidebar. On top of the content is header and of course footer at the bottom. Structure region is the major layout design of the division in this site. It follows negative margin technique. Tag canvas is getting ready for html5 standard. Some of the latest browsers: Firefox 3, Opera 9.5, Safari 4.0 and Chrome 2.0, while I writing this, support canvas. An image will be display at canvas using Processing JavaScript library.

75-style.css (Source)

/* *** Layout *** */

/* This will save you having to declare each div's position as 'relative' and
allows you to absolutely position elements inside them
div {
    position:relative;
}
*/

/* Begin Structure */
div#wrapper {
    width: 760px;
    margin: 0 auto;
}

div#main {
    padding: 10px;
    overflow: hidden;
}

div#container {
    float: left;
    width: 100%;
}

div#content {
    float: left;
    width: 450px;
}

div#sidebar {
    float: left;
    width: 210px;
    margin-left: -250px;
    padding: 20px;
}

div#footer {
    clear: left;
    width: 100%;
}
/* End Structure */

/* Begin Header */
canvas#navCanvas {
    width: 760px;
    height: 120px;
    margin-bottom: -120px;
}

div#header h1 {
    padding-top: 38px;
}

div#header p{
    padding-bottom: 38px;
}
/* End Header */

/* Begin NavMenu */
div#navmenu
{
  padding:6px;
  overflow:auto;
  height:1%;
  clear:both;
}

div#navmenu li
{
  display: inline;
}

div#navmenu a
{
  text-decoration:none;
  margin:0 10px;
  height:23px;
  line-height:23px;
  float:left;
  display:block;
}
/* End NavMenu */

/* Begin Entry */
div.entry-title {
    margin: 1em 0 0.5em;
}

div.entry-content ul li {
    margin: 0 0 0 1em;
}
/* End Entry */

/* Begin Comment Form */
div#comments-list, form#commentform {
    padding: 1em 0 0;
}

input#author, input#email, input#url, textarea#comment {
    padding: 0.2em;
}

input#author, input#email, input#url {
    width: 50%;
}

div#comments-list ul li {
    margin: 0 0 1em;
}

textarea#comment {
    height: 15em;
    margin: 1em 0 0.5em;
    overflow: auto;
    width: 75%;
}
/* End Comment Form */

/* Begin Sidebar */
div#sidebar li {
    margin: 0 0 2em;
}

div#sidebar ul ul {
    margin: 0 0 0 1em;
}

div#sidebar ul ul li {
    list-style: none;
    margin: 0;
}

div#sidebar ul ul ul {
    margin: 0 0 0 0.5em;
}

div#sidebar ul ul ul li {
    list-style: none;
}
/* End Sidebar */

/* Begin Search Form */
form#searchform input#s {
    width: 8em;
}

form#searchform {
    margin:0.2em 0 0;
}
/* End Search Form */

/* From Starkers Theme http://elliotjaystocks.com/starkers/ */
/* Use this br class to clear your floated columns */
br.dirtyLittleTrick {
    clear: both;
    display: block;
    height: 1px;
    margin: -1px 0 0 0;
}

Comments

Comments powered by Disqus