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 thoughts on “One-column Madness

  1. 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

  2. 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! 🙂

Leave a Reply