Change Twenty Ten’s Background- WordPress

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”

Before and After adding border.

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”

Before and After adding round corner.

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.

Before and After Twenty Ten background shadow effect.

Those are small tips you can use to customize or modify twenty ten wordpress 3.0 default theme.

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: