wpvidZ

Learn WordPress With Video Tutorials

  • Blog
  • Browse
    • Backup & Restore
    • WordPress Localhost
    • WordPress Hosting
    • WordPress themes
    • Version Updates
    • Plugin Tips
    • Security
    • Tutorials
    • WordPress SEO
    • WP Miscellaneous
    • Sitemap
  • WP 5+ Tutorial
  • Search
wpvidZ Blog WordPress themes Change Twenty Ten’s Background- WordPress

WordPress themes

Change Twenty Ten’s Background- WordPress

Last updated on February 18, 2017
Posted on June 29, 2010

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.

  • Is my site loading fast? I use this shared hosting
  • Try my theme >
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:

drop eleven shadow twenty twentyten

Latest Posts

  • Twenty Nineteen Theme Full Tutorial – Creating a Website
  • Uninstall W3 Total Cache Plugin – Incredibly Easy!
  • Create WordPress Website 2018 on SiteGround Genesis
  • WordPress Noopener Noreferrer Rel Attribute Quick Fix
  • WordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • Twenty Seventeen One Page Parallax Scrolling Website Style
  • How To Add Google Map in WordPress Contact Page
  • WordPress 4.7 Justify Text and Underline
  • Twenty Seventeen Footer “Proudly Powered By WordPress” Text
  • How To Add YouTube Subscribe Button To WordPress Website
→ Add “Logo” To Twenty Ten WordPress

Comments

  1. Charlie says

    July 14, 2010 at 5:50 pm

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

    • Kimi says

      July 14, 2010 at 6:37 pm

      @Charlie, I am happy that it is what you needed. Good luck with your new blog 🙂

  2. Jill says

    July 24, 2010 at 9:30 am

    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

      July 25, 2010 at 11:57 am

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

  3. Tonny says

    September 6, 2010 at 1:23 pm

    Nice 🙂 Very happy toget this tutorial.
    But it doesnt work in IE of course.

    • Kimi says

      September 6, 2010 at 5:57 pm

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

  4. syahrilhafiz says

    November 29, 2010 at 11:53 am

    thanks for your tutor..
    i like it..

    • Kimi says

      November 29, 2010 at 2:17 pm

      You’re most welcome! Glad you like it 🙂

      Thanks for commenting.

  5. Shelly says

    February 2, 2011 at 6:11 pm

    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.

    • Kimi says

      February 4, 2011 at 7:03 am

      Hi Shelly,

      It should be in style.css file, yes.

      I hope it helps.

      Thanks!

      Kimi.

  6. Avora says

    February 13, 2011 at 3:51 am

    Thank you for the tips
    I have to work harder i guess 🙁
    Can you tips us how to build back-links

    • Kimi says

      February 14, 2011 at 7:53 am

      Hi Avora,

      I have created some many posts on that, please see category SEO or wordpress tutorial page.

      Thanks.

  7. Dani says

    February 25, 2011 at 1:53 am

    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!

  8. Dani says

    February 25, 2011 at 1:56 am

    Never mind, I spelled it wrong. my bad

  9. Alex says

    March 29, 2011 at 3:23 pm

    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

    April 19, 2011 at 11:19 pm

    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

    April 19, 2011 at 11:40 pm

    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.

  12. Adis says

    May 15, 2011 at 12:00 am

    nice tutorial, thanks Chuck for the JS. glad could get it in IE now.

  13. Fripp says

    August 24, 2011 at 7:24 am

    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

      August 24, 2011 at 8:35 pm

      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

        August 25, 2011 at 7:21 am

        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

    December 3, 2011 at 10:34 am

    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.

Search

Worth Reading

  • Twenty Nineteen theme tutorialTwenty Nineteen Theme Full Tutorial - Creating a Website
  • Twenty Seventeen One Page ParallaxTwenty Seventeen One Page Parallax Scrolling Website Style
  • Twenty Seventeen Proudly Powered By WordPress codeTwenty Seventeen Footer "Proudly Powered By WordPress" Text
  • Where your child theme folder should be located inside themesHow To Create WordPress Child Theme Manually or With Plugin
  • How to Remove Twenty Fourteen Author Name or Link
  • How I add thumbnails with Twenty Twelve theme
  • Change Default Green Color WP 2014 Theme
  • Showing Twenty Fourteen Thumbnail in A Smaller Size
  • How To Style WordPress Caption in WP Twenty Fourteen Child
  • Proudly Powered By WordPress Twenty Fourteen

Backup & Restore

Backup WordPress Without a Plugin or FTP

Export WordPress Database using phpMyAdmin

BigDump Alternative – When BigDump Failed Importing Large WP Database

At This Place The Current Query Includes More Than 300 Dump Lines

View All..

Live Online Website

View All..

Offline Installation

How to Upload WordPress localhost to live server manually

Steps to Install WordPress on Windows 8 and WAMP 2.4

Install WordPress on Mavericks OS X 2014

Maximum upload file size in WAMP WordPress

View All..


WPvidz Hosting Image

  • About Me
  • Contact
  • Affiliate Disclosure
  • Privacy Policy
  • Term of Use

Copyright© 2023 wpvidz.com SG2021 | sitemap.xml


WPvidz.com is independent from WordPress.org but is proudly powered by WordPress & its block-based editor (Gutenberg)

WpvidZ.com uses cookies" to give you the best browsing experience possible. If you click "I Accept" below then you are consenting to this. For more information about your privacy settings on this website, please visit the Privacy Policy page. I Accept