Custom CSS tweaks for Twenty Eleven on WordPress.com

I wanted to have my images and videos displayed much wider than by default in the Twenty Eleven theme, but only when viewing single entries (where there is no sidebar). Here are the few simple tweaks I’ve implemented using the WordPress.com Custom CSS upgrade. They’re not foolproof when it come to embeds, but they work well enough for my current needs.

.singular .hentry {
  padding:0;
}

.singular .entry-header,.singular .entry-content,.singular footer.entry-meta,.singular #comments-title {
  width:100%;
}

.singular #author-info {
  margin: 2.2em -76px;
  padding:20px;
}

.singular .entry-meta .edit-link a {
  top:40px;
  position:absolute;
  bottom:auto;
  left:0;
  right:auto;
}

.commentlist > li.comment {
  width:625px;
}

#comments #respond {
  max-width:780px;
  margin:0 0 15px 30px;
}

.entry-content,.entry-summary {
  padding:0;
}

.entry-title,.entry-header .entry-meta {
  padding-right:76px;
  margin-bottom:8px;
}

.reblogger-note {
  margin-top:18px;
}

.singular iframe {
  max-width:100%;
  width:850px;
  height:515px;
}

Note: I’ve also updated the width limit to 850px in the CSS Settings section of the CSS Edit tool of the Custom Design upgrade.

Here’s a sample photo post before:

And the same photo post after:

1 thought on “Custom CSS tweaks for Twenty Eleven on WordPress.com

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.