Creating Twenty Ten Child Themes Part 2

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.
Site Description Before

Add this to your style.css

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

Site Description After
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.
Menubar Before
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.
Menubar After

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.
Fonts Before

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.
Fonts After
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.
Before Entry Utility Change

/* 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.
After Entry Utility Change
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.
Normal Sidebar

/* 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;
}

Sidebar Wider

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.




23 thoughts on “Creating Twenty Ten Child Themes Part 2

  1. I added your nav menu css without overriding the other specifications for each thing, ie just changing the elements you mentioned. Now the drop-down menu seems to have disappeared??

  2. I really like the Twenty Ten theme but it would certainly be nice to tweak it and give it a slightly individual look without moving to a totally new theme. I have carefully read your two posts and and it has encouraged me to have a go on a new site I am building as the tweaks don’t look too formidable – nice challenge to be able to do it myself and not use a preexisting child theme or different theme altogether. Does emphasis the need for me to polish up my CSS though…
    Ann recently posted..Learning to Read Music for the Absolute BeginnerMy Profile

Leave a Reply

Please use the forums for questions that do not relate to this post.
Wrap code in [code] Your Code Here [/code] tags.

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge