Twenty Thirteen

Lens Cap has been switched to the Twenty Thirteen theme (which I helped create). Twenty Thirteen was designed to encourage you to use various post formats, creating an alternating tapestry of colors as you scroll down the page — one post background per post format.

Since Lens Cap is mostly a photoblog, I wrote a little custom CSS (requires the Custom Design upgrade) to take advantage of alternating colors regardless. Feel free to grab it:

/* second post */
#content .format-image:nth-of-type( 6n + 2 ) {
	background: #398647;
	color: #fff;
}

#content .format-image:nth-of-type( 6n + 2 ) a {
	color: #fff;
}

/* third post */
#content .format-image:nth-of-type( 6n + 3 ), #content .format-image:nth-of-type( 6n + 3 ) .entry-title a {
	background: #0a3112;
	color: #fff;
}

#content .format-image:nth-of-type( 6n + 3 ) a {
	color: #48b29c;
}

/* fourth post */
#content .format-image:nth-of-type( 6n + 4 ), #content .format-image:nth-of-type( 6n + 4 ) .entry-title a {
	background: #95c26c;
	color: #fff;
}

#content .format-image:nth-of-type( 6n + 4 ) a {
	color: #004c3c;
}

/* fifth post */
#content .format-image:nth-of-type( 6n + 5 ), #content .format-image:nth-of-type( 6n + 5 ) .entry-title a {
	background: #eef8f6;
}

#content .format-image:nth-of-type( 6n + 5 ) .entry-meta a {
	color: #0e5c13;
}

/* sixth post */
#content .format-image:nth-of-type( 6n + 6 ), #content .format-image:nth-of-type( 6n + 6 ) .entry-title a {
	background: #448275;
	color: #fff;
}

#content .format-image:nth-of-type( 6n + 6 ) .entry-meta a {
	color: #fff;
}

#content .format-image:nth-of-type( 6n + 6 ) a {
	color: #0a3112;
}

/* seventh post */
#content .format-image:nth-of-type( 6n + 7 ), #content .format-image:nth-of-type( 6n + 7 ) .entry-title a {
	background: #aed9bd;
}

#content .format-image:nth-of-type( 6n + 7 ) .entry-meta a {
	color: #0e5c13;
}

You can copy/paste that right in the CSS editor. The above uses the following colors, which you can add in your admin-screen under Appearance > Customize:

green-color-scheme

  1. Light blue: #eef8f6
  2. Teal: #418275
  3. Green: #358744
  4. Light green: #94c367
  5. Dark green: #083110

Oh, and here’s the green version of the header I’m using.

Published by Joen A.

Design wrangler at Automattic. I believe in gravity, the moon-landing and human decency.

4 thoughts on “Twenty Thirteen

    1. I used negative margins. Here’s a code snippet:

      @media (min-width: 805px) {
      	img.alignnone.size-full, .post-format-content img, .hentry img.alignnone {
      		width: auto;
      		max-width: 804px;
      		margin-left: -100px;
      		margin-right: -100px;
      	}
      }
      

Leave a comment