One-column Madness

I went and made a one-column, no-header-image, version of Twenty Ten using the Custom CSS upgrade. Madness.

I (currently—you know how these things are with your personal blog, right?) plan on actually making this look like something but in the meantime, here’s the current custom CSS I’m adding to the Twenty Ten stylesheet.

[sourcecode language=”css”]
#wrapper {
width: 720px;
}
#branding {
width: 640px;
}
#site-title {
margin: 18px 0 9px;
}
#site-description {
float: none;
margin: 0;
}
#header img,
#access {
display: none;
}
#container {
float: none;
margin: 0;
width: 680px;
}
#content {
margin: 0 0 0 40px;
}
.home .sticky {
margin-left: 0;
margin-right: 0;
}
#primary,
#secondary {
float: left;
overflow: hidden;
width: 220px;
display: none;
}
#secondary {
clear: left;
}
#footer {
clear: both;
width: 100%;
}
#colophon {
margin-top: 36px;
width: 640px;
}
#site-info {
width: 300px;
}
#site-generator {
width: auto;
}

.one-column #content {
margin: 0 auto;
width: 100%;
}

.single-attachment #content {
margin: 0 auto;
width: 100%;
}
[/sourcecode]

Feel free to take the CSS above and use it as a starting point for your own design!

8 responses to “One-column Madness”

  1. Nice… I love the simplicity, great for beginners. Cheers!

  2. Is using display:none really the best solution?

    1. Sometimes it is. In this case, most likely.

  3. manlikemalcolm Avatar
    manlikemalcolm

    Hello Ian, Can you recommend a best practice for implementing this? In a Child theme? or just drop this code into the end of styles.css?

    Thanks, Malcolm

    1. For a WordPress.org blog you’d want to use this in a Child Theme after importing the Twenty Ten stylesheet.

  4. This layout is a bit like what I did for my blog layout here.

    Thought about using Tumblr when a wanted a simple blog layout but I’ve found that it comes in very handy to have the power of the WordPress backend there when I need it.

    Also quite glad I’ve ventured onto your personal site, Ian. I’ve followed your professional work for years but it’s fun to be able to see what your likes are otherwise—like there’s an actual person behind the code! 🙂

    1. Tumblr; Bah! 🙂

  5. […] One-column Madness May 2010 7 comments 5 […]

Leave a Reply

Discover more from Ian Daniel Stewart

Subscribe now to keep reading and get access to the full archive.

Continue reading