wpvidZ

Learn WordPress With Video Tutorials

wpvidZ Blog WordPress themes Change Twenty Ten’s Background- WordPress

WordPress themes

Change Twenty Ten’s Background- WordPress

Last updated on
Posted on

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:

Latest Posts

Comments

  1. Charlie says

    Thanks for this very much, it gave me just the finishing touches I needed. Much appreciated!

  2. Jill says

    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

    • Kimi says

      @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.

    • Kimi says

      @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.

  5. Shelly says

    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.

  7. Dani says

    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!

  9. Alex says

    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

  10. Chuck says

    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;

  11. Chuck says

    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.

  13. Fripp says

    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

    • Kimi says

      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.

      • Fripp says

        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!

  14. MEMK says

    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.

Comment form on this post is closed after 60 days.