I’ve showed you how to create a basic child theme and how to begin to make changes to it. Now I’ll show you a few things you can do to it that will keep the Twenty Ten look, but add a bit of style to it.
Something I like to do when I install Twenty Ten is spice up the menu bar, make the sidebar wider, and add a few other small changes which I’ll show you how to do just with CSS.

First thing I do is move the site description so it aligns to the right of my site, by default it’s a not aligned to the right and I think it looks better when it is.

Add this to your style.css

#site-description {  /* align site description to the right */
	text-align: right;
}

All this does is align the text to the right, you can see it in the images.

Next we’ll spice up the menubar, which by default is really plain looking. Well start by adjusting where the menubar is, and reducing the thickness of it, then finish off by adding opacity to it.

Add this to your css, each line is commented so you can see what it does. Commenting lines of your code makes it easy to work with if you ever want to change something.
First we’ll reposition the menubar just by moving it up 30px so it overlaps the bottom of the header image and adjust the content and sidebar to compensate for the extra whitespace.

#header #access{  /* move menu bar onto header */
	top: -30px;
	position: relative;
}
#main {  /* raise main area up close to new positioned menu */
	padding: 20px 0 0;
}
#primary {  /* adjust the sidebar */
	margin-top: 10px;
}

Next we’ll make it semi transparent, adjust the color and height of submenus and make them transparent as well, then change the text color slightly so it’s more noticeable.

#access { /* decrease the height of menu, add box shadow and make it semi transparent */
	height:30px;
	-webkit-box-shadow: 0px 1px 3px #525252;
	-moz-box-shadow: 0px 1px 3px #525252;
	box-shadow: 0px 1px 3px #525252;
	background: rgb(0, 0, 0); /* Fallback for web browsers that don't support RGBa */
	background: rgba(0, 0, 0, 0.7); /* RGBa does not affect child elements */
	filter:alpha(opacity=95); /* opacity for IE */
}
#access ul ul a,#access li:hover > a,#access ul ul :hover > a {
	background-color: #000;
	background: rgb(0, 0, 0); /* Fallback for web browsers that don't support RGBa */
	background: rgba(0, 0, 0, 0.7); /* RGBa for sub menus */
}
#access a { /* brighten the menu links */
	color:#ddd;
	line-height:30px;
}
#access li:hover > a,#access ul ul :hover > a {
	color: #d9d8d8; /* menu hover link color */
	background: rgba(8, 8, 8, 0.8);
}
#access ul li.current_page_item > a,#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,#access ul li.current-menu-parent > a {
	color: #fff; /* current menu link */
}
#access ul ul { /* adjust height of dropdown menus */
	top:30px;
}
#access ul ul ul {
	top:0;
}

Now save your CSS and upload it and look at your site. It should look something like this.

You can stop here and you’ll have a nice looking menu bar, or keep reading and I’ll show you a few more things I like to do.
I find Twenty Ten fonts to take up too much space, this will tighen it up a bit.

body, input, textarea {
	font-family: Arial, Helvetica, sans-serif; /* overall font */
}
#content,
#content input,
#content textarea {  /* change the content font and make it smaller and reduce line height */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	line-height: 155%;
}
#content .entry-title {  /* post title font */
    font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
}

Not a huge change, but I think it looks better.

This will add a simple border around post images that don’t have a caption, sure you can add it in the post admin, you won’t need to with this though. You can see what it looks like in the above picture.

/* add a border to images */
#content img.attachment-post-thumbnail,
#content img.attachment-single-post-thumbnail {
    float: left;
    margin-right: 15px;
    margin-bottom: 15px;
    border: 1px solid #f1f1f1;
    padding: 10px;
}
#content img.alignleft, #content img.alignright, #content img.aligncenter {
    margin-right: 15px;
    margin-bottom: 15px;
    border: 1px solid #f1f1f1;
    padding: 10px;
}
#content img {
    max-width: 95%;
}

Next I’ll add a background under the posts where my “leave a comment” and entry info stuff is at and keep it looking like Twenty Ten.

/* change the color of the meta links for posts */
.entry-utility {
	color: #f4f4f4;
	padding: 5px;
	background: #111111;
}
.entry-utility a {
	color: #ddd;
}

Again, not a big change, but it seperates each post a bit without changing Twenty Tens look too much.

The top navigation links when viewing a post or page have always annoyed me, so I hide them, I also like to hide Page Post titles, I already know what page I’m on cause it’s highlighted, I don’t need it to tell me again, I’ll also hide the comment form allow tags.

/* change the color of the meta links for posts */
.entry-utility {
	color: #f4f4f4;
	padding: 5px;
	background: #111111;
}
.entry-utility a {
	color: #ddd;
}
/* hide the top navigation links when viewing posts */
.paged #nav-above, .single #nav-above {
    display: none;
} /* hide page titles */
.page .entry-title {
	display:none;
}
/* hide comment form allow tags */
#respond .form-allowed-tags {
	display: none;
}

The last change I’ll make is to make my sidebar a bit wider, I find it’s not wide enough for some recent comments plugins, or if I want to have a widget containing pictures in it.

/* wider sidebar */
#container {
	float: left;
	margin: -10px 0 4px;
	width: 638px;
}
#content {
	width: 610px;
	overflow:hidden;
	margin:0 0px 10px 0px;
    padding: 5px 0px 0px 20px;
}
#primary, #secondary {
	float: right;
	overflow: hidden;
	width: 270px;
    margin: 0 0 4px 0;
}
.one-column #content {
	margin: 0 0 0 80px;
	padding: 0;
	width: 800px;
}

Anyways, it’s not alot but it’ll make your basic Twenty Ten theme a bit different. I’ve zipped the CSS and you can upload it to your site and use it however you want. You can view the theme for a while until I need to change it on my Test Site I did add some functions for post thumbnails and featured image. If you want to know how to do that, leave a comment and I’ll post it.
Download