Simple easy to follow tutorial on how to customize and modify Twenty Ten’s background, default theme of wordpress 3.0
Twenty Ten has lots of features that you can modify, even the navigation bar can be customized by doing drag and drop.
But today i want to give you simple tips how we can change the background of Twenty Ten, and giving border, radius round corner, and a little bit of shadow.
I have also made videos about:
a. If you use another theme, and this theme does not have “background” option in your dashboard, you can follow this tutorial on adding custom background option.
b. if you want to use an image as Twenty Ten’s background, or other themes.
Here is the step by steps tutorial how we can customize Twenty Ten background (or watch the video below)
1. First step, we are going to change background color, this can be easily done by going to Admin dashboard/Appearance/Background, and choose “Select a color” button, select the color you like. Click “Save Changes.
2. The next example, is we can make border around our layout, to do this, navigate to your Admin dashboard/Appearance/editor, and look for style.css file.
Copy all of the content, and paste it in html editor, in my case, i use notepad++ and edit line 167 by adding this line of code:
border:1px solid #000;
- If you want other color, then just replace #000 with your color code.
- Select all the codes and copy it, then paste in style.css in dashboard, click “Update file”
3. Other example, we will create round corner for our blog’s background. Back to our notepad++, and add this line:
-moz-border-radius:20px;
-webkit-border-radius:20px;
- Select all, copy, and paste in style.css of your dashboard. Hit “Update file”
4. Next tip is giving shadow effect to your wordpress 3.0 twenty ten’s background. Again in our code, add these two lines:
-moz-box-shadow:3px 3px 15px red;
-webkit-box-shadow:3px 3px 15px red;
Replace “red” with any color you want.
- Copy it, paste it in style.css. Click “Update File” button.
Of course you can modify color, width, height, just experiment with your modification, it is alot of fun.
I hope you like it 🙂
Video Tutorial:
Thanks for this very much, it gave me just the finishing touches I needed. Much appreciated!
@Charlie, I am happy that it is what you needed. Good luck with your new blog 🙂
Thanks Kimi, this info has been very helpful. I was able to set a background image to pages (where we can also set a background colour in Twenty Ten), but is there a way to make the white pages either transparent or set a background colour or image to the page where the text is? So its something other than white pages. Many thanks for your help
@Jill, Hey there,
Yes, to change background color where the text (content) you can replace line 169 (see image above) which
background:#fff;
replace the #fff with any color you like, or even image. But dont forget to upload your background image to your webserver.Nice 🙂 Very happy toget this tutorial.
But it doesnt work in IE of course.
@Tonny, Hi there,
yes, that’s why i use firefox.
If you visitors mostly using firefox i would not so care about ie.
Thanks for leaving comment.
thanks for your tutor..
i like it..
You’re most welcome! Glad you like it 🙂
Thanks for commenting.
Thank you so much for these straight forward details. Other options are so convoluted. Really appreciate the rounded corners. Today I’m going with the Weaver theme and getting a handle on the snippets. For the rounded corners (step 2 above) are these lines css snippets that I can just add to the section between the and tags? Or should I still edit the Style.css manually as I did when I edited regular Twenty ten.
border:1px solid #000;
-moz-border-radius:20px;
-webkit-border-radius:20px;
-moz-box-shadow:3px 3px 15px red;
-webkit-box-shadow:3px 3px 15px red;
Thank you kindly for your reply and for sharing your knowledge.
Hi Shelly,
It should be in style.css file, yes.
I hope it helps.
Thanks!
Kimi.
Thank you for the tips
I have to work harder i guess 🙁
Can you tips us how to build back-links
Hi Avora,
I have created some many posts on that, please see category SEO or wordpress tutorial page.
Thanks.
This has been very helpful, thank you. It is a lot more clear than some other websites. I am having a problem though, whenever I try to add a boarder, it doesn’t do anything and seems to change the coding back without it. I am putting this:
#wrapper {
background:#ffffff;
margin-top:20px;
padding:0 20px;
boarder:1px solid #ff6666;
}
and then it saves but nothing happens and it changes the code back to:
#wrapper {
background:#ffffff;
margin-top:20px;
padding:0 20px;
}
and I have no idea why. Please help!
Never mind, I spelled it wrong. my bad
I tried it, and it’s a nice tutorial. But i dont work in IE And how do I remove the inner border and make it look the same in all browsers
As Alex mentioned it does not work in IE. Personally I would not do a design that does not work in at least Firefox and IE. Anyway, Alex mentioned “how do I remove the inner border?” – I think that is because the code is not quite at line 167, on my fresh install of 3.1 the css looks more like this (I started adding the mods at line 175):
167 #wrapper {
168 margin: 0 auto;
169 width: 940px;
170 }
171 #wrapper {
172 background: #D9D2D2;
173 margin-top: 20px;
174 padding: 0 20px;
175 border:1px solid RED;
176 -moz-border-radius:20px;
177 -webkit-border-radius:20px;
Found that the corners can be done in IE using some java script from this website: curvycorners.net
Download the js files, put them on your website and then put this line in header.php (inside ) and change “yoursite.com/” to point to the js files:
This will add the curves to IE but will not display the shadow discussed on this page.
nice tutorial, thanks Chuck for the JS. glad could get it in IE now.
Hello! This is a great site to learn!
Im using Twenty eleven Child theme and I add this CSS:
#wrapper {
-moz-box-shadow:3px 3px 15px red;
-webkit-box-shadow:3px 3px 15px red;
}
But nothing change.
How can I add that nice shadow effect?
I will really appreciate any help with this.
THANKS in advance
Hi Fripp,
Welcome to my blog
I haven’t checked it with Twenty Eleven, might do it when I have time, thanks for this input
Regards
Kimi.
Hi Kimi I will be glad and grateful if you share your results with that code.
Again I like your site and I try to leverage as much as I can of it.
THANKS!
Rounded Corners AND Shadow will work in IE9 down to IE6.
Try this:
css3pie.com/
and follow the Instructions.
Work very well.
Hope its usefull.