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.

#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%;
}

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

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s