Transparent Twenty Ten Theme

Today I decided to messed around with the new default WordPress theme Twenty Ten. I took out the custom header. Made the wrapper and header transparent (works in IE6+). Now you have a clean, transparent looking theme with the rest of the features of the stock Twenty Ten theme.

Below are the files you need to make the changes. Remember to back up you original theme files.

Here are the files: Download

After you backup your theme files. Upload and replace the styles.css and header.php files with the files in the zip that I provided.

Then upload the header-white.png to you images folder.

Then login into the admin area and upload your custom background image. To start try out the demo background image that I added.

Here is where I got the background. It’s beautiful!
http://www.flickr.com/photos/laszlo-photo/3185734228/

The settings I would use with this design are:

– -Display Options – –

Position: Left

Repeat: No Repeat

Attachment: Fixed

Color: #FFFFFF

Please let me know if you need any help or if something isn’t working right!

6 Replies to “Transparent Twenty Ten Theme”

  1. I want to make my wrapper transparent, or just get rid of it all together, how do I do that? I was looking at your code, but couldn’t find the transparent part.

  2. Nice theme, the first transparent one I’ve seen. Though this could of been made into a Twenty Ten child theme easily. If you have a list of what was changed in the stylesheet I’ll add it to my child theme list for 2010http://zeaks.org/wordpress-2/twenty-ten-child-theme-list

    Also love the grunge backgrounds you made.

  3. Pingback: A new Twenty Ten Child Theme | Zeaks Blog
  4. Hi!

    My website turned out looking like this when I tried following the instructions. Any idea what went wrong, and how to fix it? I want there to be a transparent frame where the text is. Just like the one examplified on top of this page.

  5. You need to add a transparent png to the wrapper.

    #wrapper
    {
    background: url(images/transparent.png) repeat;
    }

Comments are closed.