Learning Child Theming with Twenty Twelve

Looking through Twenty Twelve’s stylesheet you’ll notice lots of comments, so it’s easy to know what the team was trying to do and what does what. Additionally, if you played around with the starter theme, underscores, you’ll recognize most of these comments and styles.

One thing to note is that the Twenty Twelve is mobile-first which means the @media queries are reversed. Styles not wrapped in @media queries are the mobile styles. This is quite strange at first, but once you know that’s the case, then it’s pretty easy. If you scroll at the very bottom, you’ll find the styles for the largest setting, 960px.

In my child theme, I used the following:

/* Minimum width of 960 pixels. */
@media screen and (min-width: 960px) {
 div.site, div.wrapper {
	overflow:visible;
 }
 div.site {
	margin-top:10px; 
	position:relative;
 }
 header#masthead > hgroup h2 {
	text-align:right;
 }
 #secondary {
	padding:20px; 
	margin-right:-60px; 
	background:#fff;
	box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
 }
}

I wanted to create a sidebar which would extend slightly out of the main container, so setting overflow:visible on the wrapper allows us to do that.

My initial intention was to have the title and description appear above the container which can be done using:

 header#masthead > hgroup {
	height:0; 
	padding:0 50px;
 }
 header#masthead > hgroup h1 {
	position:relative; 
	top:-110px; 
	left:-40px; 
	text-shadow:0 2px 0 rgba(255,255,255,.75);
 }
 header#masthead > hgroup h2 {
	position:relative; 
	top:-130px; 
	text-align:right;
 }

This works wonderfully, but when someone wants to use a very long title and/or description, then the theme breaks. So in order to meet the theme requirements, I had no option but to get rid of my absolute positioning.

In the parent theme, you’ll see that the background colour is also in the media query. I’m not sure why, but I simply changed the background colour to a creamy colour and added that in my main styles at the very top.

Next, I changed a few colours which gives us our final theme. Overall, Twenty Twelve is very easy to work with. If you’re making a theme for yourself and don’t have to please the masses, that’s even easier.