Things you can do with Twenty Ten theme

Twenty Ten theme has been around for a while now, and there’s only a handful of tutorials on how to change this, move that and add something else to customize your child theme. I’ll explain with examples how to start your own child theme and make a few nice changes like move the sidebar to the left, create a 3 column twenty ten, move the menu and make it transparent.

First thing, you’ll obviously need to have Twenty Ten theme installed on your site, next thing to do is create a folder in your themes directory and choose a name for your theme. For my example I’m going to just call my theme “test”

You’re directory should look like this wp-content/themes/Your-Child-Theme

Now create a style.css file (I recomend using NotePad++ to edit .css files) open it, and add this to it.

/*
Theme Name: Theme Name
Theme URI: http://yoursite/yourtheme
Description: A child theme of 2010 default WordPress theme.
Author: You
Author url: http://yoursite.com/
Version: 1.0
Tags: black, blue, white, fixed-width, custom-header, theme-options
Template: twentyten
*/
@import url('../twentyten/style.css');

This tells your theme to use the stylesheet from Twenty Ten and is the beginning to your own theme. What’s so great about this is, we won’t ever make any changes to the Twenty Ten theme, we just add changes to your own. Now go ahead and save this, upload it to your theme folder then activate it. You won’t see anything different from the Twenty Ten theme yet.

By default, Twenty Ten theme has it’s sidebar on the right, this looks great but the whole point in creating a child theme is to make it the way you want. I’ll show you had to easily move the sidebar from the right, to the left.

The sidebars are defined by #primary,#secondary, we just need to tell wordpress to show them on the left, instead of the right. Open your style.css and add this to it. This floats the sidebar to the left, and moves the secondary sidebar along with it.

Sidebar on left:


#primary, #secondary {
float: left;
overflow: hidden;
width: 220px;
margin-left: 10px;
}
#secondary {
clear: left; 
}

Now since we moved the sidebar to the left, we’ll need to move the post are to the right.

#container {
float: right;
margin: 0 -250px 0 0;
width: 940px;
}
#content {
    overflow:hidden;
}

Save and look at your site, if all went well, you should see the sidebar on the left now.

What if we want to have two sidears, one on the left and one on the right? That’s easy to do too, we’ll use the secondary widget area and place it on the right, and move the primary one to the left.

3 Column layout:


#main {
    width:960px;
    margin:0 auto;
    overflow:hidden;
    position:relative;
}
#container {
    width:940px;
    float:left;
    margin:0 0 0 10px;
}
#content {
	margin-left: 210px;
	float: left;
	overflow:hidden;
	width: 520px
}
img.size-auto, img.size-full,
img.size-large, img.size-medium,
.attachment img, img.alignleft,
img.alignright, img.aligncenter {
max-width: 520px ;
}
#primary {
	width:200px;
	float:left;
	margin: 0 0 0 -940px;
}
#secondary {
    width:200px;
    float:left;
	margin: 0 0 0 -200px;
	padding-left: 10px;
}
#footer {
    clear:both;
}
#content img {
    height: auto;
    max-width: 90%;
    width: auto;
}

Now you should see your content in the middle, with a sidebar on the left and right. (once you add widgets) You can adjust the container, primary and secondary menu widths to your liking.

A nice feature of Twenty Ten is the navigation area. By default this is at the bottom of the header area. I’ll show you how to moved it to the top, or overlapping the header which looks nice when transparency is added.

Open your style.css and add this to move the navigation menu to the top of the header.

#header #access{
top: -200px;
position: relative;
}

This pushes the navigation to the top of the header image. Now I’ll show you how to do something nice with this. Lets overlap the navigation menu with the header image and make it semi transparent, this only works on some browsers, it will stay the same in IE.

This will push the nav menu up a bit so it’s on top of the header image.

Move Menubar:


#header #access{
top: -37px;
position: relative;
}

Now we’ll make it semi transparent.

#access {
/* fallback for web browsers that doesn’t support RGBa */
background: rgb(0, 0, 0) ;
/* RGBa with 0.70 opacity */
background: rgba(0, 0, 0, 0.70)

Next post I’ll show you how to add round corners to your site, add text shadow to different areas and a few other things. As promised here is an example style sheet you can use with the above code already added, please read the comments between the code. Just rename it to style.css and change the info at the top.

Download is now on the downloads page (link at top)

Please refer to Sites referenced for some of the code used. wpweaver.info, http://aaron.jorb.in/

Comments

  1. says

    Hi there, this post was really useful to me a while ago, I used it to play around with the Twenty Eleven on my site to move the menu bar over the header image and it’s looking good, but there’s one last thing I can’t manage to sort out… I now need to get rid of the space it was sat in, so that there isn’t a huge gap under the bottom of my header. I’ve looked around the area with Firebug to see if I could identify some CSS to modify, but had no luck…. And I’ve posted in the Themes forum on WP but got no replies, so thought I’d come back to this post and see if you had any ideas?

    Cheers,

    Kitty

    • says

      Hi Kitty. Usually applying a negative margin on #main does the trick, but it’s not moving for me in firebug. Try using

      #access { margin-bottom: -20px; }

      You might also need to adjust the padding around the breadcrumbs, something like

      p#breadcrumbs { padding: 0 75px 10px; }
      • says

        Brilliant, that did the trick! Thanks a lot for your help. I’m getting there slowly, one little tweak at a time!

  2. Mohammad Yaseen محمد یاسین says

    Hello, Thanks for such a helpful post, I want to replace the default ‘Archives’, ‘Meta’, ‘Recent Posts’ text in sidebar widgets with translation or other text in my native language (urdu), which is written right to left. Is there any way to do this?

    • says

      I’m not sure what theme you are using, but WordPress default themes should have translation files and they would be used if your WordPress is set to yoru language. Could you open a forum post Mohammad and let me know what theme you’re using, thanks.

  3. says

    pls, how do i hide parent pages from not showing when it is click, for there is nothing there. 2. when the link to any post on my homepage is click, the page of the post will not show in full one has to click continue reading to show in full. how do i make the post pages to show in full at the first click of the links.thanks

    • says

      Hi Peter.

      Edit that menu to direct to the page you want. If you don’t want the link to go anywhere you can place a # in the url.

      I don’t know what theme you are using so I can’t answer your second question

  4. says

    Wonderful hack of TwentyTen. Just what the doctor ordered. I ‘ve been looking for simple three column theme for years. I’ll try your trick now. Thanks.

Leave a Reply