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!
Aug 04, 2010 @ 07:58:19
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.
Oct 12, 2010 @ 06:27:59
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.
A new Twenty Ten Child Theme | Zeaks Blog
Oct 12, 2010 @ 06:49:25
[...] theme, though not technically a child theme is one from Designerfield.com called Transparent Twenty Ten Theme. This theme comes with a transparent header and wrapper area, [...]
Apr 28, 2011 @ 02:36:21
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.
Apr 28, 2011 @ 04:31:28
You need to add a transparent png to the wrapper.
#wrapper
{
background: url(images/transparent.png) repeat;
}