Step by step guide to making a TwentyTen child theme

Step 4: Final Tweaks

Now that we’ve taken care of all of the functionality changes, we can tweak the rest of our design.

Let’s set our background to white, change our fonts and remove the gap at the top by adding the following to our styles.css:

body {
	background: #FFF;
	font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
}
#wrapper {
	margin: 0 auto; padding: 0;
	width: 960px;
}

Next let’s style our header area by adding the following code:

#header {	
	border-top:5px solid #000;
	padding: 0;
}
#branding {
	padding: 20px 0;
}
#site-title a {
	font-weight:normal;
}

This gives our header area a bit more padding and makes our site title less chunky.

Next comes our menu. This task is a bit more complicated. The easiest way to modify the menu is to copy the entire Twenty Tess CSS for the menu section in the child theme and make slight modification until you are happy with it. In this final design, I wanted the navigation to display a top border on rollover and when active and a much bigger font. This was achieve by adding the following to my style sheet:

#access {
	background: #000;
	display: block;
	float: left;
	margin: 0 auto;
	width: 960px; 
}
#access .menu-header,
div.menu {
	font-size: 13px;
	margin: 0px;
	text-transform:uppercase;	
}
#access a {
	border-top:3px solid #000;
	color: #fff;
	line-height: 32px;	
}
#access ul ul {top: 32px;}
#access ul ul li {min-width: 180px;}
#access ul ul ul {
	left: 100%;
	top: 0;
}
#access ul li ul li a {
	background: #000;
	height: auto;
	line-height: 1em;
	padding: 10px;
	width: 160px;	
}
#access li:hover > a,
#access ul ul :hover > a {
	background: #000;
	color: #fff;
}
#access ul li:hover > ul {
	display: block;
}

#access ul li a:hover {
	background: #000;	
	border-top:3px solid #f71c9d;
	color: #fff;
}

#access ul li ul li a:hover,
#access ul li ul li ul li a:hover {
	background: #FFF;
	border-top:3px solid #FFF;
	color: #000;	
}

#access ul li.current_page_item a,
#access ul li.current_page_ancestor a,
#access ul li.current-menu-ancestor  a,
#access ul li.current-menu-item  a,
#access ul li.current-menu-parent  a {	
	border-top:3px solid #f71c9d;
	color: #fff;
}

#access ul li ul.children li a,
#access ul li.current_page_ancestor ul li.current_page_item a,
#access ul li.current_page_ancestor ul li a,
#access ul li.current-menu-item ul li a {
	border-top:3px solid #000;
}

One of the nicest thing about the Twenty ten theme is that it has two sidebar widgets area. When used as is, the Twenty Ten theme simply displays the two sidebars one on top of each other, but by modifying the css, we can alter our layout and create a three column website.

This is done by adding this next bit of code in our style sheet:

#main {
	background:url(images/main_bg.gif) left repeat-y;
	padding:20px 0;
	width:960px; 	
}
#container {
	float: left;
	margin: 0; padding:0 10px 0 10px;
	width: 550px;
}
#content {
	margin:0 20px;
}
#primary{
	float: left;
	overflow: hidden;
	padding: 0;
	width: 195px;	
}
#secondary {
	float: right;
	overflow: hidden;
	width: 195px;
}

You should now have a three column layout.

You’ll notice that I’ve added an image background to my main div. This image needs to be added to your images folder in your child theme. It will display the dotted lines on either side of the main div and in between the columns. We could simply use a border, but I prefer my columns to span the whole height of the site.

The bulk of the work is now complete. Now all we need to do is add a few finishing touches.

Let’s start with the sticky post. The following bit of code removes the background colour and removes the extra padding.

.home .sticky {
	background: #FFF;
	border-top: 0px;
	margin: 0px; padding: 20px 0;
}
.home .sticky .page-link a {
	background:#FFF; 
	border:1px dotted #000;
}
.home .sticky .page-link a:hover {
	color:#f71c9d;
}

Let’s jazz up our main entries and make them stand out a bit more by adding the following CSS:

#content .entry-title {
	background:#000;
	color: #FFF;
	font-size: 21px;
	font-weight: bold;
	line-height: 1.3em;
	margin: 0 0 0 -30px; padding: 2px 20px 2px 30px;	
}

Let’s do the same to our next and previous links by adding the following:

.navigation {
	border-top:1px dotted #000;
	border-bottom:1px dotted #000;
	color: #000;
	font-size: 12px;
	line-height: 18px;
	overflow: hidden;	
	padding:2px;
}
.navigation a:link,
.navigation a:visited {
	color: #000;
	text-decoration: none;
}
.navigation a:active,
.navigation a:hover {
	color: #f71c9d;
}

Our footer area would also look better by being a bit wider.

#colophon {width:960px;}

Finally, our sidebar widgets can be enhanced by adding:

#main .widget-area ul {
	margin-left: 0;
	padding: 0;
}
.widget-title {	
	border-top:1px dotted #000;
	border-bottom:1px dotted #000;
	color: #000;
	padding: 2px 10px;
}
#main .widget-area ul ul {
	margin: 0 20px 0 25px;
}
.tagcloud {
	padding: 5px 10px;
}
#calendar_wrap {padding:10px;}

Obviously, if you’re not using the tag cloud or calendar, there’s no need for this code, but for testing purposes, I inserted every widget possible.

Pfew… that’s all done. Our child theme looks good.